Ajax工作原理

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求丁屎,從服務(wù)器獲得數(shù)據(jù)踱稍,然后用javascript來操作DOM而更新頁面枷恕。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)述雾。

XMLHttpRequest是ajax的核心機(jī)制友酱,它是在IE5中首先引入的,是一種支持異步請求的技術(shù)刑顺。簡單的說氯窍,也就是javascript可以及時向服務(wù)器提出請求和處理響應(yīng),而不阻塞用戶蹲堂。達(dá)到無刷新的效果狼讨。

所以我們先從XMLHttpRequest講起,來看看它的工作原理柒竞。
 首先政供,我們先來看看XMLHttpRequest這個對象的屬性。
  它的屬性有:
  onreadystatechange 每次狀態(tài)改變所觸發(fā)事件的事件處理程序朽基。
  responseText 從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式布隔。
  responseXML 從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對象。
  status 從服務(wù)器返回的數(shù)字代碼稼虎,比如常見的404(未找到)和200(已就緒)
  status Text 伴隨狀態(tài)碼的字符串信息
  readyState 對象狀態(tài)值
    0 (未初始化) 對象已建立衅檀,但是尚未初始化(尚未調(diào)用open方法)
    1 (初始化) 對象已建立,尚未調(diào)用send方法
    2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用霎俩,但是當(dāng)前的狀態(tài)及http頭未知
    3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù)哀军,因?yàn)轫憫?yīng)及http頭不全,這時通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會出現(xiàn)錯誤打却,
    4 (完成) 數(shù)據(jù)接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)

來杉适,跟著我手寫一個看

GET:

var xhr = new XMLHttpRequset();

xhr.open("GET", url, true);                  // 第三個參數(shù)是否要異步,一般都異步

xhr.onreadystatechange(){
  if(xhr.readyState == 4 && xhr.status == 200){
      var res = xhr.responseText;
      //執(zhí)行dom操作柳击,把返回值賦給dom元素
  }
}

xhr.send(null);

POST:

var xhr = new XMLHttpRequset();

xhr.open("POST", url, true);                  // 第三個參數(shù)是否要異步猿推,一般都異步

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//設(shè)置請求報文頭

xhr.onreadystatechange(){
  if(xhr.readyState == 4 && xhr.status == 200){
      var res = xhr.responseText;
      //執(zhí)行dom操作,把返回值賦給dom元素
  }
}

xhr.send("txtName=ss&txtpwd=123");    //參數(shù)名=參數(shù)值
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末捌肴,一起剝皮案震驚了整個濱河市蹬叭,隨后出現(xiàn)的幾起案子毯侦,更是在濱河造成了極大的恐慌,老刑警劉巖具垫,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異试幽,居然都是意外死亡筝蚕,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門铺坞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來起宽,“玉大人,你說我怎么就攤上這事济榨∨骰Γ” “怎么了?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵擒滑,是天一觀的道長腐晾。 經(jīng)常有香客問我,道長丐一,這世上最難降的妖魔是什么藻糖? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮库车,結(jié)果婚禮上巨柒,老公的妹妹穿的比我還像新娘。我一直安慰自己柠衍,他們只是感情好洋满,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著珍坊,像睡著了一般牺勾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上垫蛆,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天禽最,我揣著相機(jī)與錄音,去河邊找鬼袱饭。 笑死川无,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的虑乖。 我是一名探鬼主播懦趋,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼疹味!你這毒婦竟也來了仅叫?” 一聲冷哼從身側(cè)響起帜篇,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎诫咱,沒想到半個月后笙隙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡坎缭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年竟痰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掏呼。...
    茶點(diǎn)故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡坏快,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出憎夷,到底是詐尸還是另有隱情莽鸿,我是刑警寧澤,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布拾给,位于F島的核電站祥得,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蒋得。R本人自食惡果不足惜啃沪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望窄锅。 院中可真熱鬧创千,春花似錦、人聲如沸入偷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽疏之。三九已至殿雪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锋爪,已是汗流浹背丙曙。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留其骄,地道東北人亏镰。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像拯爽,于是被迫代替她去往敵國和親索抓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評論 2 354

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