XMLHttpRequest的基本使用

岳泽以

发布于 2022-10-26 17:31:47

4330

发布于 2022-10-26 17:31:47

XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源，jQuery中的Ajax函数就是基于xhr对象封装出来的。

使用xhr发起GET请求

//1.创建XHR对象
var xhr = new XMLHttpRequest()
//2.调用open函数，指定请求方式与URL地址
xhr.open('GET','URL地址')
//3.调用send函数，发起Ajax请求
xhr.send()
//4.监听onreadystatechange事件
xhr.onreadystatechange = function(){
    //4.1 监听xhr对象的请求状态readyState 与服务器响应的状态 status
    if(xhr.readyState === 4 && xhr.status === 200){
        //4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

xhr对象的readyState属性

XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态，每个Ajax请求必然处于以下状态中的一个：

值	状态	描述
0	UNSENT	XMLHttpRequest对象已被创建，但尚未调用open方法
1	OPEND	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，响应头也已经被接受。
3	LOADING	数据接受中，此时response属性中已经包含部分数据
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败

使用xhr发起带参数的GET请求

使用xhr对象发起带参数的GET请求时，只需要在调用xhr.open期间，为URL地址指定参数即可：

xhr.open('GET','htttp://www.abc.com/bcd?id=1')

这种在URL地址后面拼接的参数，叫做查询字符串。

定义：查询字符串（URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）。

格式：将英文的 ？放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用 &符号进行分隔，以这个形式，可以将想要发送给服务器的数据添加到URL中。

使用xhr发起POST请求

//1.创建XHR对象
var xhr = new XMLHttpRequest()
//2.调用open函数
xhr.open('POST','URL地址')
//3.设置Content-Type属性（固定写法）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencodee')
//4.调用send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=三国演义&author=罗贯中')
//5.监听onreadystatechange事件
xhr.onreadystatechange = function(){
    //5.1 监听xhr对象的请求状态readyState 与服务器响应的状态 status
    if(xhr.readyState === 4 && xhr.status === 200){
        //5.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 09 月，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax