原生Ajax使用
XMLHttpRequest的基本使用
简称xhr
步骤:1.创建xhr对象
var xhr = new XMLHttpRequest();
-
调用xhr.open()函数
如果希望设置get请求的请求参数,需要放置在open()参数2地址的最后位置
书写格式为:地址?名=值&名=值&…
xhr.open('GET','http://www.liulongbin.top"3006/api/getbooks')
- 调用xhr.send()函数 ,发送请求,这一步是异步操作
xhr.send()
4.监听 xhr.onreadystatechange 事件
//readayState是xhr的属性,用来表示请求发送的状态
//取值为4代表下载完毕,确保为4才能使用响应的数据
//进一步检测:xhr.status 代表请求是否成功 200代表成功
xhr.onreadystatechange = function(){
//4.1检测xhr.readyState取值和xhr.status取值
if(xhr.readyState===4&&xhr.status===200){
//4.2 接收响应的数据即可
//-原生接收的响应是JSON格式,需要自己转换格式,如果是jQuery 会自动转换
console.log(xhr.responseText);
}
}
带有参数的get请求
- 书写方式:
- 在xhr.open()的参数2url后面书写参数内容
- 名称:参数的形式成为查询字符串
- 格式:?名=值&名=值…
- 其中名= 值&名= 值…成为url编码格式,英文为urlencoded
URL编码与解码
-
URL地址中不允许出现中文,如果URL包含中文,中文部分会被编码转换
-
浏览器会进行自动URL处理,无需操作
-
encodeURI()编码 decodeURI()解码
XMLHttpRequest的post请求
//1. 创建对象
var xhr = new XMLHttpRequest();
//2.调用open
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
//3. 设置Content -Type内容格式(固定写法)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.调用send()
xhr.send('bookname=老人与海&author=海明威');
//5.设置readystatechange事件,接收响应数据
xhr.onreadystatechange = function(