2. IT
    3. Ajax之XMLHttpRequest

    Ajax之XMLHttpRequest

    xiaoxiao2021-03-26  23
    function createXHR(){ if(typeof XMLHttpRequest !="undefined"){ return new XMLHttpRequest; } //兼容IE7及之前的版本,如果不考虑兼容，可不写 else if(typeof ActiveXObject !="undefined"){ if(typeof arguments.callee.ActiveXObject !="undefined"){ var versions =["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"]; var i,len; for(i=0;i<versions.length;i++){ try{ new ActiveXObject(versions[i]); arguments.callee.activeXstring=versions[i]; }catch(e){ //TODO handle the exception } } } return new ActiveXObject(arguments.callee.activeXstring); }//else if else{ throw new Error("no XHR object available"); } } var xhr =createXHR(); //要调用的第一个方法 open(请求类型，请求地址，是否异步) xhr.open('get','text.txt',false); xhr.send();//请求主体发送的数据 /* 1.当请求为同步时，JavaScript代码会等到服务器响应后才继续执行 在接收到响应后，响应的数据会自动填充 XHR对象的属性相关属性如下 xhr.responseText:作为响应主体被返回的文本 xhr.responseXML: 如果响应的内容类型是 text/xml application/xml, 将返回 XML DOM文档 xhr.status:响应的HTTP状态 xhr.statusText:HTTP状态说明 2.在接收到响应后，第一步是检查status属性，状 态码为200则表示成功 此时，responseText内容已经可以访问了 304 表示请求的资源没有被修改，可直接使用浏览器中缓存的版本 因此，为确保接收到适当的响应，应该检查状态码 */ if((xhr.status>=200&&xhr.status<300||xhr.status ==304)){ console.log(xhr.responseText); } else{ console.log("error"+xhr.status) }

    open(method,url,async)；

    规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

    send(string) 将请求发送到服务器。 string：仅用于 POST 请求

    GET请求

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv"></div> </body> <script> var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { console.log(xmlhttp); document.getElementById("myDiv").innerHTML=xmlhttp.response; /* 如果您希望通过 GET 方法发送信息，请向 URL 添加信息： 防止缓存可加上一个随机数之类的 xmlhttp.open("GET","server.txt?t="+Math.random(),true); */ } } xmlhttp.open("GET","server.txt",true); xmlhttp.send(); </script> </html>

    POST请求

    setRequestHeader(header,value)

    向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

    var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } //GET改为POST就行了 xmlhttp.open("POST","/ajax/demo_post.asp",true); /* 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据： xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates"); */ xmlhttp.send();

    服务器响应

    responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 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;

    onreadystatechange 事件

    onreadystatechange

    存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status 200: “OK” 404: 未找到页面

    xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

    使用 Callback 函数 优点就是可将获得数据传到AJax函数外面，使其他函数也可以调用数据

    var xmlhttp; function loadXMLDoc(url,cfunc)//cfunc就是---calback函数 { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/ajax/test1.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
    转载请注明原文地址: https://ju.6miu.com/read-569211.html

    技术

    最新回复(0)