XMLHttpRequest的五步使用方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了XMLHttpRequest的五步使用方法相关的知识，希望对你有一定的参考价值。
1 <html> 2 <head> 3 <title></title> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <script type="text/javascript"> 6 var xmlhttp; 7 function submit(){ 8 //1.创建XMLHttpRequest对象 9 if(window.XMLHttpRequest){ 10 //建立IE7,IE8,FireFox,Mozilla,Safari,Opera对象 11 xmlhttp=new XMLHttpRequest(); 12 if(xmlhttp.overrideMimeType){ 13 xmlhttp.overrideMimeType("text/xml"); 14 } 15 }else if(window.ActiveXObject){ 16 //建立IE5,IE6对象 17 var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML.2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"]; 18 for(var i=0;i<activexName.length;i++){ 19 try{ 20 xmlhttp=new ActiveXObject(activexName[i]); 21 break; 22 }catch(e){} 23 } 24 } 25 //无法创建对象 26 if(xmlhttp===undefined || xmlhttp===null){ 27 alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器"); 28 return; 29 } 30 31 //2.注册回调方法,监听是否成功 32 xmlhttp.onreadystatechange=callback; 33 34 //固定用法,获取文本框中用户输入的内容 35 var userName=document.getElementById("UserName").value; 36 37 //3.使用open方法设置和服务器端交互的基本信息 38 xmlhttp.open("POST","AJAX",true); 39 40 //POST方式交互所需要增加的代码,用于查询响应中的某个字段的值 41 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 42 43 //4.设置发送的数据,开始和服务器端交互 44 xmlhttp.send("name=" + userName); 45 } 46 47 function callback(){ 48 //5.判断和服务器端的交互是否完成,和服务器端是否返回了正确的数据 49 50 if(xmlhttp.readystate===4 && xmlhttp.status===200){ 51 52 //获得字符串形式的响应数据 53 var message=xmlhttp.responseText; 54 55 //获得xml形式的响应数据 56 //使用的前提是,服务器端需要设置content-type为text/xml 57 //var domXml=xmlhttp.responseXML; 58 59 //固定用法,向div标签中填充文本内容的方法 60 var div=document.getElementById("message"); 61 div.innerHTML=message; 62 } 63 } 64 </script> 65 </head> 66 <body> 67 <input type="text" id="UserName"/> 68 <input type="button" onclick="submit()" value="校验用户名"/> 69 <br/> 70 <div id="message"></div> 71 </body> 72 </html>
以上是关于XMLHttpRequest的五步使用方法的主要内容，如果未能解决你的问题，请参考以下文章
XMLHttpRequest的五种状态描述——常见的请求头和相应头都有什么——reflow(回流）repaint(重绘）引起变换的原因