XMLHttpRequest

最新推荐文章于 2023-09-18 15:19:22 发布

木叶二柱子

最新推荐文章于 2023-09-18 15:19:22 发布

阅读量739

点赞数 1

分类专栏： JS学习文章标签： json ajax javascript

本文链接：https://blog.csdn.net/lzy2213811239/article/details/127003792

版权

JS学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Ajax 的核心是 XMLHttpRequest 对象

创建对象

let xhttp = new XMLHttpRequest();

XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

请求

方法	描述
open(method, url, async)	规定请求的类型method：请求的类型：GET 还是 POSTurl：服务器（文件）位置async：true（异步）或 false（同步）
send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST）
onreadystatechange	服务器响应（this）
ontimeout	超时处理

xhttp.open("GET", "url", true);
xhttp.send();

//发送formData -- 对应Postman Body-formdata
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

//发送formData（不用设置Content-Type） -- 对应Postman Body-formdata
xhttp.open("POST", "ajax_test.asp", true);
var fd = new FormData()
fd.append('companyId', '43400051')
xhttp.send(fd);

//发送JSON数据 -- 对应Postman Body-raw-JSON
xhttp.open("post", "http://10.2.112.20:38763/er/atlas/", true);
xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhttp.send(JSON.stringify(
  { companyId: "43400051" }
)); 

//当 readyState 为 4，status 为 200 时
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
		console.log(JSON.parse(this.response))
	}
};
//超时处理
 xhttp.ontimeout = function(event){
     alert('请求超时！')
 }