老早就写好了总结，今天整理发表一下。
XMLHttpRequest对象是AJAX的核心技术，XMLHttpRequest 是XMLHTTP 组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
XMLHttpRequest对象是开发者的梦想，因为能够：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
XMLHttpRequest对象的方法和属性就不再这里进行简绍了，因为大家都可以再网上查到。
这里简绍一下他的使用。
他的使用有五步：
①建立XMLHttpRequest对象
②注册回调函数
③使用open方法设置和服务器端的交互的基本信息
④设置发送的数据，开始和服务器端进行交互
⑤在回调函数中判断交互式否结束，相应是否正确，并根据需要获取服务器返回的数据，更新页面内容。
下面我把自己做的视频例子的ＪＳ封装代码整理的一下。给大家看一下：
<span style="font-family:KaiTi_GB2312;font-size:18px;">//使用封装方法的人只关心提供http的请求方法，数据，成功，和失败的回调方法
//类的构造定义，主要职责就是新建出XMLHttpRequest对象
var MyXMLHttpRequest=function(){
//1、创建XMLHTTPRequest对象
var xmlhttprequest;
//不同浏览器的封装
if(window.XMLHttpReuqest){
//IE7,IE8,firefox,MOailla,Safari,Opera等浏览器创建
xmlhttprequest=new XMLHttpReuqest();
//些版本的Mozilla 浏览器处理服务器返回的未包含XML mime-type
//头部信息的内容时会出错。因此，要确保返回的内容包含text/xml 信息。
if (xmlhttprequest.overrideMineType){
xmlhttprequest.overrideMineType("text/xml");
}
}else if(window.ActiveXObject){
//IE6， IE6.6，IE5
var activeName=["MSML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try{
xmlhttprequest=new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
if (xmlhttprequest === undefined||xmlhttprequest === null){
alert("XMLHttpRequest对象创建失败");
}else{
this.xmlhttp=xmlhttprequest;
}
};
//用户发送请求的方法
MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){
if(this.xmlhttp!== undefined && this.xmlhttp!== null){
method=method.toUpperCase();
if(method!=="GET" && method !=="POST"){
alert("HTTP请求方法必须是GET或POST！！");
return;
}
if (url===null || url===undefined){
alert("HTTP的请求地址必须设置！");
return;
}
var tempxmlhttp=this.xmlhttp;
//2、注册回调方法(这是当服务器返回信息是客户端的处理方式)
this.xmlhttp.onreadystatechange=function(){
//5、判断和服务器端的交互式否完成，还要判断服务器端是否正确返回了数据
//readyState 值为4 的时候，代表服务器已经传回所有的信息，
//可以开始处理信息并更新页面内容了
if(tempxmlhttp.readyState===4){
//表示和服务器端的交互已经完成
//XMLHttpRequest 对成功返回的信息有两种处理方式：
//responseText：将传回的信息当字符串使用；
//responseXML：将传回的信息当XML 文档使用，可以用DOM 处理。
if(tempxmlhttp.status===200){
//表示服务器的相应代码是200，正确的返回了数据
//纯文本数据的接受方法
var responseText=tempxmlhttp.responseText;
//XML数据对应的DOM对象的接受方法
//使用的前提是，服务器端需要设置content-type为text/xml
var responseXML=tempxmlhttp.responseXML;
//这是对页面端ＪＳ的处理
if (callback===undefined || callback===null){
alert("没有设置处理数据正确的返回方法");
alert("返回的数据："+responseText);
}else{
callback(responseText,responseXML);
}
}else{
if (failback ===undefined || failback===null){
alert("没有设置处理数据失败的返回方法");
alert("HTTP的响应吗："+tempxmlhttp.status+",相依吗的文本信息："+tempxmlhttp.statusText);
}else{
failback(tempxmlhttp.status,tempxmlhttp.statusText);;
}
}
}
};
//解决缓存的转换--增加时间戳
if (url.indexOf("?")>=0){
url=url+"&t="+(new Date()).valueOf();
}else{
url=url+"?t="+(new Date()).valueOf();
}
//解决跨域的问题
if (url.indexOf("http://")>=0){
url.replace("?","&");
url="Proxy?url="+url;
}
//3、设置和服务器端进行交互的参数（向服务器发出请求）
this.xmlhttp.open(method,url,true);
//send 的参数如果是以Post 方式发出的话，可以是任何想传给服务器的内容。
//不过，跟form 一样，如果要传文件或者Post 内容给服务器，
//必须先调用setRequestHeader 方法，修改MIME 类别。
if (method ==="POST"){
this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//4、设置项服务器端发送的数据，启动和服务器的交互
this.xmlhttp.send(data);
}else{
alert("XMLHttpRequest对象创建失败，无法发送数据！");
}
};
MyXMLHttpRequest.prototype.abort=function(){
this.xmlhttp.abort();
};</span>
注意：
1、注册回调方法的方式有两种：①一种是ＪＳ文件中的写法。既是Javascript既是定义函数的方式定义相应函数。
xmlhttp.onreadystatechange=function(){}
②xmlhttp.onreadystatechange=callback;需要指出的时，这个函数名称不加括号，不指定参数。
2、向服务器发出请求的时候的
XMLHttpRequest 可以同步或异步地返回Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
对于open方法的详解：默认为true的时候表示异步
对于这个对象的扩展问题：
①增加时间戳的效果，解决浏览器的缓存问题。
下面这个事效果图：红框里的就是时间戳
这样可以防止网址一样来访问缓存的问题HttRequest请求的缓存问题。
时间戳解决别的问题：如用户发帖的页面中，恶意程序来反复提交的问题
②解决跨域访问问题。
跨域：当前网页访问的服务器的域名和端口不同了，就称为跨域访问。
③解决中英文乱码问题：
对于这个原理我看的是是懂非懂的，
总之：XMLHTTPRequest对象用来在后台与服务器进行交换数据。
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/u010924878/article/details/46867817
