Ajax_阿賈克斯

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>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拗慨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子奉芦,更是在濱河造成了極大的恐慌赵抢,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件声功,死亡現(xiàn)場離奇詭異烦却,居然都是意外死亡,警方通過查閱死者的電腦和手機先巴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門其爵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人伸蚯,你說我怎么就攤上這事摩渺。” “怎么了剂邮?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵摇幻,是天一觀的道長。 經(jīng)常有香客問我挥萌,道長绰姻,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任引瀑,我火速辦了婚禮狂芋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘憨栽。我一直安慰自己帜矾,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布徒像。 她就那樣靜靜地躺著黍特,像睡著了一般。 火紅的嫁衣襯著肌膚如雪锯蛀。 梳的紋絲不亂的頭發(fā)上灭衷,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音旁涤,去河邊找鬼翔曲。 笑死迫像,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的瞳遍。 我是一名探鬼主播闻妓,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼掠械!你這毒婦竟也來了由缆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤猾蒂,失蹤者是張志新(化名)和其女友劉穎均唉,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肚菠,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡舔箭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蚊逢。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片层扶。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖烙荷,靈堂內(nèi)的尸體忽然破棺而出镜会,到底是詐尸還是另有隱情,我是刑警寧澤奢讨,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布稚叹,位于F島的核電站,受9級特大地震影響拿诸,放射性物質(zhì)發(fā)生泄漏扒袖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一亩码、第九天 我趴在偏房一處隱蔽的房頂上張望季率。 院中可真熱鬧,春花似錦描沟、人聲如沸飒泻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽北启。三九已至康吵,卻和暖如春批旺,著一層夾襖步出監(jiān)牢的瞬間菌仁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留聊倔,地道東北人晦毙。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像耙蔑,于是被迫代替她去往敵國和親见妒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容

  • <a name='html'>HTML</a> Doctype作用甸陌?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)须揣、<...
    clark124閱讀 3,460評論 1 19
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,309評論 24 450
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,636評論 18 503
  • 再讀《富爸爸窮爸爸》,感受頗深邀层,很多觀點似曾相識卻記憶不深返敬,為了加深記憶遂庄,理清思路寥院,將書的主要內(nèi)容做成導(dǎo)圖,如下:
    月風(fēng)er閱讀 175評論 3 1
  • 很高心能在今天晚上和大家見面涛目,大家此行的目的都是想跟老師了解一下孩子在學(xué)校的表現(xiàn)秸谢。那么今天就借這個機會在這里和大家...
    晞之閱讀 391評論 11 3