封装Ajax，实现GET和POST请求

1.Ajax 介绍

Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。
通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。Ajax 最大的特点就是局部刷新。
Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR),浏览器内置了 Ajax 解析引擎

ajax.open('get', 'demo.php', true);
三个参数：
"get"和"post"代表的是请求方式，
"demo.php"代表的是请求的url地址
"true"代表的是异步，可以设置同步，但是这样会损失Ajax的特性

发送请求  ajax.send()

readyState
0  请求未初始化	1 服务器连接己建立
2  请求已接收	3 处理请求，响应中
4  响应就绪

接收服务器返回的信息        onreadystatechange(这是一个函数)

ajax.status         HTTP 状态码
常见状态码
200 - 请求成功
301 -Moved Permanently 资源（网页等）被永久转移到其它URL
304 -Not Modified 使用缓存文档
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
状态码分类
1**信息，服务器收到请求，需要请求者继续执行操作	2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求	4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误

function ajax(obj) {
    
    
  const {
    
     url, type, data, success } = obj; //Es6解构赋值，把我们对象中的参数解析出来
  var XHR = window.XMLHttpRequest
    ? new XMLHttpRequest()
    : new ActiveXObject("Microsoft.XMLHTTP"); //利用三元运算，兼容IE的写法
  //1.定义一个空字符串对我们传过来的data数据对象进行遍历，拼接url地址，因为get请求的参数是直接附加在url地址上面的
  var str = "";
  for (var i in data) {
    
    
    //1.1 但是这样拼接的话有一个缺点就是拼接完成以后多了一个&,因此，我们用正则或者是字符串的截取方法对字符串进行操作
    str += i + "=" + data[i] + "&";
  }
  str = str.replace(/&$/gi, ""); //1.2 把最后一个&替换成 ''


  //2.如果是get请求的话
  //2.1obj.type.toLowerCase()=='get'作用是一样的,主要就是为了不管传的参数是大写还是小写，都可以进行请求
  if (type.toUpperCase() == "GET") {
    
    
    // 2.2str==''代表的是如果get请求不传递数据的时候
    if (str == "") {
    
    
      //true代表的是异步操作,可以省略
      XHR.open(type, url, true);
    } else {
    
    
      //2.3如果get请求传递的有数据的情况下,把我们的str拼接到url上面完成传参
      XHR.open(type, url + "?" + str, true);
    }
    //2.4发送请求
    XHR.send();
  }


  //3如果是post请求的话，就没有这么麻烦了,就不需要str拼接了，因为是在请求体中传递的
  if (type.toUpperCase() == "POST") {
    
    
    XHR.open(type, url, true);
    //3.1 不过post请求需要设置请求头来保证前后端传输与接收的一致性，可以设置其他的格式，不过要前后端达成一致
    //3.2 content-Type的属性值还有例如Application/json，也是我们应用比较多的一种json格式的数据
    XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //在这个地方把我们的数据发送给服务器端
    XHR.send(data);
  }


  //4.然后监听ajax响应的变化，只有readyState==4的时候，状态码是200 的时候，我们对数据进行操作
  XHR.onreadystatechange = function() {
    
    
    if (XHR.readyState == 4) {
    
    
      if (XHR.status == 200) {
    
    
        //4.1 执行操作数据的回调函数
        //4.2 responseText指的是返回的数据
        success(XHR.responseText);
      }
    }
  };
}
//对象
let suc = function(data) {
    
    
  console.log(data); //5.在这个函数里面可以对我想要的数据进行加工
};
//5.1 参数设置成对象的形式，是因为函数的参数是一一对应的关系，但是如果你记错了参数的排列顺序的话，不好意思，报错了呦
let obj = {
    
    
  url: "http://localhost:3000/product",
  type: "get",
  success: suc,
};
ajax(obj); //调用我们的封装函数，代码就会一步一步的运行了

封装Ajax，实现GET和POST请求

1.Ajax 介绍

猜你喜欢