在原生js中我們使用的是XMLHttpRequest對象來發送ajax請求

主要步驟就是：

　? ?1.創建XMLHTTPRequest對象

　　2.使用open方法設置和服務器的交互信息

　　3.設置發送的數據，開始和服務器端交互

　　4.注冊事件

　　5.更新界面

（1） get方式

//步驟一:創建異步對象
var ajax = new XMLHttpRequest();
//步驟二:設置請求的url參數,參數一是請求的類型,參數二是請求的url,可以帶參數,動態的傳遞參數starName到服務端
ajax.open('get','getStar.php?starName='+name);
//步驟三:發送請求
ajax.send();
//步驟四:注冊事件 onreadystatechange 狀態改變就會調用
ajax.onreadystatechange = function () {if (ajax.readyState==4 &&ajax.status==200) {//步驟五 如果能夠進到這個判斷 說明 數據 完美的回來了,并且請求的頁面是存在的console.log(ajax.responseText);//輸入相應的內容}
}

?（2）post方式

//創建異步對象  
var xhr = new XMLHttpRequest();
//設置請求的類型及url
//post請求一定要添加請求頭才行不然會報錯
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.open('post', '02.post.php' );
//發送請求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {// 這步為判斷服務器是否正確響應if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);} 
};

?二、也可以對原生js發送ajax請求進行封裝

function ajax_method(url,data,method,success) {// 異步對象var ajax = new XMLHttpRequest();// get 跟post  需要分別寫不同的代碼if (method=='get') {// get請求if (data) {// 如果有值url+='?';url+=data;}else{}// 設置 方法 以及 urlajax.open(method,url);// send即可ajax.send();}else{// post請求// post請求 url 是不需要改變ajax.open(method,url);// 需要設置請求報文ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 判斷data send發送數據if (data) {// 如果有值 從send發送ajax.send(data);}else{// 木有值 直接發送即可ajax.send();}}// 注冊事件ajax.onreadystatechange = function () {// 在事件中 獲取數據 并修改界面顯示if (ajax.readyState==4&&ajax.status==200) {// console.log(ajax.responseText);// 將 數據 讓 外面可以使用// return ajax.responseText;// 當 onreadystatechange 調用時 說明 數據回來了// ajax.responseText;// 如果說 外面可以傳入一個 function 作為參數 successsuccess(ajax.responseText);}}}

以上就是使用原生方式的ajax請求。

?