Ajax实现异步请求步骤

一、原生JS实现：

 

var request = new XMLHttpRequest();　　//创建XMLHttpRequest()对象

//启动一个HTTP请求，但未发送请求到服务端，最后一个参数默认为false，异步发送。
request.open("GET/POSt", url, true/false);　　//使用GET方法时直接在的url上传递参数。

//使用POST方法时要通过send方法传递参数给服务端
var data = "str";　　//str为获取表单元素的值或其它需要更新的内容

//设置头信息，表明发送的是表单元素
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//发送请求到服务端
request.send(null/data);

//onreadystatechange事件会在readystate属性改变时触发，监控readyState属性
request.onreadystatechange = function() {

//状态码为4表示请求已完成，响应内容已就绪
  if (request.readyState === 4) {

    //状态码304表示请求资源没有被修改，可以使用浏览器缓存
    if ((request.status >= 200 && request.status < 300) || request.status == 304) {

      //服务器返回的是json对象，使用JSON.parse()方法格式化为js对象。
      var data = JSON.parse(request.responseText);

      if (data.success) {
        //处理响应成功返回的数据

　　　　
      } else {
        //处理响应失败返回的数据

      }
    } else {
      //处理请求失败返回的数据
    }
  }
}

//前后端交互约定,约定success为true或者false时返回不同的信息，
//通过success属性可以方便前端调用返回的信息。
{
  "success" : true,
  "msg": "xxx",
}

 

 

二、jQuery实现