Ajax的原理

通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，用JavaScript来操作DOM从而更新页面。

特点

提交：不用向服务器提交整个页面
返回：不再是整个页面，而是XML，JSON等数据形式
效果：局部更新网页。

XMLHttpRequest对象是Ajax技术的核心。

功能

一套可以在Javascript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。

用法步骤：

在做项目的过程中，搜索框的联想功能中用到了Ajax技术，因为当时这个联想功能是属于公共部分，一个人做好，其他系统直接用，而且自己当时没学习Ajax，所以就直接按着文档去实现。现在趁着总结，结合这个联想功能的js文件，来总结XMLHttpRequest的五步使用法。

/*1.针对不同浏览器创建XMLHttpRequest对象*/

 if(window.XMLHttpRequest){  
     //alert("IE7,IE8,FireFox");  
    xmlhttp =new XMLHttpRequest(); 
    //针对某些特定版本的mozillar浏览器的BUG进行修正  
    //具体来说：浏览器是通过MIME Type来决定什么内容用什么形式显示 
    //如果来自服务器的响应没有 XML mime-type 头部，则一些版本的 Mozilla 浏览器不能正常运行。
    //对于这种情况，httpRequest.overrideMimeType('text/xml'); 语句将覆盖发送给服务器的头部，强制 text/xml 作为 mime-type。	
    if(xmlhttp.overrideMimeType){  
        xmlhttp.overrideMimeType("text/xml");  
    }  
}else if(window.ActiveXObject){  
    //alert("IE6,IE5.5,IE5");  
    var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft XMLHTTP"];  
    for(var i=0;i<activexName.length;i++) {  
         try{  
             xmlhttp=new ActiveXObject(activexName[i]);  
             break;  
        }catch(e){  
                              
        }  
    }  
}  
if(xmlhttp == undefined || xmlhttp == null){  
    alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");  
     return;  
}  
/*2.在XMLHttpRequest对象上注册回调函数*/

xmlhttp.onreadystatechange=callback;  
//XMLHttpRequest对象有readyState属性和onreadystatechange属性（函数），当readyState属性改变时，就会调用onreadystatechange
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
//当onreadystatechange触发时，就会调用callback函数
/*3.使用open方法设置和服务器端交互的基本信息*/

//GET方式交互                  
xmlhttp.open("GET","AJAX?name=" + userName,true);  
            
//POST方式交互                 
xmlhttp.open("POST","AJAX",true);  
//POST方式交互所需增加的代码  
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

/*4.设置发送的数据，开始和服务器端交互 */

    //GET方式  
    xmlhttp.send(null);  
      
    //POST方式  
    xmlhttp.send("name=" + userName);  
/*5.更新界面*/

//在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器返回的数据，并更新页面
		
function callback(){
//判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据  
	if(xmlhttp.readyState == 4){  
	//表示和服务器端的交互已经完成  
			if(xmlhttp.status == 200){  
			//表示服务器的是响应代码是200，正确返回了数据  
			var message=xmlhttp.responseText;  
			//XML数据对应的DOM对象的接受方法  
			//使用的前提是，服务器端需要设置contenttype为text/xml  
                     
			//记忆像div标签中填充文本内容的方法  
			var div=document.getElementById("message");  
			div.innerHTML=message;  
			
   }  
}

五步法封装：

在实际使用XMLHTTPRequest当中，不能每次都创建对象，我们需要将公共部分抽象成“类”，在用的时候，我们直接调用对象的属性，方法，并传入相应的参数即可。

//创建一个"类"，这个"类"具有XMLHTTP属性
function CallBackObject()
{
    this.XmlHttp = this.GetHttpObject();
}
// 通过原型设置这个类的其他属性：
//通过GetHTTPObject获得XMLHTTPRequest对象，此属性中封装的是第一步
CallBackObject.prototype.GetHttpObject = function()
{ 
  var xmlhttp;
  // if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    // try {
      // xmlhttp = new XMLHttpRequest();
    // } catch (e) {
      // xmlhttp = false;
    // }
  // }
   try{  
		//对于Firefox和Opera等浏览器  
        xmlhttp=new XMLHttpRequest();  
        //有此版本的Mozilla浏览器在处理服务器返回的包含XML mime-type头部信息内容时会出错。    
        //所以，为了确保返回内容是text/xml信息，需要包含下面的语句。    
        if(xmlhttp.overrideMimeType)    
        {    
               xmlhttp.overrideMimeType("text/xml");    
        }    
       }catch(e){  //对于IE浏览器  
                var activexName=new Array('Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Micrsoft.XMLHTTP');    
                var success=false;    
                for(var i=0;i<activexName.length && !success;i++){    
                    try{    
                        xmlhttp=new ActiveXObject(activexName[i]);    
                        success=true;    
                        break;  
                    }catch(e){    
                            
                    }    
                        
                }    
                if(!success){    
                    alert('Unable to create XMLHttpRequest.');    
                }    
            } 
		return xmlhttp;			
        }   
 
}
 //DoCallBack封装第二步，第三和第四步
CallBackObject.prototype.DoCallBack = function(URL)
{ 
  if( this.XmlHttp )
  {
    if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
    {
      var oThis = this;
      this.XmlHttp.open('POST',URL);
      this.XmlHttp.onreadystatechange = function(){ oThis.ReadyStateChange(); };
      this.XmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      this.XmlHttp.send(null);
    }
  }
}
 
CallBackObject.prototype.AbortCallBack = function()
{
  if( this.XmlHttp )
    this.XmlHttp.abort();
}
 
CallBackObject.prototype.OnLoading = function()
{
  // Loading
}
 
CallBackObject.prototype.OnLoaded = function()
{
  // Loaded
}
 
CallBackObject.prototype.OnInteractive = function()
{
  // Interactive
}
 
CallBackObject.prototype.OnComplete = function(responseText,responseXml)
{
  // Complete
}
 
CallBackObject.prototype.OnAbort = function()
{
  // Abort
}
 
CallBackObject.prototype.OnError = function(status,statusText)
{
  // Error
}
 //封装第五步，在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器返回的数据，并更新页面
CallBackObject.prototype.ReadyStateChange = function()
{
  if( this.XmlHttp.readyState == 1 )
  {
    this.OnLoading();
 }
  else if( this.XmlHttp.readyState == 2 )
  {
   this.OnLoaded();
  }
  else if( this.XmlHttp.readyState == 3 )
  {
   this.OnInteractive();
  }
  else if( this.XmlHttp.readyState == 4 )
  {
   if( this.XmlHttp.status == 0 )
      this.OnAbort();
    else if( this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" )
      this.OnComplete(this.XmlHttp.responseText,this.XmlHttp.responseXML);
    else
      this.OnError(this.XmlHttp.status,this.XmlHttp.statusText,this.XmlHttp.responseText);   
  }
}

原文链接：https://www.f2er.com/ajax/163794.html

Ajax核心知识总结

Ajax的原理

特点

功能

用法步骤：

五步法封装：

猜你在找的Ajax相关文章