一、Ajax簡(jiǎn)介
Ajax 即“Asynchronous Javascript And XML”(異步 JavaScript 和 XML),是指?種創(chuàng)建交互式??應(yīng)?的??開(kāi)發(fā)技術(shù)。
Ajax 是?種?于創(chuàng)建快速動(dòng)態(tài)??的技術(shù)。
Ajax 是?種在?需重新加載整個(gè)??的情況下,能夠更新部分??的技術(shù)。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)?少量數(shù)據(jù)交換,Ajax 可以使??實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)??的情況下,對(duì)??的某部分進(jìn)?更新。
傳統(tǒng)的??(不使? Ajax)如果需要更新內(nèi)容,必須重載整個(gè)????。
二、同步與異步
- 1、同步:發(fā)送?個(gè)請(qǐng)求,需要等待響應(yīng)返回,然后才能夠發(fā)送下?個(gè)請(qǐng)求,如果該請(qǐng)求沒(méi)有響應(yīng),不能發(fā)送下?個(gè)請(qǐng)求,客戶(hù)端會(huì)處于?直等待過(guò)程中。
- 2、異步:發(fā)送?個(gè)請(qǐng)求,不需要等待響應(yīng)返回,隨時(shí)可以再發(fā)送下?個(gè)請(qǐng)求,即不需要等待。
三、應(yīng)用場(chǎng)景
1、在線視頻、直播平臺(tái)等…評(píng)論實(shí)時(shí)更新、點(diǎn)贊、?禮物、…
2、會(huì)員注冊(cè)時(shí)的信息驗(yàn)證,?機(jī)號(hào)、賬號(hào)唯?
3、百度關(guān)鍵搜索補(bǔ)全功能
四、原生js的實(shí)現(xiàn)
實(shí)現(xiàn)步驟:
1、定義?個(gè)XMLHttpRequest核?對(duì)象xhr;
2、通過(guò)xhr.open?法給當(dāng)前對(duì)象提供訪問(wèn)?式、URL等。
3、發(fā)送當(dāng)前的請(qǐng)求?指定的URL
4、接收返回值并處理
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function testJsAjax(){
//1. 創(chuàng)建核?對(duì)象
var xmlhttp = new XMLHttpRequest();
//2.通過(guò)核?對(duì)象?法給當(dāng)前的對(duì)象提供訪問(wèn)?式和URL路徑
xmlhttp.open("GET","jsAjax?name=liuyan",true);
//3.發(fā)送當(dāng)前的請(qǐng)求?指定的URL
xmlhttp.send();
//4.接收返回值并處理
xmlhttp.onreadystatechange=function(){
//xmlhttp.readyState==4代表XMLHttpRequest對(duì)象讀取服務(wù)器的響應(yīng)結(jié)束
//xmlhttp.status==200響應(yīng)成功
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var msg = xmlhttp.responseText;
document.getElementById("msg").innerHTML=msg;
}
}
}
</script>
</head>
<body>
<div id="msg"></div>
<input type="button" name="btn" value="JS原??式實(shí)現(xiàn)異步" οnclick="testJsAjax()">
</body>
</html>