Ajax之发送请求

一、什么是Ajax？

1；Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
2：AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

（1）：ajax的应用场景

ajax是一种与后端数据交互，实现页面无刷新的技术
1：股票等
2：地图等
3：获取详情页等
4：百度搜索关键字
5：翻页（上拉加载更多）

二、Ajax的使用

1：创建xml对象 —用于于后端数据交互
let xml = new XMLHttpRequest();
2：发送请求 —这边包含两个方法，首先先用open方法：设置你要发送请求的方法，请求数据的url，第三就是是否异步
open(method,url,async) 参数一：方式（get或者post）；参数二：请求文件在服务器上url； 参数三：是否异步
然后用send() 方法 —将请求发送到服务器
3：针对发送的请求方式不同，添加不同的条件
01：get请求的话，假如为了避免发生请求出现缓存的情况，需要在url后面添加一个时间戳
02：get请求需要携带参数的时候，也是在url后面拼接参数，因此数据data在外面先定义后，直接拼接在？后面
let data = “time=” + new Date() + “name=” + “lala” + “;age=” + 18; //一般而言name= ？是变量，从表单获取过来的
xml.open(“get”, “text1.txt?” + data, true);
xml.send();
03：假如为post请求的时候，那么你就需要设置发送请求头，还有数据需要在send方法里面发送
let data = “name=” + “lala” + “&age=” + 18; //一般而言name= ？是变量，从表单获取过来的
xml.open(“get”, “text1.txt?time=” + new Date(), true);
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xml.send(data);
4：服务器的响应：向服务器发送请求后，首先服务器做出响应任务，然后回馈我们消息，这些消息来自XMLHttpRequest对象里面的属性（ responseText属性）—这个属性里面存放着字符串格式的响应数据（一般为0或1）。
01：响应任务处理：每当 ==readyState ==改变时，就会触发 ==onreadystatechange（存储函数） ==事件:
02：readyState 属性存有 XMLHttpRequest 的状态信息
解析：readyState（状态值）：—用来标识当前XMLHttpRequest对象处于什么状态 （里面有着5种状态： 0: 请求未初始化。 1: 服务器连接已建立。 2: 请求已接收。 3: 请求处理中。 4: 请求已完成，且响应已就绪）
status（状态码）： —响应的HTTP状态码 （ 200: “OK” 404: 未找到页面）

    //3：服务器的响应
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) { //证明请求完成
        if (xhr.status === 200) { //证明响应成功
          var str = xhr.responseText; //响应后的数据，存放在xhr对象的responseText属性里面，是字符串格式
          if (str === "1") {
            //为真
          } else {
            //为假
          }
        }
      }
    }

（1）：一个简单的get请求

需求：当表单失去焦点的时候，发送get请求，并且传递用户名过去

   <form action="4login.html">
    <label for="uname">用户名：</label><input type="text" id="uname" name="uname">
  </form>
  <script>
    // 需求  给表单发送一个普通的get请求(失去焦点的时候），并且传递用户名
    let uname = document.querySelector("#uname");
    uname.addEventListener("blur", function () {
      let txtVal = uname.value;
      //1：创建xhr对象实例
      let xhr = new XMLHttpRequest();
      let data = "time=" + new Date() + "&name=" + txtVal;
      //2：发送请求
      xhr.open("get", "text1.txt?" + data, true);
      xhr.send(null);
      //3：服务器的响应
      xhr.onreadystatechange = () => { //01：先触发xhr对象实例的存储函数
        if (xhr.readyState === 4) { //02：判断xhr对象实例中状态值是否为4（4的话，证明请求已经完成）
          if (xhr.status === 200) { //03：判断xhr对象实例中http状态码是否为200（200的haul，证明交易成功）
            let str = xhr.responseText; //04：服务器返回的数据以字符串的形式存储在responseText属性里面
            if (str === "1") {
              //成功
            } else {
              //失败
            }
          }
        }
      }
    })
  </script>

（2）：一个简单的post请求

需求：针对一个密码框失去焦点的时候，发送post请求

  <form action="">
    <label for="pwd">密码</label><input type="password" id="pwd">
  </form>
  <script>
    //立即执行函数，一点击失去焦点，直接验证，不用堆积太多
    (function () {
      let pwd = document.querySelector("#pwd");
      pwd.addEventListener("blur", function () {
        let pwdVal = pwd.value;
        //1：创建xhr对象实例
        let xhr = new XMLHttpRequest();
        //2：发送post请求
        let data = "pwd=" + pwdVal;
        xhr.open("post", "text1.txt?time=" + new Date(), true);
        xhr.send(data);
        //3：服务器的响应
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              let str = xhr.responseText;
              if (str === "1") {
                //成功
              } else {
                //失败
              }
            }
          }
        }
      })
    })()
  </script>