AJAX--XMLHttpRequest 深藏阁楼爱情的钟 2021-09-27 05:34 385阅读 0赞 # 前言 # XMLHttpRequest为可扩展超文本传输请求，它是XML（可扩展标记语言），Http（超文本传输协议），Request（请求）三者结合起来的；XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 # 内容 # ## 使用方法： ## 1. 建立XMLHttpRequest对象 2. 注册回调函数 3. 使用open方法设置和服务器端交互的基本信息 4. 设置发送的数据，开始和服务器端交互 5. 在回调函数中判断交互是否结束，相应是否正确，并根据需要获取服务器端返回的数据，更新页面内容 ## 属性和方法： ## <table> <thead> <tr> <th>方法</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>open（String method,String url,boolean asynch,String username,String password）</code></td> <td>①指定和服务器端交互的HTTP方法，URL地址及其他请求信息②其中method表示HTTP请求方法，之处所有HTTO的方法，一般使用“GET”，“POST”url表示请求的服务器的地址③asynch表示是否采用异步方式，true表示异步，false表示同步④后两个参数可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码</td> </tr> <tr> <td><code>send(content)</code></td> <td>①向服务器发送请求，如果采用异步方式，该方法会立即返回②Content可以不指定或指定为null表示，不发送数据③其中内容可以是DOM对象，输入流或是字符串</td> </tr> <tr> <td>setRequestHeader（String headerString value）</td> <td>①设置HTTP请求中的指定头部header的值为value②此方法需要在open方法以后调用</td> </tr> <tr> <td>getAllResponse Headers()</td> <td>①返回包含HTTP的所有响应头信息，其中响应头包括Content-Length，Date，URI等内容②返回值是一个字符串，包含所有分头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔</td> </tr> <tr> <td>getResponseHeader(String header)</td> <td>①返回HTTP响应头中指定的键名header对应的值</td> </tr> <tr> <td>abort()</td> <td>①停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化的状态</td> </tr> <tr> <td><code>readyState</code></td> <td>①表示XMLHttpRequest对象的状态：0=未初始化。对象已创建，为调用open，1=open方法成功调用以后，send方法未调用，2=send方法已经调用，尚未开始接收数据，3=正在接收数据，http响应头信息已经接受，相应数据尚未接受完成，4=完成，相应数据接受完成</td> </tr> <tr> <td><code>onreadystate change</code></td> <td>请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）</td> </tr> <tr> <td><code>responseText</code></td> <td>服务器相应的文本内容</td> </tr> <tr> <td><code>responseXML</code></td> <td>服务器相应的XML内容对应的DOM对象</td> </tr> <tr> <td><code>status</code></td> <td>服务器返回的http状态码：200表示”成功”，404表示”未找到”，500表示”服务器内部错误”</td> </tr> <tr> <td>statusText</td> <td>服务器返回状态码的文本信息</td> </tr> </tbody> </table> ## 举例 ## <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript"> function submit() { //alert("text"); //1.创建XMLHttpRequest对象 if (window.XMLHttpRequest) { //IE7./IE8./Fire Fox/Mozillar/Safaro/Opera //alert("IE7,IE8,FireFox,Mozillar,Safaro,Opera"); xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } }else if (window.ActiveXObject) { //IE6/IE5.5/IE5 //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 == undefind ||xmlhttp == null) { alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器") return; } //alert(xmlhttp); //2.注册回调方法 xmlhttp.onreadystatechange = callback; //错误的写法：xmlhttp.onreadystatechange = callback(); //固定用法：获取文本框中用户输入的内容 var userName = document.getElementById("userName").value; //GET方法交互 //3.设置和服务器端交互的相应参数 //xmlhttp.open("GET","AJAX?name = " + userName,true ) //4.设置向服务器端发送的数据，启动和服务器端的交互 //xmlhttp.send(null); //POST方法交互 //3.设置和服务器端交互的相应参数 xmlhttp.open("POST","AJAX",true ) //POST方式交互所需要增加的代码 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.设置向服务器端发送的数据，启动和服务器端的交互 xmlhttp.send("name="+userName); } function callback(){ //5.判断和服务器端的交互式否完成，还要判断服务器端是否正确返回了数据 if (xmlhttp.readyState == 4) { //表示和服务器端的交互已经完成 if (xmlhttp.status == 200) { //表示服务器的相应代码是200，正确返回了数据 //纯文本数据的接受方法 var message = xmlhttp.responseText; //XML数据对应的DOM对象的接受方法 //使用的前提是，服务器端需要设置content-type为text/xml //vardomXml = xmlhttp.responseXML //记忆向div标签中填充文本内容的方法 var div = document.getElementById("message"); div.innerHTML = message; } } } </script> </head> <body> <input type="text" id="UserName"/> <input type="button" onclick="submit()" value="校验用户名"/> <br/> <div id ="message"></div> </body> </html> # 总结 # 1. 不同的浏览器中XMLHttpRequest对象建立的方式不同，IE7、IE8、FireFox、Mozilla、Safari、Opera中直接new XMLHttpRequest,IE6、IE5.5、IE5则需要通过某一个正确的ActiveXObject控件的名称通过newActiveXObject（控件名）的方式 2. 设置回调函数时，不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性。实际上每次readyState的值发生变化的时候，回调函数都会被调用，但是一般我们之关心状态4.如果之关心正确的相应数据，只要在执行send方法之前设置回调函数即可。但是仍然建议在XMLHttpRequest对象创建后就先设置回调函数，这样回调函数还可以处理其他的状态。 3. open方法最多可以由五个参数，其中头三个参数是必须的；使用GET方法时，请求数据位于url链接中，后面的send方法的参数直接写null就可以使用POST方式时，open方法后面需要先调用setRequestHeader方法来设置Content-Type的值，然后调用send方法，send的参数就是请求的数据 4. 回调函数中，最好将判断readyState和status的两个if条件，分开来写。ReadyState的判断条件位于外层，status的位于内层，加入他们被放到了同一个if条件中，判断数据正常返回也是没有问题的。但是不便于分别处理服务器端不是200响应的情况和readyState不是4的情况 5. 当服务器端没有正确返回XML数据时，在JavaScript中使用ResponseXML的方式获取返回的XML数据对应的DOM对象时，FireFox和IE的结果是有差别的。IE获取根元素节点为null，而FireFox获取根元素节点则是一个表示解析错误的元素节点。 # end # 谢谢您的阅读！
还没有评论，来说两句吧...