XMLHttpRequest对象负责将用户信息以异步方式发送到服务器,并接受服务器返回的相应信息和数据。也就是可以在页面已经加载后从后从服务器请求、接收数据,这样使得用户的体验度更好,而同时提升了客户端与服务器的交互速度,AJax得以实现。故 XMLHttpRequest是Ajax技术体系中最为核心的技术,缺少了它,Ajax的其余技术就无法成为一个有机的整体。
创建XMLHttpReques
在使用XMLHttpRequest对象发送请求和处理响应之前,首先必须使用JavaScript创建XMLHttpRequestRequest对象。
代码:
<script language="javascript" type = "text/javascript"> var xmlHttp; //使用新版本的IE创建XMLHttprequestRequest对象 try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(_e){ //使用旧版本的IE创建XMLHttpRequest对象 try{ xmlHttp = new AcriveXObject("Microsoft.XMLHTTP"); }catch(_E){ } } //使用其他浏览器创建XMLHttpRequest对象 if (!xmlHttp && typeof XMLHttpRequest !='undefined') try{ xmlHttp = new XMLHttpRequest(); }catch(e){ xmlHttp = false; } } </script>
属性和方法
XMLHttpRequest对象提供了一系列属性和方法,来向服务器端发起异步HTTP请求,监听服务器状态,并在服务器完成数据响应处理之后接收服务器端返回的信息数据。
属性和方法连接:http://www.w3school.com.cn/xmldom/dom_http.asp
XML五步使用法
1、建立XMLHttpRequest对象
2、注册回调函数
3、使用Open方法设置和服务器端交互的基本信息
4、设置发送的数据,开始和服务器端交互
5、在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容。
实例代码:
<script type="text/javascript"> var xmlhttp; function submit() { if(window.XMLHttpRequest) { //IE7 above,firefox,chrome^^ xmlhttp=new XMLHttpRequest(); //为了兼容部分Mozillar浏览器,当来自服务器响应开头不是xml,导致的无法响应问题 if(xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType('text/xml'); } } else if(window.ActiveXObject) { //IE5IE6 xmlhttp=new activeXObject("Microsoft.XMLHTTP"); } if(xmlhttp==null||xmlhttp==undefined) { alert("con't create XMLHttpRequest Object"); } var userName = document.getElementById('testText').value; //注册回调函数 (错误的写法callback()) xmlhttp.onreadystatechange = callback; //Get方式交互,设置服务器端交互的响应的参数 //发送信息 xmlhttp.open('GET','AjaxServer.aspx?name='+userName,true); //设置向服务器端发送的数据,启动和服务器端的交互 xmlhttp.send(null); //Post方式交互 xmlhttp.open('POST', 'AjaxServer', true); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //设置向服务器端发送的数据,启动和服务器端交互 xmlhttp.send('name='+userName); } //定义callback 函数 function callback() { //判断交互是否完成,是否正确返回 ,还有判断服务器端是否正确返回了数据 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器返回信息 var message = xmlhttp.responseText; //得到提示信息div var testDiv=document.getElementById('test'); testDiv.innerHTML=message; } } </script>
总结
本篇博客简单总结了一下XMLHttpRequest对象的一些基本知识,积累理论,实践应用。通过学习XMLHttpRequest对象也体会出了BS的优势,发布简单方便,灵活,用户体验度好。