原生JS中的Ajax请求与jQuery中的Ajax请求

1. Ajax 请求简介

ajax（Asynchronous JavaScript and XML）：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这就意味着可以在 不重新加载整个网页的情况下，对网页的局部进行更新

2. 原生 JS 中的 Ajax 请求流程

2.1. 创建异步对象

var xhr = new XMLHttpRequest();

2.2. 调用open() 方法设置请求行

设置请求行 open，也就是设置请求方式及请求 URL

// get 请求如果有参数，就需要在 url 后面拼接参数
xhr.open('GET', "xxxxxx?username="+name);

// post 如果有参数，就在请求体中传递
xhr.open('POST', URL);
// post 方式发送数据，需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

2.2.1. open() 方法参数

语法：open(method, url, async)，方法有 3 个参数

• method 请求类型：对应的取值是 GET 和 POST
• url：文件在服务器上的位置即接口路径
• async：默认值 true 异步，false 为同步
  • async 为 true 时，服务器的请求是异步的，也就是脚本执行 send() 方法后不等待服务器的执行结果，继续执行脚本代码
  • async 为 false 时，服务器的请求是同步的， 也就是脚本执行 send() 方法后等待服务器的执行结果，若在等待过程中超时，则不再等待，继续执行后面的脚本代码

2.3. 调用 send() 方法发送数据

// get的参数在 url 拼接了，所以不需要在这个函数中设置
xhr.send(null);
 
// post 必须有参数
xhr.send('a=100&b=200&c=300');

• send(string)：请求发送到服务器，仅用于 POST 请求

2.4. 设置回调函数

xhr.onreadystatechange = callback；

2.5. 完整的请求案例

2.5.1. ajax-get 方式请求案例

var xhr = new XMLHttpRequest();
xhr.open("get","xxxxxx?username="+name);
xhr.send(null);

// 回调函数
xhr