AJAX和JSONP的学习一二

我在网上找视频学习AJAX的应用，因为确实这个技术能带来很多极致的用户体验，所有我觉得有必要深入了解了解。AJAX即是异步的请求，然后进行服务端处理，再返回给客户端相应的数据，学到后面老师提出一个问题，就是AJAX的请求是不能跨域的，比如你的网页是www.abc.com/index.html，若在这个网页中进行AJAX请求，那么请求的url域名必须是www.abc.com，后面的地址无所谓（例如：www.abc.com/server/index.php），如果域名变了(例如：www.edf.com/server/index.php)，就会发生安全问题，这缘于同源策略限制。解决办法就是JSONP。

JSONP之所以能解决跨域，就是利用了script标签的src属性，也就是说，我们写一个script标签，引一个src地址，这个地址的域名其实无所谓，比如很常见的我们不引入本地jquery文件，而去引入其他服务器的文件（例如引入百度静态资源库中的jquery文件：<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>），这就相当于跨域请求资源了。

现在我们再来确认下我们需要解决的问题：当我们在AJAX中进行请求外部服务器url（即跨域）时，会受到限制，而我们需要达到的目的是，跨域发送一个GET请求，并发送一些搜索字段（比如：www.edf.com/server/index.php?staffNumber=001），发给服务器端进行处理后再返回给我们想要的数据（一般常用JSON数据，如：{"name":"Aierwa","number":"001","age":24}），有了这个数据，我们在JS代码中就可以操作这个JSON对象了！思路就是这样，让我们看看JSONP是怎么办到的吧！

第一步：跨域发送一个GET请求：在当前页面的js代码区下面再写一个script标签：<script type="text/javascript" src="www.edf.com/server/index.php?staffNumber=001&callback=jsonpCallback"></script>,这里相当于传递了两组关键字，staffNumber是查询字段，callback是待会用到的回调函数。

第二步：发送给服务器端并处理：php里面就可以通过$_GET["staffNumber"]和$_GET["callback"]，两个的值分别对应"001"和"jsonpCallback"，处理的结果需要最终拼接成一个字符串：'jsonpCallback({"name":"Aierwa","number":"001","age",24})'，请注意，这个字符串就是返回给客户端的数据了，可以发现，这是一个JS语句的函数调用:jsonpCallback(data)，其中data参数就是这里的JSON对象。

第三步：客户端处理返回的数据（创建接口对接第二部的回调函数）：上一步已经完成数据返回并做好了一个函数调用的接口了，现在我们需要在当前的html页面的js代码区（即位于第一步创建的script标签上面的那个script里面），function jsonpCallback(data){    alert(data.name)  }，OK，大功告成！

直观一点的代码如下(当前HTML页面内)：

<script>
    function jsonpCallback(data){
        alert(data.name);  //Aierwa
    }
</script>
<script type="text/javascript" src="www.edf.com/server/index.php?number=001&callback=jsonpCallback"></script>
           

我是在学AJAX时看到的JSONP，但是回过头再看感觉JSONP并没有用到AJAX的核心：XMLHttpRequest对象！JSONP仅是用一种技巧达到了跨域访问服务器并进行相关处理的目的。要说相似之处，就是JSONP也运用的GET请求的方式，即在地址后面显式地增加查询字符串，所以应该注意，JSONP是不能进行POST跨域请求的。这应该需要AJAX用其他跨域方式来解决了吧（目前鄙人还不了解...）！

几点需要注意：

1.最下面那个script标签地址指向的是一个服务器端处理需求的地址，却返回了一个可执行js文件，最终结果就是回调用了上面script标签定义了的jsonpCallback函数。

2.jsonp和ajax不是被包含的关系，jsonp是一个技巧策略，ajax是一个具有XHR对象的技术！

3.关于jquery使用jsonp跨域请求，见参考资料。

参考：http://kb.cnblogs.com/page/139725/