Ajax全稱Asynchronous Javascript And XML(異步JavaScript和XML)?
使用ajax可以實現(xiàn)把夸,在不刷新頁面的情況下怀跛,也能向服務(wù)器發(fā)起請求并獲取數(shù)據(jù)
常見的ajax應(yīng)用:內(nèi)容滾動到底后自動加載新內(nèi)容滔驾、輸入用戶名后自動去服務(wù)器驗證是否被占用玷犹、無刷新的分頁……
優(yōu)點: 用戶體驗更好瀑梗,頁面不需要提交或者是刷新业汰,內(nèi)容自動更新 減少網(wǎng)絡(luò)數(shù)據(jù)流量,由于頁面布局樣式不同重新加載饿这,ajax只需要從服務(wù)器上獲取少量的數(shù)據(jù)即可浊伙,速度更快 缺點: 頁面不跳轉(zhuǎn)撞秋,導(dǎo)致用戶無法點擊后退訪問之前的內(nèi)容 ajax需要執(zhí)行JavaScript才能加載,導(dǎo)致搜索引擎失效 濫用ajax會導(dǎo)致頁面過于臃腫吧黄,明明幾個頁面跳轉(zhuǎn)就能實現(xiàn)的效果部服,結(jié)果全部都堆到一個頁面中
JavaScript原生方法實現(xiàn)ajax?
思路:初始化XmlHttpRequest對象--發(fā)起請求-監(jiān)控響應(yīng)狀態(tài)—獲取返回值輸出-
html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>title>
head>
<body>
<divid='div'>div>
<script>
varphpurl="/jQuery/aa.php";
ajax(phpurl);
functionajax(phpurl){
varrequest;
if(window.ActiveXObject) {// IE瀏覽器
request=newActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest) {// 除IE以外的其他瀏覽器
request=newXMLHttpRequest();
}
request.open("GET", phpurl ,true);//發(fā)送請求參數(shù)
request.onreadystatechange=callBack;//捕獲請求的狀態(tài)
request.send();//發(fā)送
//console.log(request);
functioncallBack() {//檢查請求參數(shù)
if(request.readyState==4) {//4表示請求已完成唆姐,且響應(yīng)已就緒
if(request.status==200) {//返回頁面狀態(tài)嗎
// 獲取數(shù)據(jù)
document.getElementById('div').innerHTML=request.responseText;//把DIV的內(nèi)容換成返回值
}else{
alert('請求失敗');
}
}
}
}
JavaScript jQuery方法實現(xiàn)ajax
<divid='div'>div>
<inputtype="submit"onclick="ajax(phpurl1)"value="點我抽取新英雄">
<inputtype="submit"onclick="ajax(phpurl2)"value="點我抽取隱藏英雄">
<script>
varphpurl1="/jQuery/aa.php";
varphpurl2="/jQuery/bb.php";
functionajax(phpurl) {
$.ajax({
type:"GET",
url: phpurl,
success:function(html) {
$('#div').html(html);
}
})
}
script>