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

最新推荐文章于 2024-05-17 02:38:25 发布

徐文志程序猿

最新推荐文章于 2024-05-17 02:38:25 发布

阅读量4.2k

点赞数 1

分类专栏：前端Js-jQuery-Ajax 文章标签：服务器 phonegap html5 ajax jsonp

本文链接：https://blog.csdn.net/u014646984/article/details/23442823

版权

前端Js-jQuery-Ajax 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

由于在帮助实践与创新中心的伙伴们完成他们的创新实验项目，所以我加入到了考勤开发的项目中，因为要有一个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中的网络可以看到详细的交互信息。