Ajax-基础篇（持续更新01）
生活随笔
收集整理的這篇文章主要介紹了
Ajax-基础篇（持续更新01）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1：例子：下面的例子點(diǎn)擊按鈕會(huì)在不更新整個(gè)頁面的情況下動(dòng)態(tài)更新內(nèi)容 abcdefg
change abcdefg 代碼如下： <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){$("#bt1").click(function(){htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});$("#myDiv").html(htmlobj.responseText);}); }); </script> </head> <body> <div id="myDiv">abcdefg</div> <button id="bt1" type="button">change abcdefg</button> </body> </html>
2：通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對(duì)象來直接與服務(wù)器進(jìn)行通信。通過這個(gè)對(duì)象，您的 JavaScript 可在不重載頁面的情況與 Web 服務(wù)器交換數(shù)據(jù)。AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求），這樣就可使網(wǎng)頁從服務(wù)器請(qǐng)求少量的信息，而不是整個(gè)頁面。
3：應(yīng)用ajax的步驟： a：創(chuàng)建XMLHttpRequest對(duì)象：variable=new XMLHttpRequest(); 老版本的ie5和6使用的是ActiveXObject對(duì)象：variable=new ActiveXObject("Microsoft.XMLHTTP"); b：為了應(yīng)對(duì)所有的現(xiàn)代瀏覽器，必須驗(yàn)證。 var xmlhttp； if(window.XMLhttpRequest){ xmlhttp= new XMLhttpRequest();} else{?xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");?} c:如需要將請(qǐng)求發(fā)送到服務(wù)器，使用XMLhttpRequest對(duì)象的open()和send()方法 xmlhttp.open("get","test.txt",true); xmlhttp.send(); d：如需獲的來自服務(wù)器的響應(yīng)，需使用XMLHttpRequest對(duì)象的ResponseText（獲取字符串形式的響應(yīng)數(shù)據(jù)）和ResponseXML（獲取xml形式的響應(yīng)數(shù)據(jù)）屬性，如果來自服務(wù)器的數(shù)據(jù)不是xml，請(qǐng)使用第一個(gè)屬性responseText， 可以這樣使用：document.getElementById("id").innerHTML=responseText; 如果是xml，則需要解析，js的代碼如下： <script type="text/javascript"> function loadXMLDoc() { var xmlhttp;var txt,x,i;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){ xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("title");for (i=0;i<x.length;i++){txt=txt + x[i].childNodes[0].nodeValue + "<br />";}document.getElementById("myDiv").innerHTML=txt;}}xmlhttp.open("GET","/example/xmle/books.xml",true);xmlhttp.send();} </script>?
e：當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：| onreadystatechange | 存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。 |
| readyState | 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
|
| status | 200: "OK" 404: 未找到頁面 |
在 onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。
當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒：
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}?4：callback（回調(diào)） 函數(shù)是一種以參數(shù)形式傳遞給另一個(gè)函數(shù)的函數(shù)。
核心代碼：
<script>var xmlhttp;function loadXMLDoc(url,cfunc){if(window.XMLHttpRequest){ xmhhttp= new XMLHttpRequest();}else{ xmlhttp=new XMLHttpRequest("Microsoft.XMLHttp");}xmlhttp.onreadStatechange=cfunc;xmlhttp.open("GET",url,true);xmlhttp.send();}// 如果您的網(wǎng)站上存在多個(gè) AJAX 任務(wù)，那么您應(yīng)該為創(chuàng)建 XMLHttpRequest 對(duì)象編寫一個(gè)標(biāo)準(zhǔn)的函數(shù)，并為每個(gè) AJAX 任務(wù)調(diào)用該函數(shù)。// 該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生 onreadystatechange 事件時(shí)執(zhí)行的任務(wù)（每次調(diào)用可能不盡相同）：
function Myfunction(){loadXMLDoc("/ajax/test1.txt",function(){if(xmlhttp.readState=="4" && xmlhttp.state=="200"){document.getElementById("id").innerHTML=xmlhttp.responseText;}});} </script> 調(diào)用時(shí)，按鈕調(diào)用Myfunction
?
轉(zhuǎn)載于:https://www.cnblogs.com/m-xy/archive/2013/03/03/2942052.html
總結(jié)
以上是生活随笔為你收集整理的Ajax-基础篇（持续更新01）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （jquery插件）打造百分比动态色彩条
- 下一篇： 日语简历在线做成下载的网站（收藏）不同职