Ajax请求

XMLHttpRequest

XMLHttpRequest可以以异步方式的请求数据处理程序, 可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步的，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。

响应 readyState（onreadystatechange）

readyState有五种可能的值：
xhr.readyState = 0时，UNSENT open尚未调用
xhr.readyState = 1时，OPENED open已调用
xhr.readyState = 2时，HEADERS_RECEIVED 接收到头信息
xhr.readyState = 3时，LOADING 接收到响应主体
xhr.readyState = 4时，DONE 响应完成

请求由客户端发起，其规范为：请求行、请求头、请求主体

Ajax.png

注意点 :
get请求,设置请求行时,需要把参数列表拼接到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协议：请求行，请求头，请求主体
        xhr.open("post","06-login.php");
        // post 请求需要在请求头中, 设置请求体的编码方式
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        // 发送请求体, post 请求参数在请求体中
        xhr.send("username=" + username + "&password=" + password);

        //处理响应，监听readyState
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                var result = xhr.responseText;
                if(result === "yes"){
                    //登陆成功,跳转
                    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类型的参数，（默认为当前页地址）发送请求的地址。

type

要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

data

类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataType

类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

success

类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
更多参数请参考：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',
      // 数据
      data: {
          username: username,
          password: password 
      },
      // 数据类型
      dataType: 'text',
      // 请求成功
      success: function(info) {
        console.log(info)
        if(info === 'yes') {
          location.href = "06-index.html";
        }
      },
      // 请求失败
      error: function(e) {
        console.log(e)
      }
    })
  })
</script>