Ajax

Posted 2021-01-23 crackedlove

一、原生Ajax

  1.什么是Ajax？

• Ajax的全称是Asynchronous javascript and XML(异步的JavaScript和XML);
• Ajax能在不刷新整个网页的情况下，请求服务器数据更新局部内容；
• 能实现局部刷新，大大降低了资源浪费；
• 传统网页（不使用ajax）如果更新内容，需要刷新整个页面。

 2. 实现步骤：

   (1). 创建XMLHttpRequest对象

let xhr = new XMLHttpRequest();

   (2). 配置请求信息

xhr.open(method,url,async); 

   method：请求方式，GET或POST；

   url：请求地址，例如：https://hello.com/api/pc/coupon/getCouponListByCustIdAndStatus；

   async：是否异步请求，true异步请求(默认)，false同步请求。

  (3). 发送请求

  GET：

xhr.send();    //get不传参，参数拼接在url后面

  POST：

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   //设置请求头
xhr.send("user=张三&pass=123");  //post需传请求参数

  (4). 监听状态变化，执行相应操作

xhr.onreadystatechange = function(){  //xhr.readyState改变时触发
  if(xhr.readyState === 4 && xhr.status === 200) {
     console.log(xhr.responseText);  //请求成功，作为响应主体被返回的文本
　}
}

  xhr.readyState：保存了xhr自身的状态

    0：请求未初始化

    1：服务器连接已建立

    2：请求已接收

    3：请求处理中

    4：请求完成，且响应已就绪

  xhr.status： 响应的http状态码

二、jQuery中的Ajax  

 jQuery.ajax()参数：

   url：请求地址

   type：请求类型，GET或POST

   dataType：预期服务器返回的数据类型，一般设置为json

   data：一个对象，发送到服务器的数据

   contentType：发送数据到服务器时所使用的内容类型，默认是："application/x-www-form-urlencoded"。

   cache：默认true，第一次请求完成后，再次请求时，如果参数和url不变，会读取缓存中的数据，不去请求服务器的数据；false，禁用缓存

   success：请求成功后的回调函数

   error：请求失败后的回调函数

   beforesend：请求发送前执行的回调函数

   complete：请求完成时执行的回调函数

$.ajax({
   url:"https://hello.com/coupon/getCouponListByCustIdAndStatus",
   type:"POST",
   cache:false,
   dataType:"json",
   data:{
      username:"张三",
      password:123
   },
   success:function(data){
      console.log(data)
   },
   error:function(){
      console.log("通讯错误，请重试。")
   }
})