JSONP原理及实现

跨域实现的两种方式
一、通过src="http://romateServer.com/api?callback=callbackHandler"
回调成功后，在浏览器端实现callbackHandler方法，返回值在callbackHandler参数中
批注：既然如此，所有src都可以实现跨域。比如图片src等。具体实现是将该内容动态的插入到DOM中。

二、通过jQuery的ajax参数{dataType:jsonp,jsonp:callback,success:function(){}}
回调成功后，返回值在success参数中
在jQuery1.5后，又增加如下描述，照着做之后发现报错：
Uncaught SyntaxError: Unexpected token :
暂未找到解决办法，所以还是回归传统方式。
jsonp
Type: String
Override the callback function name in a JSONP request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So {jsonp:'onJSONPLoad'} would result in 'onJSONPLoad=?' passed to the server. As of jQuery 1.5,setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case,you should also explicitly set the jsonpCallback setting. For example,{ jsonp: false,jsonpCallback: "callbackName" }
jsonpCallback
Type: String or Function()
Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5,you can also use a function for this setting,in which case the value of jsonpCallback is set to the return value of that function.
ajax与jsonp的异同再做一些补充说明： 1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。
总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点！
2014-06-09
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
JSONP原理： 首先在客户端注册一个callback,然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function,function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
实例： （1）客户端：（任一）

Html代码

1. <metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/>
2. scripttype="text/javascript">
3. functionjsonpCallback(result){
4. //alert(result);
5. for(variinresult){
6. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
7. }
8. varJSONP=document.createElement("script");
9. JSONP.type="text/javascript";
10. JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
11. document.getElementsByTagName("head")[0].appendChild(JSONP);
12. </script>

或
alert(result.a);

alert(result.b);

alert(result.c);

scripttype="text/javascript"src="http://crossdomain.com/services.php?callback=jsonpCallback">注意：JavaScript的链接，必须在function的下面。
（2）服务器端：

Php代码

<?php
2. //服务端返回JSON数据
3. $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
4. $result=json_encode($arr);
5. //echo$_GET['callback'].'("Hello,World!")';
6. //echo$_GET['callback']."($result)";
7. //动态执行回调函数
8. $callback=$_GET['callback'];
9. echo$callback."($result)";