AJAX详解

it2026-01-30  9

AJAX不是编程语言,而是一种使用现有标准的新方法。是与服务器交换数据在不重新加载页面并更新局部网页的技术。AJAX可以实现异步更新,当服务器的数据返回,用Javascript来更新DOM。 在传统的网站开发中不使用AJAX,则必须重新加载整个页面来更新。浪费了很大的带宽,增加了服务器的压力. 在实际开发中使用AJAX: xhr对象创建: var xhr=new XMLHttpRequest();在所有的现代浏览器上均支持XMLHttpRequest对象 var xhr=new ActiveXObject('"Microsoft.XMLHTTP"');只支持低版本IE5,IE6浏览器 xhr发送请求:在发送请求里AJAX提供了两个方法open(),send()两个方法。 xhr.open(method,url,async); method请求的类型:post或get。url:请求的地址. async是同步(false)还是异步(true) send请求发送:GET或POST GET: var xhr=new XMLHttpRequest(); xhr.open("GET","0.php?name=X&age=1",true); xhr.send(); POST: 例如: application/x-www-form-urlencoded: 在发送前窗体数据被编码为名称/值对。这是标准的编码格式。使用setRequestHeader(header,value) var xhr=new XMLHttpRequest(); xhr.open("POST","0.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("name='X'&age='1'"); 该参数的数据只支持post请求 xhr响应: responseText 返回字符串形式的响应数据。 responseXML 返回 XML 形式的响应数据。 xhr事件: onreadystatechange当readyState 属性改变时,就会触发该事件,该事件就会调callback函数 readyState有(0请求未初始化,1服务器连接已建立,2请求已接收,3请求处理中,4请求已完成,且响应已就绪)5个状态 status状态码:200为成功 404未找到 例如实际应用: xhr.onreadystatechange=function(){    if (xhr.readyState==4 && xhr.status==200){      alert(xhr.responseText);    } } XMLHttpRequest2.0是XHR的新版本,添加了一些新的属性和方法 onabort() 请求停止 ontimeout() 请求超时 onerrror() 请求报错 onloadend() 请求结束 onloadstart() 在接收到响应数据的第一个字节时触发 onprogress() 在接收响应期间持续不断地触 例如 <script> var xhr = new XMLHttpRequest(); btn.onclick = function(){    xhr.abort(); } xhr.onabort = function(){    console.log("请求已终止"); } xhr.ontimeout = function(){    console.log('请求超时'); } xhr.timeout = 3000; xhr.onerror = function(){    console.log("请求报错"); } xhr.onloadend = function(){    console.log("请求结束"); } </script>

转载于:https://www.cnblogs.com/yscode/p/8509298.html

相关资源:AJax详解.chm
最新回复(0)