Ajax 03.原生Ajax使用|FormData的使用

原生Ajax使用

XMLHttpRequest的基本使用

简称xhr

步骤:1.创建xhr对象

var xhr = new XMLHttpRequest();

2. 调用xhr.open()函数

   如果希望设置get请求的请求参数,需要放置在open()参数2地址的最后位置

   书写格式为:地址?名=值&名=值&…

xhr.open('GET','http://www.liulongbin.top"3006/api/getbooks')

3. 调用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(