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请求基本步骤
- 创建XHR对象
- 设置请求方式,请求地址
- 发送请求
- 接收服务器响应回来的数据
参考代码
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请求
- 设置请求方式
XHR.open('POST', 'http://127.0.0.1:3001/addHeroSkin');
- 设置 Content-Type 类型为application/x-www-form-urlencoded
XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
- 将参数字符串发送给服务器
XHR.send(参数字符串);
小结:通过XMLHttpRequest对象发送GET和POST请求
-
Ajax的本质
客户端利用 XMLHttpRequest 对象与 服务器端 进行数据交互 -
URL的参数格式
?参数名=参数值&参数名=参数值