JS----Ajax中XMLHttpRequest常用方法及属性

1. XMLHttpRequest常用方法

一、open();

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

例：

xhr.open('POST', '/carrots-admin-ajax/a/login', true);

参数:

1. method:用于指定请求的类型 "GET"或者"POST"
2. url:用于请求的地址, 可相对可绝对
3. asyncFlag:指定请求方式为同步还是异步, true为异步, false为同步

二、send();

XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只包含头信息，也就是只有一个 URL，典型例子就是 GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

var xhr = new XMLHttpRequest();
var data = 'name=' + userVal + '&pwd=' + pwVal;
xhr.open('POST', '/carrots-admin-ajax/a/login', true);
/* POST的请求头 */
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
/* 发出HTTP请求 */
xhr.send(data);

注意，所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定。（send放在最后）

2. XMLHttpRequest常用属性

一、readyState

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。

• 0：表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
• 1：表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
• 2：表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
• 3：表示正在接收服务器传来的数据体（body 部分）。
• 4：表示服务器返回的数据已经完全接收，或者本次接收已经失败。

二、onreadystatechange

XMLHttpRequest.onreadystatechange属性指向一个监听函数。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

另外，如果使用实例的abort()方法，终止 XMLHttpRequest请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
// 通信成功时，状态值为4
if (xhr.readyState === 4){
	if (xhr.status === 200){
		console.log(xhr.responseText);
	} else {
		console.error(xhr.statusText);
	}
}};
xhr.open('GET', '/endpoint', true);
xhr.send(null);

三、responseText

XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据

四、status

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP

状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

200, OK，访问正常

404, Not Found，未发现指定网址

500, Internal Server Error，服务器发生错误

基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

3. 常见问题

1. 跨域问题
2. 使用post提交的时候需要设置content-type为"application/x-www-form-urlencoded"

4. 解决方案

1. nginx配置跨域
2. 使用post提交的时候需要设置content-type会出错，见demo

5. 编码实战

原生写法

/* 创建实例 */

var xhr = new XMLHttpRequest();

/* 需要发送的数据 */

var data = 'name=' + userVal + '&pwd=' + pwVal;
console.log(data)

/* 指定请求的参数 */
xhr.open('POST', '/carrots-admin-ajax/a/login', true);

/* POST的请求头 */
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

/* 发出HTTP请求 */
xhr.send(data);

$.ajax()写法

var xhr = $.ajax({
	type: 'POST',
	data: {
		name: userVal,
		pwd: pwVal
 	},
	url: '/carrots-admin-ajax/a/login',
	success: function () {
   }
});

$.post()写法

var data = {
	name: userVal,
	pwd: pwVal,
}

console.log(data)

var xhr = $.post('/carrots-admin-ajax/a/login', data, function () {})