MyException - 我的异常网
当前位置:我的异常网» Ajax » Ajax核心学识总结

Ajax核心学识总结

www.MyException.Cn  网友分享于:2015-08-26  浏览:0次
Ajax核心知识总结

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);   
  }
}


文章评论

鲜为人知的编程真相
鲜为人知的编程真相
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
我的丈夫是个程序员
我的丈夫是个程序员
程序员的鄙视链
程序员的鄙视链
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
那些争议最大的编程观点
那些争议最大的编程观点
Java程序员必看电影
Java程序员必看电影
如何成为一名黑客
如何成为一名黑客
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
代码女神横空出世
代码女神横空出世
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
老程序员的下场
老程序员的下场
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
编程语言是女人
编程语言是女人
10个调试和排错的小建议
10个调试和排错的小建议
程序员和编码员之间的区别
程序员和编码员之间的区别
漫画:程序员的工作
漫画:程序员的工作
旅行,写作,编程
旅行,写作,编程
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
每天工作4小时的程序员
每天工作4小时的程序员
程序员应该关注的一些事儿
程序员应该关注的一些事儿
我是如何打败拖延症的
我是如何打败拖延症的
程序员必看的十大电影
程序员必看的十大电影
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员都该阅读的书
程序员都该阅读的书
一个程序员的时间管理
一个程序员的时间管理
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
 程序员的样子
程序员的样子
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
中美印日四国程序员比较
中美印日四国程序员比较
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有