淺談ajax技術
ajax實現了在不重新整理整個介面的情況下去更新介面部分內容；
下面我就用自己所學知識的看法介紹一下ajax
早期頁面載入一一部分的介面需要重新載入一遍瀏覽器，從新構建一遍dom tree；
ajax原理：http非同步通訊協議；
ajax並非一種新的技術，而是幾種原有技術的結合體。它由下列技術組合而成。
判斷瀏覽器建立ajax物件；
var ajax;
if (window.XMLHttpRequest)
//window.XMLHttpRequest在 IE7+, Firefox, Chrome, Opera, Safari下非undefind code for IE6, IE5下undefind
{// code for IE7+, Firefox, Chrome, Opera, Safari
ajax=new XMLHttpRequest();
}
else
{// code for IE6, IE5
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
ajax獲取接收伺服器返回值兩種格式；
reponseText（獲得資料串的響應資料）
reponseXML（獲得XML形式的相應資料）
//js方式建立容器接收後臺傳輸內容
document.getElementById("id").innerHTML=ajax.responseText;
document.getElementById("id").innerHTML=ajax.reponseXML;
狀態值：（什麼是狀態值:狀態值即ajax請求中的一個過程，每個過程都會對應每個過程的狀態值，用ajax.readystate判斷）
0—ajax非同步物件建立完畢，但是還未傳送
1—ajax已經呼叫了open()方法，但是還未呼叫send()方法
2—已經呼叫send(),但是還未到達伺服器端
3—表示請求已經到達服務端，正在服務端的處理，但是還未響應返回
4—ajax已經完全接收了伺服器的響應資訊，但是 狀態碼 未必是正確的
狀態碼有：（什麼是狀態碼:無論ajax請求資料庫是否成功，伺服器返回http協議頭資訊程式碼 用ajax.starts判斷）
200：交易成功
404/500：錯誤請求/伺服器內部產生錯誤
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//內容
}
//onreadystatechange儲存函式 每當readystart改變就會呼叫這個函式
//ajax.onreadystatechange狀態監聽函式 ajax.onreadystatechange=function() //內容 }
ajax的兩種請求：
post、get；
與post相比，get請求更快更簡單；
但在以下情況建議用post；
1.無法使用快取檔案；
2.向伺服器傳送大量資料
3.傳送包含未知字元的使用者輸入時post比get更穩更可靠；
//aiax.open(method,url,async);
//method：請求的型別；GET 或 POST
//url：想要查詢檔案的地址
//async：true（非同步）或 false（同步）
//get請求
ajax.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true);
ajax.send();
//post請求樣式
ajax.open("POST","/ajax/demo_post.asp",true);
send(string)
總結；1判斷開啟的瀏覽器是什麼版本–>2 讀取瀏覽器狀態，狀態改變執行函式–>3建立ajax的方式函式–>4再選擇請求方式；
<div class="main" id="main">
</div>
<button type="button" onclick="zz()">請求資料</button>
<script type="text/javascript">
function zz() {
var ajax;
var i;
var win = window.XMLHttpRequest;
//1判斷開啟的瀏覽器是什麼版本
if(win) {
alert(2)
ajax = new XMLHttpRequest();
} else {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
};
//2 讀取瀏覽器狀態，狀態改變執行函式
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
//3建立ajax接收後臺的傳值的方式函式
document.getElementById("main").innerHTML = ajax.responseText;
}
}
//4再選擇請求方式；
ajax.open("GET", "test.txt", true);
ajax.send();
}
</script>
對於剛剛瞭解ajax的我，上面即近期所見所得；
你有什麼更好更有趣的ajax知識可以跟我一起探討探討；
以上總結，如有言誤，請指正。
轉載時請註明出處及相應連結，本文永久地址：https://blog.yayuanzi.com/25261.html
微信打賞
支付寶打賞
感謝您對作者Miya的打賞，我們會更加努力！ 如果您想成為作者，請點我