XMLHttpResquest的基本使用
什么是XMLHttpResquest
XMLHttpResquest(简称xhr)是浏览器提供的Javascript对象,通过它,可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的。
使用xhr发起GET请求
步骤:
1、创建xhr对象
2、调用xhr.open()函数 (创建请求,在这个函数里写请求方式和请求的url地址)
3、调用xhr.send()函数 (发送请求)
4、监听 xhr.onreadystatechange事件 (在这个事件中可以拿到服务器响应回来的数据)
代码练习:
//1、创建XHR对象
var xhr = new XMLHttpResquest()
//2、调用open函数,指定请求方式与URL地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
//3、调用send函,发起Ajax请求
xhr.send()
//4、监听onreadystatechange事件
xhr.onreadystatechange = function(){
//监听xhr对象的请求状态readyState,和服务器响应状态status
if (xhr.readyState === 4 && xhr.status === 200){ //if小括号里的判断条件是固定写法
//打印服务器响应回来的数据
console.log(xhr.responseText)
}
}
了解xhr对象的readyState属性
XMLHttpResquest对象readyState属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个:
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT | XMLHttpResquest对象已被创建,但尚未调用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')//问号后面就是发送给服务器的参数
代码练习:
var xhr = new XMLHttpResquest()
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')
xhr.send()
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)//只会得到id为1的一条图书信息。
}
}
查询字符串
什么是查询字符串
定义:查询字符串(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请求携带参数的本质
无论使用 . a j a x ( ) , 还 是 使 用 .ajax(),还是使用 .ajax(),还是使用.get(),又或者直接使用xhr对象发起GET请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器的。
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%B8(游)%E8%AE%B0(记)
如何对URL进行编码与解码
- encodeURI()编码的函数,即将中文转化为字符
- decodeURI()解码的函数,即将字符转化为中文
var str = '法外狂徒张三';
var str2 = encodeURI(str);
console.log(str2);
URL编码注意事项
由于浏览器会自动对URL地址进行编码操作,因此,大多数情况下,程序员不关心URL地址的编码与解码操作。
使用xhr发起POST请求
步骤:
1、创建xhr对象
2、调用xhr.open()函数
3、设置Content-Type属性(固定写法)
4、调用xhr.send()函数,同时指定要发送的数据
5、监听xhr.onreadystatechange事件
代码练习:
//1、创建xhr对象
var xhr = new.XMLHttpResquest()
//2、调用open函数
var open('POST','http://www.liulongbin.top:3006/api/addbook')
//3、设置Content-Type属性
xhr.setResquestHeader('Content-Type','application/x-www-form-urlencoded');
//4、调用send函数
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
//5、监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}