XMLHttpRequest

XMLHttpRequest可以以異步方式的請求數(shù)據(jù)處理程序, 可實現(xiàn)對網(wǎng)頁的部分更新， 而不是刷新整個頁面。這個請求是異步的，即在往服務器發(fā)送請求時，并不會阻礙程序的運行，瀏覽器會繼續(xù)渲染后續(xù)的結(jié)構(gòu)。

響應 readyState（onreadystatechange）

readyState有五種可能的值：
xhr.readyState = 0時，UNSENT open尚未調(diào)用
xhr.readyState = 1時，OPENED open已調(diào)用
xhr.readyState = 2時，HEADERS_RECEIVED 接收到頭信息
xhr.readyState = 3時，LOADING 接收到響應主體
xhr.readyState = 4時，DONE 響應完成

Ajax.png

注意點 :
get請求,設置請求行時,需要把參數(shù)列表拼接到url后面
get請求不用設置請求頭, 不用說明請求主體的編碼方式
get請求的請求體為null

登陸小案例（后臺PHP）

用戶名：<input type="text" id="userInp">
密碼：<input type="password" id="pswInp">
<button id="btn">登陸</button>

<script>
    var user = document.getElementById("userInp");
    var pwd = document.getElementById("pswInp");
    var btn = document.getElementById("btn");

    btn.onclick = function(){
        //獲取用戶名和密碼
        var username = user.value;
        var password = pwd.value;
        
        //XMLHttpRequest對象
        var xhr = new XMLHttpRequest();
        //基于http協(xié)議：請求行，請求頭，請求主體
        xhr.open("post","06-login.php");
        // post 請求需要在請求頭中, 設置請求體的編碼方式
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        // 發(fā)送請求體, post 請求參數(shù)在請求體中
        xhr.send("username=" + username + "&password=" + password);

        //處理響應，監(jiān)聽readyState
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                var result = xhr.responseText;
                if(result === "yes"){
                    //登陸成功,跳轉(zhuǎn)
                    location.href = "06-index.html";
                }else{
                    alert ("用戶名或者密碼錯誤");
                }  
            }
        }
    }
</script>

PHP后臺

注意：運行PHP文件可以使用phpStudy

<?php
    header('content-type:text/html;charset=utf-8');
    $username = $_POST['username'];
    $password = $_POST['password'];
    if($username === 'lose' && $password === '123'){
        //登陸成功
        echo "yes";
    }else{
        echo "no";
    }
?>

jQuery中的ajax

$.ajax()方法詳解

url

要求為String類型的參數(shù)，（默認為當前頁地址）發(fā)送請求的地址。

type

要求為String類型的參數(shù)，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。

data

類型：String
發(fā)送到服務器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。

dataType

類型：String
預期服務器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷，比如 XML MIME 類型就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執(zhí)行這個腳本。隨后服務器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)。可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文本 HTML 信息；包含的 script 標簽會在插入 dom 時執(zhí)行。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設置了 "cache" 參數(shù)。注意：在遠程請求時(不在同一個域下)，所有 POST 請求都將轉(zhuǎn)為 GET 請求。（因為將使用 DOM 的 script標簽來加載）
"json": 返回 JSON 數(shù)據(jù) 。
"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
"text": 返回純文本字符串

success

類型：Function
請求成功后的回調(diào)函數(shù)。
參數(shù)：由服務器返回，并根據(jù) dataType 參數(shù)進行處理后的數(shù)據(jù)；描述狀態(tài)的字符串。
更多參數(shù)請參考：https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

上面的登陸案例可以簡化為

用戶名：<input type="text" id="userInp">
密碼：<input type="password" id="pswInp">
<button id="btn">登陸</button>

<script src="./jquery-1.12.4.js"></script>
<script>
  $('#btn').click(function(){
    var username = $('#userInp').val();
    var password = $('#pswInp').val();
    $.ajax({
      // 請求地址
      url: '06-login.php',
      // 請求方式
      type: 'POST',
      // 數(shù)據(jù)
      data: {
          username: username,
          password: password 
      },
      // 數(shù)據(jù)類型
      dataType: 'text',
      // 請求成功
      success: function(info) {
        console.log(info)
        if(info === 'yes') {
          location.href = "06-index.html";
        }
      },
      // 請求失敗
      error: function(e) {
        console.log(e)
      }
    })
  })
</script>