XMLHttpRequest对象

XMLHttpRequest对象 -ajax本质

1、XMLHttpRequest对象的作用
2、XHR发送Get请求基本步骤
3、XHR发送带参数的Get请求
4、URL的参数说明
5、URL编码

1.XMLHttpRequest对象作用

jQuery中的 $.get(), $.post(), $.ajax() 方法内部本质上都是使用XMLHttpRequest对象
客户端通过 XMLHttpRequest 对象与服务器来进行通讯的。
所以 Ajax 的本质其实就是利用 XMLHttpRequest对象 与 服务器 进行数据交互。

2.XHR发送Get请求基本步骤

1. 创建XHR对象
2. 设置请求方式，请求地址
3. 发送请求
4. 接收服务器响应回来的数据

参考代码

var XHR = new XMLHttpRequest();
XHR.open('Get', '请求地址');
XHR.send();
XHR.onload = function () {
    console.log(XHR.responseText);  // 服务器响应回来的内容
}

3.XHR发送带参数的Get请求

核心代码:

 XHR.open('Get', '请求地址?查询字符串');

多个参数用 & 符号连接，如: ?page=0&size=10

4.URL的参数说明

定义：
URL参数(也叫查询字符串)指的是在URL地址后面通过?号加上的用于发送给服务器的字符串

格式举例：
1、不带参数的URL
​ http://127.0.0.1:3001/getHeroSkin

2、带一个参数的URL
http://127.0.0.1:3001/getHeroSkin?heroName=白起

3、带多个参数的URL
http://127.0.0.1:3001/getHeroSkin?id=3&heroName=白起

5.URL编码的作用：

为了保证发送给服务器的URL及其参数不会被服务器解析错误。(浏览器会自动对URL进行编码)
在URL地址中，只允许出现英文相关的字母，数字，- _ . ~4个特殊字符以及所有的保留字符。
如果出现了中文，则会对中文进行URL编码
编码语法：

   encodeURI(需要编码的URL字符串);

解码语法：

   decodeURI(编码后的URL字符串);

6. XHR发送POST请求

1. 设置请求方式

XHR.open('POST', 'http://127.0.0.1:3001/addHeroSkin');

2. 设置 Content-Type 类型为application/x-www-form-urlencoded

XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

3. 将参数字符串发送给服务器

XHR.send(参数字符串);

小结:通过XMLHttpRequest对象发送GET和POST请求

1. Ajax的本质
   客户端利用 XMLHttpRequest 对象与 服务器端 进行数据交互

2. URL的参数格式
   ?参数名=参数值&参数名=参数值