梳理ajax
不讨论IE 什么是ajax:ajax是异步到javascript和XML。简单点说,就是使用?XMLHttpRequest 对象与服务器通信。主要使用其两个特性做以下事: 1.在不重载页面到情况下发送请求, 2.接受并使用从服务器发来到数据。 ? 一、怎样发送http请求: 1.先要创建一个XMLHttpRequest实例: var httpRequest=new XMLHttpRequest(); 2.请求发送后,会收到响应,这时要告诉XMLHttp请求对象是由哪一个函数进行处理,在设置了对象的 onreadystatechange 属性后给它命名,即当请求状态改变时调用 httpRequest.onreadystatechange=func; // 或使用匿名函数 httpRequest.onreadystatechange=function(){/* something */}; 3.声明接到响应后要做的事,需要发送一个实际的请求,调用http的open()和send()方法 httpRequest.open(‘GET‘,‘test.txt‘,true); httpRequest.send(); /* *open() 的第一个参数是请求方法,有GET,POST,HEAD和其他服务器支持的方法; *第二个参数是URL ; *第三个参数是可选,设置请求是否是异步,默认为true */ ? 二、处理服务器响应 1.在发送请求时,你提供的函数负责处理响应 httpRequest.onreadystatechange = func; 首先要检查请求的状态,如果状态是 XMLHttpRequest.DONE (对应数字4),意味着服务器响应收到了并且是没问题的,然后就可以继续执行。 if (httpRequest.readyState === XMLHttpRequest.DONE) { // Everything is good,the response was received. } else { // Not ready yet. } 全部readyState状态值都在?XMLHTTPRequest.readyState,如下也是:
? 三、responseType 属性 XMLHttpRequest.responseType?属性是一个枚举类型的属性,返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串,它将使用默认的"text"类型。
四、监测进度 var req = new XMLHttpRequest(); req.addEventListener("progress",updateProgress,false); // 进度 req.addEventListener("load",transferComplete,false); // 完成 req.addEventListener("error",transferFailed,false); // 出错 req.addEventListener("abort",transferCanceled,false); // 取消 req.open(); 注意:需要在open()之前监听。 上传相关监测事件: var req = new XMLHttpRequest(); req.upload.addEventListener("progress",updateProgress); req.upload.addEventListener("load",transferComplete); req.upload.addEventListener("error",transferFailed); req.upload.addEventListener("abort",transferCanceled); req.open(); 注意:progress 事件在使用? 使用? req.addEventListener("loadend",loadEnd,false); function loadEnd(evt) { alert("The transfer finished (although we don‘t know if it succeeded or not)."); } ? 五、绕过缓存 一般地,如果缓存中有相应内容,? 方法:给url添加时间戳 http://foo.com/bar.html?12345 http://foo.com/bar.html?foobar=baz&12345 var req = new XMLHttpRequest(); req.open("GET",url += ((/?/).test(url) ? "&" : "?") + (new Date()).getTime(),false); req.send(null); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |