Web全棧課程5 自己封裝乙個簡單的ajax

使用乙個php檔案來模擬伺服器返回，php**如下

<?php
echo $_get['a']+$_get['b'];
?>

請求的傳送實際上我們都通過瀏覽器的xmlhttprequest實現，ie6使用activexobject，不考慮ie6的相容，我們實現乙個簡單的xhr請求如下。

0：剛剛建立初始狀態 1：已連線 2：已傳送 3：已接受-頭（32k上限）

4：已接受-body（1g上限）

http狀態碼

1xx 訊息 2xx 成功 3xx 重定向 301 永久重定向——瀏覽器永遠不會再次請求老的位址 302 臨時重定向——瀏覽器下次還會請求老位址 304 （not modified）重定向到快取請求——因此304也是成功 4xx 請求錯誤，客戶端錯誤 5xx 服務端錯誤

6xx 擴充套件錯誤碼

因此可以通過2xx和304的狀態碼判斷請求成功。

// 接收;4代表結束
xhr.onreadystatechange = function() else 
}};

xhr.responsetext 文字資料

xhr.respon***ml xml資料（已經不常用）

xml資料是不固定標籤組成的資料，xml資料更加佔空間，例如：

xiaoyezi 18front engineer

json格式：

let json=;

按照我們上面**的思路，post請求的寫法推導出來應該是如下寫法，實際上如下寫法並不行。

// 連線,true代表非同步，false代表同步;瀏覽器對非同步的xhr會報錯
xhr.open('post','../server/a.php',true,);
// 傳送;send裡面是body，post需要傳送
xhr.send('a=12&b=5');

對比form的post提交方式，我們可以看到，request headers裡面有條設定和form提交的不同：

content-type: text/plain;charset=utf-8

需要增加setrequestheader的設定，再send請求的body內容，請求成功。

xhr.send('a=12&b=5');

content-type型別及含義？

text/plain 文字

multippart/form-data 定界符分割各個資料（檔案上傳）

function ajax(options);
options.data = options.data || {};
options.type = options.type || 'get';
options.datatype = options.datatype || 'text'; //解析資料
let arr = ;
for (let name in options.data) =$`);
}let datastr = arr.join('&');
// 不相容ie6
// 連線,true代表非同步，false代表同步;瀏覽器對非同步的xhr會報錯
if (options.type == 'get') else 
// 接收;4代表結束
				封裝乙個棧，佇列
一 棧 特殊的線性表，只能在其一端進行資料插入和刪除操作，特性 先進後出 fifo 2 模擬實現乙個棧 include include include include include 引用前面自己實現的順序表的類的標頭檔案 using namespace std template class t 容...
				自己實現乙個棧 Java
思路 1 使用鍊錶實現乙個棧，便於擴容 不用考慮陣列擴容場景 維護根節點和最 棧的節點 2 節點中維護pre指標，便於pop 時快速找到上乙個節點 package com.datastructure.stackqueue 實現乙個棧，自定義棧，用鍊錶實現，方便擴容 public class defi...
				自己封裝的乙個GridView控制項
效果如圖 使用方法 void viewdidload cgfloat gridview mygridview gridview heightofrow nsinteger row nsinteger numberofgridview mygridview gridview void gridview...

Web全棧課程5 自己封裝乙個簡單的ajax

封裝乙個棧，佇列

自己實現乙個棧 Java

自己封裝的乙個GridView控制項

相關推薦