传统浏览方式和AJAX方式的不同
多数Web应用程序都使用请求/响应模型从服务器上获得完整的HTML页面。常常是点击一个按钮,等待服务器相应,在点击另一个按钮,然后在等待,这样一个反复的过程。
而AJAX是一种创建交互式网页的网页开发技术,其中XMLHttpRequest是核心的内容,它能够为页面中的javascript脚本提供特定的通信方式,从而使页面的javascript脚本和服务器之间形成动态交互的效果,XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面,而直接和服务器发生交互。
XMLHTTPRequest的五步使用法
1、建立XMLHTTPRequest对象
//1.创建XMLHTTPRequest对象 if(window.XMLHttpRequest){ //alert("IE7,IE8,FireFox"); xmlhttp =new XMLHttpRequest(); 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; } array.push(xmlhttp.readyState);
2、注册回调函数
xmlhttp.onreadystatechange=callback;要注意的是callback不能写成callback(),我们是想把方法名告诉onreadystatechange这个属性,如果加了括号,就相当于把返回值告诉了onreadystatechange属性。
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、更新界面
在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器返回的数据,并更新页面
array.push(xmlhttp.readyState); //判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据 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; alert(array); } }
总结
初步了解XMLHTTPRequest对象的使用,便于以后更深入的去了解和使用。