AJax(XHR+Get 和 Post+AJax 的封装)

作者：刘大猫

2025-05-29
黑龙江
本文字数：4591 字
阅读完需：约 15 分钟

@[TOC]

目标:

㈠ XMLHttpRequest

㈡GET 与 POST

㈢封装 Ajax

一、 XMLHttpRequest

Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR), Ajax 指向服务器请求额外的数据而无须卸载页面(即刷新)创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。var xhr = new XMLHttpRequest();在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求类型(get、 post)、请求的 URL 和表示是否异步。 open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过 send()方法进行发送请求， send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发送到服务器上。当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性：

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般情况 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码，还有一些别的：

同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发 readystatechange 事件。这个属性有五个值：

二、 GET 与 POST

在提供服务器请求的过程中，有两种方式，分别是： GET 和 POST。在 Ajax 使用的过程中， GET 的使用频率要比 POST 高。

GET 请求

可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。

xhr.open('get','diner/login?'+'name=Lee&age=100',true);

复制代码

通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。

POST 请求

三、封装 Ajax

因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是 POST；我们需要封装一个 Ajax 函数，来方便我们调用。

四:课程代码附件

1)ajax 同步请求

实现流程：        同步：          1、得到核心对象XMLHttpRequest对象            var xhr = new XMLHttpRequest();          2、准备/打开请求            open(请求类型GET/POST,请求的路径,是否异步true/false);          3、发送请求            send(参数/null);            注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;              如果是post请求，有参数则设置参数，无参数设置为null;          4、解析响应数据            1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）            2、得到后台响应数据  responseText<script type="text/javascript">    // 1、得到核心对象XMLHttpRequest对象    var xhr = new XMLHttpRequest();    console.log(xhr);    // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);    xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求    // 3、发送请求  send(参数/null);    xhr.send(null);    // 4、解析响应数据    if (xhr.status == 200) { // 1、判断响应是否成功 status=200      // 2、得到后台响应数据  responseText      console.log(xhr.responseText);      var user = JSON.parse(xhr.responseText);      console.log(user);      console.log(user.uname);    } else {      alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);    }                  </script>

复制代码

2)ajax 异步请求

<script type="text/javascript">    // 1、得到核心对象XMLHttpRequest对象    var xhr = new XMLHttpRequest();        console.log(xhr);    // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);    xhr.open("GET","js/data.json?uname=zhangsan&uage=10",true); // 异步请求    // 3、发送请求  send(参数/null);    xhr.send(null);        // 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）    xhr.onreadystatechange = function() {      // 如果是异步请求，需要等待数据完全响应后再做处理      if (xhr.readyState == 4) {        // 4、解析响应数据        if (xhr.status == 200) { // 1、判断响应是否成功 status=200          // 2、得到后台响应数据  responseText          console.log(xhr.responseText);          var user = JSON.parse(xhr.responseText);          console.log(user);          console.log(user.uname);        } else {          console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);        }      }    }      </script>

复制代码

3)post 请求

                         注意:Post和Get没太大差别,就换了个名字<script type="text/javascript">    // 1、得到核心对象XMLHttpRequest对象    var xhr = new XMLHttpRequest();        console.log(xhr);    // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);    xhr.open("POST","js/data.json",true); // 异步请求    // 由于Post请求的机制问题，需要模拟表单提交    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');    // 3、发送请求  send(参数/null);    xhr.send("uname=zhangsan&uage=10"); // post请求如果有参数，需要将参数设置在send方法中        // 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）    xhr.onreadystatechange = function() {      // 如果是异步请求，需要等待数据完全响应后再做处理      if (xhr.readyState == 4) {        // 4、解析响应数据        if (xhr.status == 200) { // 1、判断响应是否成功 status=200          // 2、得到后台响应数据  responseText          console.log(xhr.responseText);          var user = JSON.parse(xhr.responseText);          console.log(user);          console.log(user.uname);        } else {          console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);        }      }    }      </script>

复制代码

4)ajax 封装

<script type="text/javascript">  var obj = {    method:"GET",    url:"js/data.json?aa=11",    async:true,    data:{      uname:"zhangsan",      uage:18    },    success:function(data){      // 做想处理的事情      console.log(data);    }  };    
  function ajax(obj) {    // 1、得到核心对象XMLHttpRequest对象    var xhr = new XMLHttpRequest();        var params = formatParam(obj.data);        // 判断是否是get请求，如果是则将参数拼接在url后面    if ("GET" == (obj.method).toUpperCase()) {      //  js/data.json?uname=zhangsan&uage=18      obj.url += (obj.url).indexOf("?") > 0 ? "&" +params : "?" + params;    }        // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);    xhr.open(obj.method,obj.url,obj.async);        // 判断如果是POST请求    if ("POST" == (obj.method).toUpperCase()) {      // 由于Post请求的机制问题，需要模拟表单提交      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');      // 3、发送请求  send(参数/null);      xhr.send(params); // post请求如果有参数，需要将参数设置在send方法中    } else {      xhr.send(null); // get请求设置为null    }            // 判断是同步请求还是异步请求    if (obj.async)  { // 异步请求      // 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）      xhr.onreadystatechange = function() {        // 如果是异步请求，需要等待数据完全响应后再做处理        if (xhr.readyState == 4) {          // 处理响应结果          callback();        }      }    } else { // 同步请求      // 处理响应结果      callback();    }        // 处理响应结果    function callback() {      // 4、解析响应数据      if (xhr.status == 200) { // 1、判断响应是否成功 status=200        // 2、得到后台响应数据  responseText        /* console.log(xhr.responseText);        var user = JSON.parse(xhr.responseText);        console.log(user); */        obj.success(xhr.responseText);              } else {        console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);      }    }          }        // formatParam({ uname:"zhangsan", uage:18 });      /*将对象格式的参数转换成等号拼接的字符串*/  function formatParam(data) {    // 判断参数是否存在    if (data == null) {      return "";    }    // 定义数组，接收每个参数字符串    var params = [];    for(var key in data) {      /* console.log(key);      console.log(data[key]);      console.log(key+"="+data[key]) */      // js中通过push()方法向数组的最后追加      params.push(key+"="+data[key]);    }    console.log(params.join("&"));    var param = params.join("&");// uname=zhangsan&uage=18          return param;  }</script>

复制代码

五、ajax get/post/put/delete

GET/DELETE 一样

$("#myFormSubmit").click(function () {  var params = {};  $.ajax({      type:"GET",      url:"/getTeacherList",      async: true,      dataType: "json",      data: params,      contentType: "application/json; charset=UTF-8",      success : function (response) {          if (response.code === 200) {                        }      }  });}

复制代码

POST/PUT 一样

$("#myFormSubmit").click(function () {  var params = {     "name":$("#name").val(),      "classes":$("#classes").val(),      "college":$("#college").val(),      "alias":$("#alias").val(),      "sex":$("#sex :radio").val()  };    $.ajax({      type:"POST",      url:"/addTeacher",      async: true,      dataType: "json",      //注意：ajax提交post请求时，必须使用JSON.stringify(data) 序列化请求参数，否则报400      data: JSON.stringify(params),      contentType: "application/json; charset=UTF-8",      success : function (response) {          if (response.code === 200) {                        }      }  });}