网站导航:首页-WEB前端/后端-原生JavaScript的ajax请求

原生JavaScript的ajax请求

最近更新:2020-03-10

ajax的全称为Asynchronous JavaScript and XML,中文译为异步的JavaScript和XML,利用ajax可以实现在不刷新页面的前提下向后台发送请求。XML是一种数据交互的格式,但现在更常用的是JSON格式,所以也有少数人将ajax称为ajaj。

创建ajax请求对象及其常用属性

在原生JavaScript中默认自带一个构造函数XMLHttpRequest,可以通过new操作符来定义一个ajax请求对象。但此构造函数在低版本的IE浏览器中不支持,应使用ActiveXObject替代。

创建ajax请求对象

在现代浏览器中,XMLHttpRequest不需要传参,直接使用new XMLHttpRequest()即可返回一个ajax对象,但在低版本IE浏览器中比较复杂,需要传一个参数,而且根据版本的不同需要传的参数也不一样,有的版本传字符串Msxml2.XMLHTTP,有的版本传Microsoft.XMLHTTP,可以看出原生ajax兼容低版本IE还是十分复杂的。我们可以兼容为如下代码:

let xhr;
if(window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
} else if(window.ActiveXObject) {
	try {
		xhr = new ActiveXObject('Msxml2.XMLHTTP');
	} catch () {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
}

XMLHttpRequest.prototype.open(method, url[, async])

此方法规定了请求的类型、URL以及是否异步处理请求。参数中method为请求的类型,可取GETPOSTurl为请求的地址,async为是否异步发送请求,值为true则异步发送请求,值为false则同步发送请求,若省略async则默认异步发送请求

现在的好多浏览器不支持发送同步的ajax请求,所以通常将第三个参数设置为true或省略第三个参数。

XMLHttpRequest.prototype.readyState

此属性的值为数字,0表示请求未初始化,1表示服务器连接已建立,2表示请求以接收,3表示请求处理中,4表示请求已完成且响应已就绪。

当此属性值变化为2或3或4时会触发readystatechange事件。

XMLHttpRequest.prototype.withCredentials

此属性值为布尔值,如为true表示发送请求时将携带cookie,如果为false则发送请求时不携带cookie

当请求地址为同源时,无论此属性值为什么,一律发送cookie

XMLHttpRequest.prototype.status

此属性值为服务器返回的HTTP响应的状态码。

XMLHttpRequest.prototype.statusText

此属性值为服务器返回的HTTP响应的描述。

XMLHttpRequest.prototype.responseText

此属性值为服务器返回的内容。

XMLHttpRequest.prototype.setRequestHeader(header, value)

此方法为请求添加HTTP header。

发送POST请求时,需要手动添加Content-Type请求头。

XMLHttpRequest.prototype.getRequestHeader(header)

返回服务器响应的HTTP header,如果没有找到则返回null。

XMLHttpRequest.prototype.getAllResponseHeaders()

返回服务器响应的所有HTTP header,如果没有找到则返回null。

XMLHttpRequest.prototype.send(data)

执行此方法时发送ajax请求,参数data为请求体中的数据。

通过GET方式请求时,请求参数直接拼接在URL后面即可,通过POST方式请求时,请求参数需要按照Content-Type的格式放在请求体中。

readystatechange事件

当XMLHttpRequest.prototype.readyState值变化为2或3或4时会触发此事件。


原生JavaScript发送ajax请求的举例

// 创建ajax请求对象
let xhr;
if(window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
} else if(window.ActiveXObject) {
	try {
		xhr = new ActiveXObject('Msxml2.XMLHTTP');
	} catch () {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
}
// 处理ajax请求
if(xhr) { // 兼容性处理,如果前面创建成功才继续处理
	xhr.open('GET','./example?name=Rivalsa&age=18', true);
	xhr.send(); // 发送请求
	xhr.addEventListener('readystatechange', () => {
		if (xhr.readyState === 4) { // 请求完成后才继续操作
			if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) { // HTTP状态成功才继续操作
				console.log(xhr.responseText); // 拿到服务器响应的数据
			}
		}
	};
}

(正文完)

如果您认为本文中存在问题或有任何不足之处,欢迎您在Github:Rivalsa/comment中提交issue

到底线啦,请:返回目录页|返回首页