Ajax-基础篇（持续更新01）
生活随笔
收集整理的這篇文章主要介紹了
Ajax-基础篇（持续更新01）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1：例子：下面的例子點擊按鈕會在不更新整個頁面的情況下動態更新內容 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 對象來直接與服務器進行通信。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換數據。AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。
3：應用ajax的步驟： a：創建XMLHttpRequest對象：variable=new XMLHttpRequest(); 老版本的ie5和6使用的是ActiveXObject對象：variable=new ActiveXObject("Microsoft.XMLHTTP"); b：為了應對所有的現代瀏覽器，必須驗證。 var xmlhttp； if(window.XMLhttpRequest){ xmlhttp= new XMLhttpRequest();} else{?xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");?} c:如需要將請求發送到服務器，使用XMLhttpRequest對象的open()和send()方法 xmlhttp.open("get","test.txt",true); xmlhttp.send(); d：如需獲的來自服務器的響應，需使用XMLHttpRequest對象的ResponseText（獲取字符串形式的響應數據）和ResponseXML（獲取xml形式的響應數據）屬性，如果來自服務器的數據不是xml，請使用第一個屬性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：當請求被發送到服務器時，我們需要執行一些基于響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性：| onreadystatechange | 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。 |
| readyState | 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
|
| status | 200: "OK" 404: 未找到頁面 |
在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。
當 readyState 等于 4 且狀態為 200 時，表示響應已就緒：
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}?4：callback（回調） 函數是一種以參數形式傳遞給另一個函數的函數。
核心代碼：
<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();}// 如果您的網站上存在多個 AJAX 任務，那么您應該為創建 XMLHttpRequest 對象編寫一個標準的函數，并為每個 AJAX 任務調用該函數。// 該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：
function Myfunction(){loadXMLDoc("/ajax/test1.txt",function(){if(xmlhttp.readState=="4" && xmlhttp.state=="200"){document.getElementById("id").innerHTML=xmlhttp.responseText;}});} </script> 調用時，按鈕調用Myfunction
?
轉載于:https://www.cnblogs.com/m-xy/archive/2013/03/03/2942052.html
總結
以上是生活随笔為你收集整理的Ajax-基础篇（持续更新01）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （jquery插件）打造百分比动态色彩条
- 下一篇： 日语简历在线做成下载的网站（收藏）不同职