JavaScript--AJAX 谁借莪１个温暖的怀抱￠ 2024-05-09 09:01 75阅读 0赞 ## AJAV异步–海螺心得 ## -------------------- #### 文章目录 #### * AJAV异步--海螺心得 * 一、responseText * 二、responseXML * 三、document.getElementById().innerHTML * 四、setRequestHeader * 五、xmlhttp.readyState的值及解释： * 六、xmlhttp.status的值及解释： -------------------- ## 一、responseText ## responseText 获得字符串形式的响应数据。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; //window.XMLHttpRequest //为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。 //如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 xmlhttp.onreadystatechange=function() //onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。 { //readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 //0: 请求未初始化 //1: 服务器连接已建立 //2: 请求已接收 //3: 请求处理中 //4: 请求已完成，且响应已就绪 //status,200: "OK";404: 未找到页面 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容; //可以通过 document.getElementById(‘zlx’).innerHTML 来获取id为zlx的对象的内嵌内容; //可以通过document.getElementById(‘zlx’).innerHTML=‘小熊吃西瓜’; 向id为zlx的对象插入小熊吃西瓜。 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } //open(method,url,async). //method：请求的类型,GET 或 POST;url：文件在服务器上的位置;async：true（异步）或 false（同步） xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); //将请求发送到服务器;string：仅用于 POST 请求 xmlhttp.send(); } </script> </head> <body> //div 部分用于显示来自服务器的信息。当按钮被点击时(onclick)，它负责调用名为 loadXMLDoc() 的函数 <div id="zlx"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html> ## 二、responseXML ## responseXML 获得 XML 形式的响应数据。 复制代码 代码如下: //使用responseXML的方式来接受XML数据对象的DOM对象 var domObj = xmlhttp.responseXML; var messageNodes = domObj.getElementsByTagName("message"); //获取message节点中的文本内容 //message标签中的文本是在dom中是message标签所对应的元素节点的子节点,firstChild可以获取当前节点的第一个子节点 if (messageNodes.length > 0) { var textNode = messageNodes[0].firstChild; //对于文本节点来说，可以通过nodeValue的方式返回文本 var responseMessage = textNode.nodeValue; //把值responseMessage显示在div上 var divNode=document.getElementById("result"); divNode.innerHTML=responseMessage; } else { alert("XML数据格式错误，原始文本内容为：" + xmlhttp.responseText); } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; var txt,x,i; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt; } } xmlhttp.open("GET","cd_catalog.xml",true); xmlhttp.send(); } </script> </head> <body> <h2>我收藏的 CD :</h2> <div id="myDiv"></div> <button type="button" onclick="loadXMLDoc()">获取我的 CD</button> </body> </html> ## 三、document.getElementById().innerHTML ## innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容; <div id="zlx"><h2>使用 AJAX 修改该文本内容</h2></div> 可以通过 document.getElementById(‘zlx’).innerHTML 来获取id为zlx的对象的内嵌内容; 可以通过document.getElementById(‘zlx’).innerHTML=‘小熊吃西瓜’; 向id为zlx的对象插入小熊吃西瓜。 ## 四、setRequestHeader ## 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。 setRequestHeader(header,value)。 向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST","/try/ajax/demo_post2.php",true); //setRequestHeader(header,value) //向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); } </script> </head> <body> <h2>AJAX</h2> <button type="button" onclick="loadXMLDoc()">请求数据</button> <div id="myDiv"></div> </body> </html> ![在这里插入图片描述][feeb0626940a4d02a86b90becca09caf.png] ![在这里插入图片描述][22a2ae9718244f86b0531edd1f3b461c.png] ## 五、xmlhttp.readyState的值及解释： ## 0：请求未初始化（还没有调用 open()）。 1：请求已经建立，但是还没有发送（还没有调用 send()）。 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 4：响应已完成；您可以获取并使用服务器的响应了。 ## 六、xmlhttp.status的值及解释： ## 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 200——交易成功 201——提示知道新文件的URL 202——接受和处理、但处理未完成 203——返回信息不确定或不完整 204——请求收到，但返回信息为空 205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件 206——服务器已经完成了部分用户的GET请求 300——请求的资源可在多处得到 301——删除请求数据 302——在其他地址发现了请求数据 303——建议客户访问其他URL或访问方式 304——客户端已经执行了GET，但文件未变化 305——请求的资源必须从服务器指定的地址得到 306——前一版本HTTP中使用的代码，现行版本中不再使用 307——申明请求的资源临时性删除 400——错误请求，如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405——用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖，请求资源不可访问 407——类似401，用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的饿时间内完成请求 409——对当前资源状态，请求不能完成 410——服务器上不再有此资源且无进一步的参考地址 411——服务器拒绝用户定义的Content-Length属性请求 412——一个或多个请求头字段在当前请求中错误 413——请求的资源大于服务器允许的大小 414——请求的资源URL长于服务器允许的长度 415——请求资源不支持请求项目格式 416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求 合起来 500——服务器产生内部错误 501——服务器不支持请求的函数 502——服务器暂时不可用，有时是为了防止发生系统过载 503——服务器过载或暂停维修 504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 505——服务器不支持或拒绝支请求头中指定的HTTP版本 1xx:信息响应类，表示接收到请求并且继续处理 2xx:处理成功响应类，表示动作被成功接收、理解和接受 3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 4xx:客户端错误，客户请求包含语法错误或者是不能正确执行 5xx:服务端错误，服务器不能正确执行一个正确的请求 **xmlhttp.readyState==4 && xmlhttp.status ==200的解释：请求完成并且成功返回** [feeb0626940a4d02a86b90becca09caf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/fbe52bc0fc1f4b54aec577516e2c6f8a.png [22a2ae9718244f86b0531edd1f3b461c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/3dd2940a868e426f85594b33c46d6f0b.png
还没有评论，来说两句吧...