原生ajax的實現步驟

Ajax的實現步驟

 

1. 1.      創建ajax對象

　　　　var xhr = new XMLHttpRequest();

1. 2.      告訴ajax請求地址以及請求方式(ajax下的open方法)

　　　　xhr.open(‘get’,’http://www.example.com’); 第一個參數為請求方式，第二個參數為請求地址/服務器端對應的路由請求地址

 

1. 3.      發送請求

　　　　xhr.send();

1. 4.      獲取服務器端與客戶端的響應數據

　　　　xhr.onload = function () {

       　　console.log(xhr.responseText);  xhr.responseText 獲取服務器端的響應數據

}

 

get請求：

 

 

 后台對應代碼：

 

 

 

post請求：

xhr.setRequstHeader(‘Content-Type’,’application/x-www-form-urlencoded’);  固定寫法，第一個參數報文屬性名稱，第二個參數報文屬性對應的值

 

 

后台對應代碼：（接受post請求要使用一個第三方模塊 body-parser）

 

 

 

 

 

 

 

 

 

 

另外一種客戶端向服務器端傳遞請求方式的格式 -  json格式（post請求）

 

客戶端通過ajax向服務端發送請求參數的格式，除了是屬性名稱+屬性值的格式外，還可以是json格式。

傳統的表單默認的是x-www-form-urlincoded格式不能更改

 在請求中指定conten-tyoe屬性的值是：application/json，告訴服務器端當前請求參數的格式是json

 

后台代碼：（在后台中接受post請求要使用一個第三方模塊 body-parser） 

 

 

 

 

 

 

JSON.stringify();   將json對象轉換為json字符串

JSON.parse()；    將json字符串轉換為json對象