XMLHttpRequest

Ajax 是一種技術方案，但並不是一種新技術，它依賴的是現有的 Css / Html / JavaScript。

其中最核心的依賴是瀏覽器提供的 XMLHttpRequest物件，是這個物件使得瀏覽器可以發出HTTP請求與接收HTTP響應。

用一句話來總結兩者的關係：我們使用 XMLHttpRequest物件 來發送一個Ajax請求。

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

非同步請求ajax的使用在前後臺傳遞資料，優化使用者體驗起著至關重要的角色

一、原生JS中的Ajax：

1、使用ajax傳送資料的步驟

第一步：建立非同步物件

var xhr = new XMLHttpRequest();

第二步：設定 請求行 open(請求方式，請求url):

xhr.open("get","validate.php?username="+name);  // get請求如果有引數就需要在url後面拼接引數，
xhr.open("post","validate.php");  // post如果有引數，就在請求體中傳遞

第三步：設定請求頭（GET方式忽略此步驟）: setRequestHeader()

// get不需要設定
// post需要設定請求頭：Content-Type:application/x-www-form-urlencoded
 

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步：設定請求體 send()

xhr.send(null);  // get的引數在url拼接了，所以不需要在這個函式中設定
xhr.send("username="+name);  // post的引數在這個函式中設定(如果有引數)

第五步：讓非同步物件接收伺服器的響應資料

// 一個成功的響應有兩個條件：1.伺服器的狀態碼為200（成功響應了）   2.非同步物件的響應狀態為4(資料解析完畢可以使用了)
xhr.onreadystatechange 
 
= function(){
　　if(xhr.status == 200 && xhr.readyState == 4){
　　　　console.log(xhr.responseText);
　　}
}

ajax-get方式請求案例：

var xhr = new XMLHttpRequest();
xhr.open("get","validate.php?username="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
  if(xhr.status == 200 && xhr.readyState == 4){
    console.log(xhr.responseText);
    document.querySelector(".showmsg").innerHTML = xhr.responseText;
  }
}

ajax-post方式請求案例：

var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
  // 判斷伺服器是否響應，判斷非同步物件的響應狀態
  if(xhr.status == 200 && xhr.readyState == 4){
    document.querySelector(".showmsg").innerHTML = xhr.responseText;
  }
}

二、Jquery中的Ajax

$.ajax({
　　type:"get", // get或者post
　　url:"abc.php", // 請求的url地址
　　data:{}, //請求的引數
　　dataType:"json", //json寫了jq會幫我們轉換成陣列或者物件 他已經用JSON.parse弄好了
　　timeout:3000, //3秒後提示錯誤
　　beforeSend:function(){
　　　　// 傳送之前就會進入這個函式
　　　　// return false 這個ajax就停止了不會發 如果沒有return false 就會繼續
　　},
　　success:function(data){ 
　　　　// 成功拿到結果放到這個函式 data就是拿到的結果
　　},
　　error:function(){
　　　　//失敗的函式
　　},
　　complete:function(){
　　　　//不管成功還是失敗 都會進這個函式
　　}
})

// 常用，如：
$.ajax({
　　type:"get",
　　url:"",
　　data:{},
　　dataType:"json",
　　success:function(data){
　　　　// 回撥
　　}
});

 
$.ajax() 都可以發
$.post(url,data,success,datatype):本質上只能傳送post請求
$.get(url,data,success,datatype):本質上只能傳送get請求

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

jquery中ajax請求的使用和四個步驟示例

ajax() 方法用於執行 AJAX（預設是非同步 HTTP）請求，所有的 jQuery AJAX 方法都使用 ajax() 方法，該方法通常用於其他方法不能完成的請求。

基本的語法是：$.ajax({name:value, name:value, … })

下面是通常使用的示例：

$.ajax({
　　type:'POST', // 規定請求的型別（GET 或 POST）
　　url:uploadV, // 請求的url地址
　　dataType:'json', //預期的伺服器響應的資料型別
　　data:{},//規定要傳送到伺服器的資料
　　beforeSend:function(){ //傳送請求前執行的函式（傳送之前就會進入這個函式）
  　　// ....
　　},
　　success: function(result){ // 當請求成功時執行的函式
      //...
　　},
　　error:function(result){ //失敗的函式
  　　//...
　　},
　　complete:function(){
  　　//請求完成時執行的函式
   　　// ...
　　}
});

如果還需要其他引數，參考下面列舉的一下其他的可以用到的名稱和值：

名稱   值/描述
async 布林值，表示請求是否非同步處理。預設是 true。
beforeSend(xhr) 傳送請求前執行的函式。
cache 布林值，表示瀏覽器是否快取被請求頁面。預設是 true。
complete(xhr,status) 請求完成時執行的函式（在請求成功或失敗之後均呼叫，即在 success 和 error 函式之後）。
contentType 傳送資料到伺服器時所使用的內容型別。預設是：”application/x-www-form-urlencoded”。
context 為所有 AJAX 相關的回撥函式規定 “this” 值。
data 規定要傳送到伺服器的資料。
dataFilter(data,type) 用於處理 XMLHttpRequest 原始響應資料的函式。
dataType 預期的伺服器響應的資料型別。
error(xhr,status,error) 如果請求失敗要執行的函式。
global 布林值，規定是否為請求觸發全域性 AJAX 事件處理程式。預設是 true。
ifModified 布林值，規定是否僅在最後一次請求以來響應發生改變時才請求成功。預設是 false。
jsonp 在一個 jsonp 中重寫回調函式的字串。
jsonpCallback 在一個 jsonp 中規定回撥函式的名稱。
password 規定在 HTTP 訪問認證請求中使用的密碼。
processData 布林值，規定通過請求傳送的資料是否轉換為查詢字串。預設是 true。
scriptCharset 規定請求的字符集。
success(result,status,xhr) 當請求成功時執行的函式。
timeout 設定本地的請求超時時間（以毫秒計）。
traditional 布林值，規定是否使用引數序列化的傳統樣式。
type 規定請求的型別（GET 或 POST）。
url 規定傳送請求的 URL。預設是當前頁面。
username 規定在 HTTP 訪問認證請求中使用的使用者名稱。
xhr 用於建立 XMLHttpRequest 物件的函式。