ajax工作原理及jsonp跨域详解

一、Ajax简介

ajax = 异步 JavaScript 和 XML。
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。我们知道，传统的网页（不使用ajax）如果需要更新内容，必须重新加载整个网页。Ajax的出现，使得使网可以实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
注意：ajax本身不支持跨域请求，需要在服务器端处理。

二、Ajax工作原理

ajax技术核心是XMLHttpRequest对象
ajax的请求过程：

　　　　1）创建XMLHttpRequest对象

2）连接服务器

3）发送请求

4）服务器作出响应

　　　　 5）接收响应数据

三、Ajax与jsonp

从实现方式上来讲，ajax是通过创建XMLHttpRequest来获取同源的数据，而jsonp是通过<script>标签来调用服务器提送的js脚本

四、jsonp产生原因

　1. Ajax直接请求普通文件存在跨域无权限访问的问题（静态页、动态页、web服务、wcf只要是跨域请求一律不准）
　2. web的页面上调用js文件是不受跨域的影响（凡拥有src属性的标签都拥有跨域能力script img iframe）
　3. 可以判断现在想通过纯web端(ActiveX控件、服务端代理、H5之Websocket等方式不算)跨域访问数据就只有一种可能，就是在远程服务器上设法把数据装进js格式的文件里，供客户度调用和进一步处理；
　4. json的纯字符数格式可以简洁的描述复杂数据还被js原生支持
　5. web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去
　6. 客户端在对json文件调用成功后获得自己所需的数据剩下的就按照自己需求进行处理和展现，这种获取远程数据的方式非常像ajax其实并一样
　7. 为了方便客户端使用数据逐渐形成非正式传输协议jsonp

其实，说到ajax就会面临两个不可避免的问题，<i style="color:red">一是以何种格式来减缓数据；二是如何解决跨域问题。</i>目前来说，所被推崇的方案是JSON作数据交换，JSONP来解决跨域问题。
JSON与JSONP虽然看上去只有一字之差，但是实际上根本不是一回事。JSON是一种key/value形式的数据格式，二JSONP则是一种跨域数据交互协议。

五、jsonp原理及过程

首先在客户端注册一个callback, 然后把callback的名字传给服务器（这里客户端和服务器约定以key为jsonp的查询字符串值传递）。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，即执行了预定义的callback函数。

从上述简述可以推出：除了返回函数形式的js代码片段，服务端自然能返回所有符合规范的可执行js片段。

JSONP的缺点是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题；