AJAX

1.前言

AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。

AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下,可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容刃泌。

2.原理

同步:一個(gè)任務(wù)一個(gè)任務(wù)連續(xù)著干,假如一個(gè)頁(yè)面需求請(qǐng)求很多資源(假設(shè)先請(qǐng)求所有用戶信息揍障,再請(qǐng)求所有文章)敢靡,那么就一個(gè)請(qǐng)求一個(gè)請(qǐng)求地去響應(yīng)脾拆,假設(shè)某一個(gè)請(qǐng)求需要耗費(fèi)很長(zhǎng)時(shí)間品腹,那么整個(gè)頁(yè)面就卡在哪里等著這一個(gè)任務(wù)地執(zhí)行了岖食。同步不要單獨(dú)考慮某個(gè)請(qǐng)求完成后頁(yè)面需要怎樣響應(yīng),因?yàn)槭琼樞驁?zhí)行的舞吭,接下來(lái)干什么已經(jīng)寫(xiě)好了泡垃。

異步:同時(shí)請(qǐng)求,優(yōu)點(diǎn)是響應(yīng)時(shí)間快羡鸥。與同步不同的是兔毙,需要單獨(dú)考慮一個(gè)異步請(qǐng)求被響應(yīng)之后需要做什么后續(xù)處理,這個(gè)會(huì)在回調(diào)函數(shù)里面寫(xiě)兄春。

AJAX:某一部分的請(qǐng)求是異步響應(yīng)的,即與主要流程并行锡溯,可以部分與服務(wù)器交換信息赶舆。

3.使用

包括三個(gè)主要步驟:創(chuàng)建請(qǐng)求,發(fā)生請(qǐng)求祭饭,回調(diào)函數(shù)芜茵。

3.1創(chuàng)建 XMLHttpRequest 對(duì)象

xmlhttp=new XMLHttpRequest();

3.2向服務(wù)器發(fā)送請(qǐng)求

xmlhttp.open("GET","ajax_info.txt",true);

三個(gè)參數(shù)分別是:請(qǐng)求方式,GET/POST倡蝙;請(qǐng)求內(nèi)容(頁(yè)面/函數(shù))九串;是否異步。

xmlhttp.send();

3.2 回調(diào)函數(shù)

xmlhttp.onreadystatechange=function(){}

函數(shù)體里面會(huì)寫(xiě)“收到了服務(wù)器返回的數(shù)據(jù)之后寺鸥,做什么處理”猪钮,可以用兩種方式響應(yīng)數(shù)據(jù):

responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)。

responseXML 獲得 XML 形式的響應(yīng)數(shù)據(jù)胆建。

4.案例

案例地址

網(wǎng)頁(yè)頁(yè)面代碼:

一個(gè)輸入框txt1烤低,通過(guò)onkeyup="showHint(this.value)"(onkeyup 事件在用戶釋放鍵(在鍵盤(pán)上)時(shí)發(fā)生)綁定在showHint(this.value)函數(shù)上

<form action=""> 
輸入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />

</form>

<p>提示信息: <span id="txtHint"></span></p>

在function showHint(str)上,判斷當(dāng)str不為空后笆载。完成異步請(qǐng)求的三個(gè)部分扑馁,第一是(根據(jù)瀏覽器不同)創(chuàng)建 XMLHttpRequest 對(duì)象涯呻。


var xmlhttp;

  if (str.length==0)

  {

    document.getElementById("txtHint").innerHTML="";

    return;

  }

  if (window.XMLHttpRequest)

  {

    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼

    xmlhttp=new XMLHttpRequest();

  }

  else

  {

    // IE6, IE5 瀏覽器執(zhí)行代碼

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

第二是寫(xiě)回調(diào)函數(shù),操作是在id="txtHint"的位置顯示提示信息:


xmlhttp.onreadystatechange=function()

  {

    if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }

  }

第三是寫(xiě)請(qǐng)求的發(fā)送腻要。


xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);

 xmlhttp.send();

注意:數(shù)據(jù)傳輸路徑是先請(qǐng)求數(shù)據(jù)复罐,然后發(fā)送成功才調(diào)用回調(diào)函數(shù)。但是代碼部分回調(diào)函數(shù)寫(xiě)在前面雄家。

參考

https://www.runoob.com/ajax/ajax-tutorial.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末效诅,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子咳短,更是在濱河造成了極大的恐慌填帽,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,978評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咙好,死亡現(xiàn)場(chǎng)離奇詭異篡腌,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)勾效,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門(mén)嘹悼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人层宫,你說(shuō)我怎么就攤上這事杨伙。” “怎么了萌腿?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,623評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵限匣,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我毁菱,道長(zhǎng)米死,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,324評(píng)論 1 282
  • 正文 為了忘掉前任贮庞,我火速辦了婚禮峦筒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘窗慎。我一直安慰自己物喷,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布遮斥。 她就那樣靜靜地躺著峦失,像睡著了一般。 火紅的嫁衣襯著肌膚如雪伏伐。 梳的紋絲不亂的頭發(fā)上宠进,一...
    開(kāi)封第一講書(shū)人閱讀 49,741評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音藐翎,去河邊找鬼材蹬。 笑死实幕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的堤器。 我是一名探鬼主播昆庇,決...
    沈念sama閱讀 38,892評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼闸溃!你這毒婦竟也來(lái)了整吆?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,655評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤辉川,失蹤者是張志新(化名)和其女友劉穎表蝙,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體乓旗,經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡府蛇,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了屿愚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片汇跨。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖妆距,靈堂內(nèi)的尸體忽然破棺而出穷遂,到底是詐尸還是另有隱情,我是刑警寧澤娱据,帶...
    沈念sama閱讀 34,254評(píng)論 4 328
  • 正文 年R本政府宣布蚪黑,位于F島的核電站,受9級(jí)特大地震影響中剩,放射性物質(zhì)發(fā)生泄漏祠锣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3 312
  • 文/蒙蒙 一咽安、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蓬推,春花似錦妆棒、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,725評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至毅糟,卻和暖如春红选,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背姆另。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,950評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工喇肋, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留坟乾,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2 360
  • 正文 我出身青樓蝶防,卻偏偏與公主長(zhǎng)得像甚侣,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子间学,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2 348

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

  • 1.ajax 是什么: AJAX是異步的JavaScript和XML(Asynchronous JavaScrip...
    亭東云漫閱讀 848評(píng)論 0 0
  • 1. 什么是AJAX低葫?它又能做什么详羡? 先來(lái)看看這個(gè)名稱的構(gòu)成:Asynchronous JavaScript an...
    seven冫閱讀 479評(píng)論 0 2
  • 談?wù)勀銓?duì) ajax 的認(rèn)識(shí)?Ajax 的全稱是 Asynchronous JavaScript and XML 中...
    Drazy嘀嘀嘀閱讀 225評(píng)論 0 1
  • HTTP 什么是HTTP? 超文本傳輸協(xié)議嘿悬,是一個(gè)基于請(qǐng)求與響應(yīng)实柠,無(wú)狀態(tài)的,應(yīng)用層的協(xié)議鹊漠,持鞯剑基于TCP/IP協(xié)議傳...
    苦難_69e0閱讀 406評(píng)論 0 2
  • 一、定義: 1躯概、XMLHTTPRequest對(duì)象登钥,顧名思義:是基于XML[https://www.runoob.c...
    web小王子閱讀 716評(píng)論 0 0