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就必须面临两个问题：
- AJAX以何种格式来交换数据
- 跨域的需求如何来解决
这两个问题目前有不同的解决方法，比如数据可以用自定义的字符串或者XML来描述，跨域可以用服务器端代理来解决。但是到目前为止最优的方法还是用JSON来传递数据，用JSONP来跨域
json在此不再赘述。下文主要讲跨域方法
JSONP的产生：
- web页面上调用js文件则不受是否跨域的影响(不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，标签的src属性并不
被同源策略所约束，所以可以获取任何服务器上脚本并执行。比如<script><img><iframe>) - 于是可以判断，当前阶段如果想通过纯web端跨域，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；
- 我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；
- 这样解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。
- 客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了。
- 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作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的执行全过程顺利完成！
AJAX及其跨域的主要解决方法,布布扣,bubuko.com