什么是XMLHttpRequest?
XMLHttpRequest(简称xhr)是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源。jQuery中的Ajax函数,就是基于xhr对象封装出来的。
使用xhr发起GET请求:
1.创建xhr对象
2.调用xhr.open()函数
3.调用xhr.send()函数
4.监听xhr.onreadystatechange事件
了解xhr对象的readyState属性
XMLHttpRequest对象的readyState属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态下的一个:
0:状态 UNSENT,XHLHttpRequest对象已被创建,但尚未调用open()方法。
1:状态 OPENED,open()方法已经被调用。
2:状态 HEADERS_RECEIVED,send()方法已经被调用,响应头也已经被接收。
3:状态 LOADING,数据接收中,此时response属性中已经包含部分数据。
4:状态 DONE,Ajax请求完成,这意味着数据传输已经彻底完成或失败。
使用xhr发起带参数的GET请求
使用xhr对象发起带参数的GET请求时,只需在调用xhr.open期间,为URL地址指定参数即可:
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')
这种在URL地址后面拼接的参数,叫做查询字符串。
查询字符串
什么是查询字符串
定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。
格式:将英文的?放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用&符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到URL中。
//不带参数的URL地址
http://www.liulongbin.top:3006/api/getbooks
//带一个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1
//带两个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
GET请求携带参数的本质
无论使用$.ajax(),还是使用$.get(),又或者直接使用xhr对象发起GET请求,当需要携带参数的时候,本质上都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器的。
$.get('url',{name:'zs',age:20},function(){}
//等价于 $.get('url?name=zs&age=20',function(){})
$.ajax({method:'GET',url:'url',data:{name:'zs',age:20},success:function(){}})
//等价于 $.ajax({method:'GET',url:'url?name=zs&age=20',success:function(){}}}
URL编码与解码
什么是URL编码
URL地址中,只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。
如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)。
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。
URL编码原则的通俗理解:使用英文字符去表示非英文字符。
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
//经过URL编码之后,URL地址变成了如下格式:
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%E8%AE
%B0
如何对URL进行编码与解码
浏览器提供了URL编码与解码的API,分别是:
encodeURI()编码的函数
decodeURI()解码的函数
console.log(encodeURI('王一博'));
//输出结果 %E7%8E%8B%E4%B8%80%E5%8D%9A
console.log(decodeURI('%E8%82%96%E6%88%98'));
//输出结果 肖战
使用xhr发起POST请求
步骤:
1.创建xhr对象
2.调用xhr.open()函数
3.设置Content-Type属性(固定写法)
4.调用xhr.send()函数,同时指定要发送的数据
5.监听xhr.onreadystatechange事件
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.调用open
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
//设置Content—type属性(固定写法)post
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//3.调用send(数据)
xhr.send('bookname=失恋日记&author=郑非非&publisher=非主流出版社');
//4.设置监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};