用原生js来处理跨域的数据（jsonp）

说明总结：

1.ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

2.但是ajax和jsonp在数据传输的过程中都是可以用json格式的数据。

3.其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

4.ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

服务器端代码：

 1 //获取客户端的信息
 2     if (isset($_GET['code'])) {
 3         if ($_GET['code'] == "CA1998") {
 4             $flightId = $_GET['code'];
 5             $price = 1000;
 6         }
 7         else if ($_GET['code'] == "CA1997") {
 8             $flightId = $_GET['code'];
 9             $price = 2000;
10         }
11         else{
12             $flightId = 0;
13             $price = 0;
14         }
15         $flightHandler = array('flightId'=>$flightId,'price'=>$price); 
16         $flightHandler = json_encode($flightHandler);
17         $flightHandler = "flightHandler(".$flightHandler .");";// 将数据进行了包装，包装成了一个调用的函数，这一步很重要。
18         print_r($flightHandler);
19     }

获取到的服务器数据：

1 flightHandler({
2     "flightId": "CA1998",
3     "price": 2000
4 });
5 //其实就在服务器端把json数据包装成了一个js的函数，将一个对象作为参数放在函数里面。所以跟ajax用XMLHttpRequest接收数据是不一样的。

传统ajax获取到的json数据：

1 {
2     "flightId": "CA1998",
3     "price": 2000
4 }

客户端代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>XHR</title>
 6     <link rel="stylesheet" href="../templates/css/verify.css">
 7 </head>
 8 <body>
 9     <label for="flightId">输入：CA1998 或者 CA1997 </label> <input type="text" id="flightId" name="flightId"> <input type="button" value="原生js获取jsonp数据（php包装数据）" onclick="flightHandler0()"><input type="button" value="原生js获取jsonp数据（js包装数据）" onclick="flightHandler1()">
10  <script type="text/javascript">
11 
12     // 得到航班信息查询结果后的回调函数
13     function flightHandler(data){
14         if (data.price != 0) {
15              alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '航班 ' + data.flightId );
16         } else{
17             alert("EORROR");
18         };
19        
20     };
21 
22     function flightHandler0(){
23         var flightId = document.getElementById('flightId').value;
24          //供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
25          //其实参数都是前端和后台程序员规定的，前端传过去，后端判断获取即可。
26         var url = "flightResult.php?code=" + flightId +"&callback=flightHandler";
27         // 创建script标签，设置其属性
28         var script = document.createElement('script');
29         script.setAttribute('src', url);
30         // 把script标签加入head，此时调用开始
31         document.getElementsByTagName('head')[0].appendChild(script); 
32     };
33 
34     </script>
35 </body>
36 </html>

设想：

上面的方法是在服务器端把json数据包装在回调函数里面，那能不能在客户端来做这个事情呢？但是试了一下感觉行不通。

在服务器端把

$flightHandler = "flightHandler(".$flightHandler .");";

去掉。

留言中有用jquery写的jsonp的例子。

最后附上用原生js和jquery分别处理jsonp的例子：

js：http://snowinmay.net/ajax/xhr-js-jsonp.html

jsonp：http://snowinmay.net/ajax/xhr-jquery-jsonp.html

所以返回数据应该是json数据，但是在客户端好像没有很好的办法来包装这个数据。如果有的话以后再补充。

 

posted @ 2013-07-19 15:52  snowinmay  阅读(22439)  评论(10)  编辑  收藏  举报