Ajax核心对象 XMLHTTPRequest 五步学会使用(转)

首先还是先了解Ajax

AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML)。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。Ajax的核心思想在于异步交互。

要明白异步交互可以通过同步和异步的对比很容易明白:

    -同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后就必须重载整个页面

    -异步交互,提交请求返回对象是不可见的层,通过javascripts根据返回数据,不刷新页面而改变当前页面的显示,例如:新浪微博,百度地图

显而易见,Ajax使得web应用更加完善,和用户的交互更加友好。

 

    Ajax的异步交互如何开始的,那就是从XMLHttpRequest这个对象开始它允许通过javascript来执行HTTP请求,并且将会解析一个XML格式的服务器响应,这个过程用户不用等待服务器的响应,用户可以继续进行其它操作,然后,服务器将数据返回JavaScript(仍然在 Web 表单中),然后对数据进行处理。这个过程可以迅速更新表单数据,可以不刷新页面使得用户得到了新数据。

 

  下面就来看XMLHTTPRequest的五步使用法,来实现异步交互:

 

  1.建立XMLHTTPRequest对象

 

[javascript] view plain copy
 
  1. //1.创建XMLHttpRequest对象  
  2.         if (window.XMLHttpRequest) {  
  3.             //IE7 8,firefox,chrome  
  4.             //alert("IE7 8,firefox,chrome");  
  5.             xmlhttp = new XMLHttpRequest();  
  6.             if (xmlhttp.overrideMimeType) {  
  7.                 xmlhttp.overrideMimeType("text/xml");  
  8.             }  
  9.         }else if (window.ActiveXObject) {  
  10.             //IE6 及以下  
  11.             //alert("IE6 -");  
  12.             var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0"];  
  13.             for (var i = 0; i < activexName.length; i++) {  
  14.                 try {  
  15.                     var xmlhttp = new ActiveXObject(activexName[i]);  
  16.                     break;  
  17.                 } catch (e) {  
  18.   
  19.                 }  
  20.             }  
  21.         }  
  22.         if (xmlhttp === undefined || xmlhttp === null) {  
  23.             alert("当前浏览器不支持XMLHttpRequest对象");  
  24.             return;  
  25.         }  

 

   注意事项:

  不同浏览器中XMLHttpRequest对象的建立方式是不同的,其实只分为两类,主要是IE版本的问题:

  一是IE及以下版本,需要通过某一个正确的ActiveXObject控件的名称通过new ActiveXObject(控件名)的方式

  二是IE及以上版本,firefoxchrome等非IE浏览器,直接new XMLHttpRequest()

详见以上代码!

 

 

  2.注册回调函数

[javascript] view plain copy
 
  1.     //状态检测  
  2.     //array.push(xmlhttp.readyState);  
  3.   
  4.     //2.注册回调函数  
  5. http.onreadystatechange = callback;  
  6.   
  7. //回调函数callback见第5步  

   

   注意事项:   

     设置回调函数时,不要再函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性,正确的方式应该是将回调函   数的名字注册给这个属性。

     实际上每次readyState的值发生变化时,回调函数都会被调用,但是一般我们只关心状态4,表示响应已经完全接受。

   如果只关心正确的响应数据,只要在执行send方法之前设置回调函数即可,但是仍然建议在XMLHttpRequest对象创建后就先设置回调函数,这样   回调函数还可以处理其他的状态。

 

  3.使用open方法设置和服务器端交互的基本信息

     代码见4

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

[javascript] view plain copy
 
  1. //从文本框中获取内容  
  2.         var userName = document.getElementById("UserName").value;  
  3.           
  4.         //alert(userName);//测试  
  5.           
  6.         //Get方式,传输的数据都在url中,?后面  
  7.         //3.设置和服务器端交互的相应参数,true表示异步方式交互  
  8.         xmlhttp.open("GET","AJAX?name=" + userName,true);  
  9.         //4.设置服务器端发送的数据,启动和服务器端的交互  
  10.         xmlhttp.send(null);//get方式不需要数据,null  
  11.           
  12.         /* 
  13.         //post方式交互 
  14.         //3.设置和服务器端交互的相应参数 
  15.         xmlhttp.open("POST","AJAX",true); 
  16.         //设置post请求头信息 
  17.         xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
  18.         //4.设置服务器端发送的数据,启动和服务器端的交互 
  19.         xmlhttp.send("name=" + userName); 
  20.         //alert("test"); 
  21.         */  

   注意事项:

 

     open方法最多可以有五个参数,其中前三个参数是必须的。

     使用GET方式时,请求数据位于url连接中,后面的send方法的参数直接写null

     使用POST方式时,open方法后面需要先调用setRequestHeader方法,来设置Content-Type的值,然后调用send方法,send的参数就是请求的数据。

 

     回调函数中,最好将判断readyStatestatue的两个if条件分来写,readyState的判断位于外层,status的位于内层。以便于分别处理服务器不是200响应的情况和readyState不是4的情况。

 

  5.在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容

 

[javascript] view plain copy
 
  1.       //回调函数  
  2.             function callback(){                
  3.                 //状态检测  
  4.                 //array.push(xmlhttp.readyState);  
  5.                   
  6.                 //alert("1122");  
  7.                 //5.判断和服务器端的交互是否完成,还要判断服务器是否正确返回了数据  
  8.                 if (xmlhttp.readyState === 4) {  
  9.                     //表示和服务器端的交互已经完成  
  10.                     if (xmlhttp.status === 200) {  
  11.                         //表示服务器的相应代码是200,正确的返回了数据  
  12.                         //两个判断成功后,从XMLHttpRequest对象中取回服务器端返回的数据,可以通过两种方式返回:  
  13.                             //纯文本方式或XML对应的DOM对象  
  14.                         //纯文本数据的接受方式  
  15.                         var message = xmlhttp.responseText;  
  16.                         //alert("1122");  
  17.                         //XML对应的DOM对象的接受方式  
  18.                         //使用前提是,服务器端需要设置contenttype为text/xml  
  19.                         //var domXml = xmlhttp.responseXML;  
  20.                           
  21.                         //记忆向div标签中填充文本内容的方法  
  22.                         var div = document.getElementById("message");  
  23.                         div.innerHTML = message;  
  24.                           
  25. <span style="font-family:SimSun;">                        </span>//<span style="font-family:SimSun;">输出</span>状态  
  26. <span style="font-family:SimSun;">                        </span>//alert(array);  
  27.                           
  28.                     }  
  29.                 }  
  30.             }  

   注意事项:

          当服务器端没有正确返回XML数据时,在js中使用responseXML的方式获取返回的XML数据对应的DOM对象是,firefoxie的结果是有差别的,ie获取根元素节点为null,而firefox获取根元素节点则是一个表示解析错误的元素节点。

 

  简单的五步学会使用XMLHTTPRequest 对象,一个Ajax异步交互客户端js代码就完成了。

posted @ 2018-01-16 15:39  落落无伤  阅读(197)  评论(0编辑  收藏  举报