淺析Ajax：GET與POST

Asynchronous Javascript And XML 非同步JavaScript和XML； 作用：與服務端互動，讀取檔案
實現所使用到的類： XMLHttpRequest：不相容IE5、IE6； ActiveXObject：相容IE5、IE6；
用戶端服務端通訊是通過http這個協議進行通訊的，http有兩個常用的方法（GET/POST）： 1.GET : 參數傳到URL裡面； 使用?把介面地址跟參數隔開；多個參數使用&隔開。 2.POST：資料轉送到body體裡面； 傳輸的資料相對安全；傳輸的資料沒有大小的限制。 （不常用） 3.DELETE 4.PUT
JS中以GET方式發送一個請求；
var req = new XMLHttpRequest(); req.open("GET","xxx"); req.send(); req.onreadystatechange = function () { alert(this.readyState); };
JS中接受服務端發到用戶端裡面的內容 XMLHttpRequest > response 回應

同步：一行行代碼執行，遇到比較耗時的任務，會等耗時任務執行完畢後 繼續執行（有耗時的任務程式會卡住，直到這個任務執行完成）； XMLHttpRequest 預設是非同步； 非同步： open三個參數的意義：XMLHttpRequest ->open（http的請求方 法，請求的地址，同步還是非同步）



HTTP協議傳輸內容 兩個方法： GET：傳輸的參數是直接拼接到URL中的，與HTML直接傳值一樣， 需要使用。來隔開傳遞的參數，如果有多個參數，使用&隔 開每一個參數； GET特點： GET參數放到URL裡面 -> 不能傳比較大的參數（因為URL的大 小有限制）； 參數是暴露在URL裡面的；
GET傳輸速度要快一些 -> 只要不涉及到傳大檔案、密碼、比較 重要的，都是用的GET； POST：傳輸的參數放到body體中，傳輸的大小也沒有限制；
要想跟服務端互動，得知道跟誰互動，需要知道的內容 1.請求資料的位置是哪兒 主機地址(IP或者網域名稱) 需要指定具體檔案的位置 2.需要使用哪一個HTTP 的方法 服務端提供的API要求使用哪個就使用哪個； 3.要傳輸的參數； GET:拼接到URL，使用。拼接、使用&分隔 POST:請求參數是在http標題的一個不同部分（名為entity body）傳 輸的，這一部分用來傳輸表單資訊，因此必須將 Content-type設定為:application/x-www-form- urlencoded。 post設計用來支援web表單上的使用者欄位， 其參數也是作為key/value對傳輸。 但是：它不支援複雜資料類型， 因為post沒有定義傳輸資料結構 的語義和規則。 部分範例程式碼：
//在不知道值具體是什麼類型的時候， // 可以通過null賦值；
var result = null; var request = new XMLHttpRequest();
//佈建要求 //佈建要求的http的方法GET //佈建要求的伺服器位置：http://route.showapi.com/255-1 request.open("GET","http://route.showapi.com/255-1"); //request.send();
//監聽用戶端傳輸資料到服務端的傳輸狀態

request.onreadystatechange = function () {
//readyState：讀取傳輸的狀態 console.log(this.readyState);
if(this.readyState ===XMLHttpRequest.DONE){ //response http的回應，裡面有可能有咱們需要的值

alert("互動完成"); result = request.response; } }; request.send(); console.log(result);

-------------------------------------------------------------------------------------------------------------------