Ajax详解

一、Ajax的过程

Step1：创建XMLHttpRequest对象，在IE6及以前，创建ActiveXObject对象。

function createXHR(){
if (typeof XMLHttpRequest != "undefined") {
return XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if (typeof arguments.callee.activeString!="string") {
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
i,len;
for (i = 0,len=versions.length; i < len; i++) {
try{
new ActiveXObject(versions[i]);
arguments.callee.activeString = versions[i];
break;
}catch(ex){
//跳过
}
};
};

return new ActiveXObject(arguments.callee.activeString);
}else{
throw new Error("No XHR object available.");
}
}
var xhr = createXHR();

Step2：注册回调函数。

xhr.onreadystatechange=callback;

Step3：设置和服务器的连接信息

调用open( )方法，接受3个参数：要发送的请求的类型，请求的URL和表示是否异步发送请求的布尔值。

xhr.open("get","example.php",true);

Step4：发送数据，开始和服务器进行交互

调用send( )方法，接收1个参数：要发送的数据。如果不需要通过请求主题发送数据，则必须传入null。

xhr.send(null);

Step5：接收响应数据

首先检查status属性，然后再执行下一步操作。

if ((xhr.status>=200 &&xhr.status<300)||xhr.status==304) {
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: "+xhr.status);
}

二、
Ajax与jsonp的优缺点比较

	Ajax	JSONP
能否跨域	受同源策略限制，XHR本身不能跨域	为支持跨域而生
跨域实现原理	基于CORS。 1. 请求时，附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。如：Origin:http://www.nczonline.net 2. 服务器接受请求，则在Access-Control-Allow-Origin:http://www.nczonline.net	1. 通过动态<script>元素来使用，为src属性指定一个跨域URL。
优点	1. 局部刷新页面	1. 能够直接访问响应文本 2. 支持浏览器与服务器之间的双向通信
缺点	1. 跨域难以实现	1. JSONP是从其他域中加载代码执行，安全性难以保障。 2. 要确定JSONP请求是否失败并不容易。

JSONP介绍：

简而言之，JSONP是在客户端将要用来处理请求结果的函数名作为参数传递给服务器端，然后服务器端将请求结果数据作为参数包装在这个函数中，并返回给客户端执行。

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。而数据就是传入回调函数中的JSON数据。

示例：

function handleResponse(response){
alert("You are at IP address "+response.ip+", which is in "+response.city+", "+response.region_name);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

三、 Ajax与iframe的比较

	Ajax	iframe
本质	XMLHttpRequest对象和ActiveXObject对象	HTML标签
数据加载	异步通信，局部刷新页面，响应快	1. 会阻止主页面onload( )事件 2. 即使内容为空个，加载也需要时间
功能	仅局部刷新，改变网页内容容易实现	包含一整个网页，需要考虑布局
实现过程	写js代码，与服务器进行通信，必须局部刷新。但如果服务器进行复杂运算后返回的是比较简单的数据则是个不错的选择。	不刷新页面的情况下，传输数据，比较灵活简单
存在问题	1. 中文乱码 2. 跨域post提交数据，得用JSONP等方式解决	1. 每个iframe只能建立一个请求，如果要同时进行多个请求，则需要建立多个iframe 2. Iframe方式处理的是iframe页面的内容个，交互成功的触发方式主要是靠： a． 页面定时读取页面加载状态：这种方式必然导致客户端资源的较多占用； b． Iframe触发父页面的事件：这种方式导致返回数据的增加，而且还必须保证父页面和框架页的变量和方法的统一。