phonegap+HTML5完全静态页面跨域与服务器进行交互的方法

   由于在帮助实践与创新中心的伙伴们完成他们的创新实验项目，所以我加入到了考勤开发的项目中，因为要有一个Android的客户端为成果，但是自己又不会用原生的Java来开发，所以决定用之前学过的PhoneGap+HTML5来完成这项工作。

   昨晚完成了整个APP的界面设计，所以就开始完成业务逻辑方面的代码工作，因为之前做过一个类似用PhoneGap的客户端，是通过jQuery+Ajax来和自己的电脑来进行交互所以没有遇到什么交互不了的问题，但是这次是通过Ajax来和远程服务器进行交互，结果Ajax一直显示连接错误。

  

$.ajax({
type:'post',
url:'http://202..........'........
success:function(data){},
error(x, s){
alert('与服务器连接不上');
}
});

所以就觉得难以理解了，于是只能百度或者Google了，经过一系列的查询，发现其实这样的问题并不难解决，其实只需要它 JSONP,其实之前在学习jQuery中的Ajax的时候就已经接触过它，只不过那个时候没有在意它这么强大的功能。

JSONP为什么可以实现跨域操作呢?

 JSONP方式的交互方式和Script方式是一样的。本身XMLHttpRequest本身不能跨域操作，但是script标签的src是可以跨域访问，使用jQuery的JSONP就可以实现跨域操作。

JSONP的使用格式？

        function(json对象)；（function是客户端定义的函数的名字）

        url?callback =function      (客户端需要按照此形式来定义格式)

不过通过JSONP从跨域服务器中返回的数据是不是一定是JSON数据，敝人还没有验证，不过为什么不使用JSON格式呢，可想而知与服务器交互应该控制流量的大小才是，因为JSON格式的轻量化，选择JSON格式似乎好处多多,如果想更深入的了解JSONP可以参考最下方的第一个参考网址。

下面看一个具体的例子来看如何使用JSONP？
  无论是原生的JS，还是一些封装好的JS框架都对JSONP有了一个很好的支持，所以在这里我是通过jQuery来实现这种跨域操作。

1、首先我的界面是这个样子的，前端代码使用了jQuery Mobile框架

<div role="main" class="ui-content">
<h1 class="center">学生登录</h1>
<form>
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="username">学号</label>
<input type="text" name="username" id="username" value="" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<label for="password">密码</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true">
</li>
<li class="ui-body ui-body-a">
<input type="button" class="login_button" class="ui-btn ui-btn-a" value="登录" />
</li>
</ul>
</form>
</div><!-- /content -->

2、JS代码:由于JS代码过长，我将其中的一部分跨域验证演示出来，仅供参考，比如当我输入完学号之后，需要到服务器中验证是否存在这个学号，如果不存在就提示一下.

var username = $("#username").val();//输入的学号
$.getJSON(DOMAIN_NAME+"Login/jsonpCheckUser?u="+username+"&type=stu&callback=?", function(data){
if(parseInt(data.res) != 1){
$(".brush_window").html('学号不存在');
$(".brush_window").css('left', width/2-60);
$(".brush_window").css('top', height/2);
$(".brush_window").slideDown();
setTimeout("$('.brush_window').fadeOut(1500);",1500);//设置1.5S关闭该弹窗
}
});

在jQuery中通过getJSON()函数来使用JSONP，发现函数的第一个参数为服务器文件地址，其他的不重要，重要的是在最后存在一个callback=?，这是getJSON()的一个回调机制。

3、服务器端代码，这里我使用的是PHP。

function jsonpCheckLogin(){
if(isset($_GET['callback'])){  //判断是否有callback
$callback = $_GET['callback'];
}else{
$callback = '';
}
.....
这里就是需要进行判断，这个学号是否存在
.....
if(!empty($callback)){
$json = $callback."(".$json.")";
}
echo $json;
}

通过firebug中的网络可以看到详细的交互信息。



基本的内容就是这些，当然我的这段代码有许多缺陷

有安全缺陷，在与服务器交互的过程中，许多有关用户隐私的信息都暴漏在了URL中，这是不可取的，如果读者有想法，可以告诉我哦。
代码写的不好，不过我会努力的！

参考网址：http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 
    (JSON和JSONP的区别)

这是我的第一篇技术性博客，希望大家不喜勿喷，多谢合作。