本文共 1121 字，大约阅读时间需要 3 分钟。

本文只算做个人笔记，由于我对ajax这块刚接触，所以写的很乱，之后会整理

---

---

概念

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页

优点

 1.可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验

 2.按需获取数据，节约带宽资源

分类

分为 原生ajax 和 jQuery 中的 ajax ， 其中原生ajax是核心

---

---

 

原生ajax

过程如下：

• 1. 实例化XHR对象

let xhr = new XMLHttpRequest();

• 2. 打开请求（设置请求行）

xhr.open(method,url);

• 3.设置请求头信息

xhr.responseType = 'json';xhr.setRequestHeader('Content-type','application/json');

• 4.设置监听

xhr.onreadystatechange = function(){  if(this.readyState = 4){    if(this.status == 200){       响应成功       this.response     } else {       失败     }   }}

• 5.发送请求（请求体）

xhr.send(JSON.stringify(data));

 

提交的数据类型分为：查询字符串 、 json

• 参数类型为查询字符串

  1.Content-Type

     x-www-form-urlencoded

   2.send()

      如果要发送的数据格式为：

       var obj = {

           name:'xpf',

           age:'22'

        }

       那么在发送的时候一定要将obj转换为查询字符串，send(qs.stringify(obj)); qs必须在ES6模块代码下才能用，也可以手动封装

• 参数类型为json

   1.Content-Type

       application/json

    2.send()

        var obj = {

           name:'xpf',

           age:'22'

        }

        在发送的时候一定要将obj转换为json字符串，send(JSON.stringify(obj));

   

例子如下：（此处测试所用的接口只能接收查询字符串）

• 参数为查询字符串

结果如下：

           

  

---

    

          

 

 

• 参数为json

结果如下：

查询栏目时请求体没有参数

 

jQuery 中的 ajax

例子如下：

 

结果如下:

       

 

 

                    ------------------本文完------------------