来源:未知 时间:2016-09-18 10:35 作者:xxadmin 阅读:次
[导读] XMLHttpRequest 让发送一个HTTP请求变得非常容易。你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求。当传输完毕后,结果的HTTP状态以及返回的响应内容也可以从请...
XMLHttpRequest 让发送一个HTTP请求变得非常容易。你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求。当传输完毕后,结果的HTTP状态以及返回的响应内容也可以从请求对象中获取。 通过XMLHttpRequest生成的请求可以有两种方式来获取数据,异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false,则该XMLHttpRequest请求以同步模式进行,否则该过程将以异步模式完成。 两种通信模式:同步和异步请求: 同步请求 1.在Worker中使用XMLHttpRequest时,同步请求比异步请求更适合。 <script type="text/javascript"> var oMyWorker = new Worker("myTask.js"); oMyWorker.onmessage = function(oEvent) { alert("Worker said: " + oEvent.data); }; oMyWorker.postMessage("Hello"); </script> myFile.txt ( XMLHttpRequest对象同步请求的文件): Hello World!! 包含了Worker代码:myTask.js self.onmessage = function (oEvent) { if (oEvent.data === "Hello") { var oReq = new XMLHttpRequest(); oReq.open("GET", "myFile.txt", false); // 同步请求 oReq.send(null); self.postMessage(oReq.responseText); } }; 注意: 由于使用了Worker,所以该请求实际上也是异步的. 2.不得不使用同步请求的情况 window.onbeforeunload = function () { var oReq = new XMLHttpRequest(); oReq.open("GET", "logout.php?nick=" + escape(myName), false); // 同步请求 oReq.send(null); if (oReq.responseText.trim() !== "已退出"); { // "已退出"是返回的数据 return "退出失败,您想手动执行退出吗?"; } }; 异步请求 3.例子: 创建一个标准的方法来读取外部文件 function loadFile (sURL, timeout, fCallback /*, 传入参数1, 传入参数2, 等 */) { var aPassArgs = Array.prototype.slice.call(arguments, 3), oReq = new XMLHttpRequest(); oReq.ontimeout = function() { console.log("请求超时."); } oReq.onreadystatechange = function() { if (oReq.readyState === 4) { if (oReq.status === 200) { fCallback.apply(oReq, aPassArgs); } else { console.log("Error", oReq.statusText); } } }; oReq.open("GET", sURL, true); oReq.timeout = timeout; oReq.send(null); } loadFile函数的用法: function showMessage (sMsg) { alert(sMsg + this.responseText); } loadFile("message.txt", 200, showMessage, "New message!\\n"); 第1行定义一个函数,当文件读取完毕后,fCallback函数会以第3个参数以后的所有参数为自己的参数来被调用. 4.例子: 使用异步请求,不使用闭包. function switchXHRState() { switch (this.readyState) { case 0: console.log("还没调用open()方法."); break; case 1: console.log("还没调用send()方法."); break; case 2: console.log("已经调用send()方法,响应头和响应状态已经返回."); break; case 3: console.log("下载中,已经得到部分响应实体."); break; case 4: console.log("请求完成!"); this.callback.apply(this, this.arguments); } }; function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) { var oReq = new XMLHttpRequest(); oReq.callback = fCallback; oReq.arguments = Array.prototype.slice.call(arguments, 2); oReq.onreadystatechange = switchXHRState; oReq.open("GET", sURL, true); oReq.send(null); } 使用 bind: function switchXHRState(fCallback, aArguments) { switch (this.readyState) { case 0: console.log("还没调用open()方法."); break; case 1: console.log("还没调用send()方法."); break; case 2: console.log("已经调用send()方法,响应头和响应状态已经返回."); break; case 3: console.log("下载中,已经得到部分响应实体."); break; case 4: console.log("请求完成!"); fCallback.apply(this, aArguments); } }; function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) { var oReq = new XMLHttpRequest(); oReq.onreadystatechange = switchXHRState.bind(oReq, fCallback, Array.prototype.slice.call(arguments, 2)); oReq.open("GET", sURL, true); oReq.send(null); } |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com