jquery中ajax的远程请求jsonp学习

文章从JSON和JSONP区别开始讲起，用实例来对比他们之间的不同之处，然后详细讲解了jQuery中的ajax jsonp的使用并给出了示例及详细参数说明。这里推荐给大家，希望对小伙伴能有所帮助
JSON和JSONP
　　JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。
　　JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。

　　JSON是一种数据格式，JSONP是一种数据调用方式。

复制代码 代码如下:

 //JSON

 {

 “name”: “sb”

 }

复制代码 代码如下:

 //JSONP

 callback({

 “name”: “sb”

 })

出于安全考虑，脚本（AJAX）不能访问非本域的内容。但是，静态资源是不受域策略限制的，可以加载任意域的脚本、样式、图片等静态资源，JSOP就是利用这种原理来实现跨域获取数据的。

后端用PHP实现的JSONP服务的代码片段：

复制代码 代码如下:

 echo $_GET['callback'] . '(' . $jsonData . ');';

在jQuery中使用JSONP
　　AJAX和JSONP在jQuery中的调用方式看起来极为相像，千万不要被这种现象迷惑，它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容，而JSONP是动态的添加<script>标签来调用服务器脚本。虽然jQuery把JSONP作为AJAX的一种形式进行了封装，但JSONP并不是AJAX的一种形式或一种特例。
复制代码 代码如下:
 $.ajax({
     url: "http://query.yahooapis.com/v1/public/yql",
     jsonpCallback: "showPrice",
     jsonp: "callback",
     // tell jQuery we're expecting JSONP
     dataType: "jsonp",
     data: {
         q: "select title,abstract,url from search.news where query=\"cat\"",
         format: "json"
     },
     // work with the response
     success: function( data ) {
         console.log( data ); // server response
     }
 });
ajax请求参数说明：
dataType  String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
jsonp，
　　重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback=?”这种GET或POST请求URL参数里的“callback”部分，例如{jsonp:'onJsonPLoad'}会导致“onJsonPLoad”传递给服务器。
jsonpCallback，
　　为jsonp指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。但是实际使用过程中，并不用写回调函数，比如此例中的showPrice，不写也不会报错，因为jQuery在处理JSONP的时候，自动帮你生成回调函数并且把数据取出来共success方法调用。可能像这样：
复制代码 代码如下:
 function success_jsonpCallback(data) { success(data); } 

最后参考http://blog.csdn.net/e421083458/article/details/46896559的实例

1. //使用jsonp可以解决问题  
2.      jQuery(document).ready(function(){   
3.         $.ajax({  
4.              type: "get",  
5.              url: "http://company.test.com/jsonp/jsonp.php",  
6.              dataType: "jsonp",  
7.              jsonp: "callbackparam",  
8.              jsonpCallback:"jsonpCallback",  
9.              success: function(json){  
10.                  alert('json:' + json);  
11.              },  
12.              error: function(){  
13.                  alert('fail');  
14.              }  
15.          });  
16.      });

1. <?php  
2. $funame = $_GET['callbackparam'];  
3. echo $funame.'({"name": "cxh", "sex": "man"})';  

参考链接：http://www.jb51.net/article/57728.htm

http://www.cnblogs.com/shoupifeng/archive/2013/02/02/2889760.html