AJAX及其跨域的主要解决方法

    AJAX = Asynchronous JavaScript andXML（异步的 JavaScript 和 XML）。经过在后台与服务器进行少许数据交换，使网页实现异步更新。要明白异步交互能够经过同步和异步的对比很容易明白：

同步交互，就是最多见的click-refresh模式，点一个链接或提交一个表单，而后就必须重载整个页面

异步交互，javascript根据返回的数据，不刷新页面而改变当前页面的显示，例如：新浪微博，百度地图。

　　 Ajax的异步交互从XMLHttpRequest这个对象开始，它容许经过javascript来执行HTTP请求，而且将会解析一个XML格式或者文本，json等格式的服务器响应，这个过程用户不用等待服务器的响应，用户能够继续进行其它操做。而后，服务器将数据返回，客服端对数据进行处理，能够不刷新页面使得用户获得了新数据。

　　下面就来看XMLHTTPRequest的五步使用法，来实现异步交互：

　　1.创建XMLHTTPRequest对象

1 if(window.XMLHttpRequest){
2     var xmlhttp=new XMLHttpRequest();
3 }else if(window.ActiveXObject){//ie6
4     var xmlhttp=new ActiveXObject();
5 }

　2.注册回调函数

1 xmlhttp.onreadystatechange=callback;

    给xmlhttp对象注册onreadystatechange事件，并绑定回调函数。实际上每次readyState的值发生变化时，回调函数都会被调用，可是通常咱们只关心状态4，表示响应已经彻底接受。

　 3.使用open方法设置和服务器端交互的基本信息 ，分别包含方法和交互方式，true为异步交互。

1 xmlhttp.open("GET","url?parmeters",true)

　　4.设置发送的数据，开始和服务器端交互(因为get方法参数附加在url中，故不须要重复发送了)

1 xmlhttp.send(null)

      对于post方法有些些微的不一样：

1 //3.设置和服务器端交互的相应参数 
2  xmlhttp.open("POST","url",true); 
3 //设置post请求头信息 
4 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
5 //4.设置服务器端发送的数据，启动和服务器端的交互 
6 xmlhttp.send("name=" + userName); 

　　5.在回调函数中判断交互是否结束，响应是否正确，并根据须要获取服务器端返回的数据，更新页面内容

1 function callback(){
2     if(xmlhttp.readyState===4){
3         if(xmlhttp.status===200){
4             var message=xmlhttp.responseXML
5         }
6     }
7 }

补充点XMLHttpRequest对象的readyState 状态 ，总结以下：

(0)未初始化 
此阶段确认XMLHttpRequest对象是否建立，并为调用open()方法进行未初始化做好准备。值为0表示对象已经存在，不然浏览器会报错－－对象不存在。 
(1)载入 
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 
(2)载入完成 
此阶段接收服务器端的响应数据。但得到的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收彻底部响应数据。并为下一阶段对数据解析做好准备。 
(3)交互 
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能经过responseBody、responseText或responseXML属性存取的格式，为在客户端调用做好准备。状态3表示正在解析数据。 
(4)完成 
此阶段确认所有数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，能够经过XMLHttpRequest对象的相应属性取得数据。 

   概而括之，整个XMLHttpRequest对象的生命周期应该包含以下阶段：建立－初始化请求－发送请求－接收数据－解析数据－完成 

ajax的基本过程就是这样了。说到AJAX就必须面临两个问题：

1. AJAX以何种格式来交换数据
2. 跨域的需求如何来解决

    这两个问题目前有不一样的解决方法，好比数据能够用自定义的字符串或者XML来描述，跨域能够用服务器端代理来解决。可是到目前为止最优的方法仍是用JSON来传递数据，用JSONP来跨域

json在此再也不赘述。下文主要讲跨域方法

JSONP的产生：

1. web页面上调用js文件则不受是否跨域的影响(不只如此，咱们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，标签的src属性并不 被同源策略所约束，因此能够获取任何服务器上脚本并执行。好比<script><img><iframe>)
2. 因而能够判断，当前阶段若是想经过纯web端跨域，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

3. 咱们已经知道有一种叫作JSON的纯字符数据格式能够简洁的描述复杂数据，JSON还被js原生支持，因此在客户端几乎能够为所欲为的处理这种格式的数据；

4. 这样解决方案就呼之欲出了，web客户端经过与调用脚本如出一辙的方式，来调用跨域服务器上动态生成的js格式文件（通常以JSON为后缀），显而易见，服务器之因此要动态生成JSON文件，目的就在于把客户端须要的数据装入进去。

5.  客户端在对JSON文件调用成功以后，也就得到了本身所需的数据，剩下的就是按照本身需求进行处理和展示了。

6. 为了便于客户端使用数据，逐渐造成了一种非正式传输协议，人们把它称做JSONP，该协议的一个要点就是容许用户传递一个callback参数给服 务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。

     jsonp的核心就是在客服端建立包含回调函数的script，将<script>中的url定向到跨域的服务器脚本上。不一样的请求建立不一样的回调函数，服务器端根据这个回调函数动态的生成所须要的json数据，做为参数插入到回调函数中，客服端调用回调函数作出相应的动做。下面是一段客服端的脚本程序：

 1 <script type="text/javascript">
 2     //获得航班信息查询结果后的回调函数
 3     var flightHandler=function(data){
 4       alert('你要查询的航班结果：票价'+data.price+'元，余票'+data.tickets);
 5     }
 6     //提供jsonp服务的url地址（无论什么地址，最后生成的都是一段javascript代码）
 7    var url="http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
 8    //建立script标签，并设置属性
 9     var script = document.createElement('script');
10     script.src=url;
11     // 把script标签加入head，此时调用开始
12     document.getElementsByTagName('head')[0].appendChild(script); 
13       </script>

     咱们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，个人本地回调函 数叫作flightHandler，因此请把查询结果传入这个函数中。服务器端这个叫作flightResult.aspx的页面生成了一段这样的代码提 供给客服端来使用：

1 flightHandler({
2     "code": "CA1998",
3     "price": 1780,
4     "tickets": 5
5 });

      咱们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。一个jsonp的执行全过程顺利完成！