ajax报错只支持跨源请求,什么是AJAX?AJAX步骤及XMLHttpRequest对象介绍

一、什么是AJAX?

用户在浏览器地址栏键入一个网址或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求，AJAX是指允许脚本向服务器发起HTTP请求。

AJAX包括四个步骤，具体如下：

1、创建AJAX对象

2、发出HTTP请求

3、接收服务器传回的数据

4、更新网页数据

概括起来就是AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。

AJAX可以是同步请求，也可以是异步请求。但是，大多数情况下，特指异步请求。因为同步的Ajax请求，对浏览器有“堵塞效应”

二、XMLHttpRequest对象

XMLHttpRequest对象用来在浏览器与服务器之间传送数据

var ajax = new XMLHttpRequest();

ajax.open('GET','https://www.example.com/page.php',true);

上面代码向指定的服务器网址，发出GET请求。

然后，AJAX指定回调函数，监听通信状态(readyState属性)的变化。

ajax.onreadystatechange = handleStateChange;

一旦拿到服务器返回的数据，AJAX不会刷新整个网页，而是只更新相关部分，从而不打断用户正在做的事情。

注意，AJAX只能向同源网址(协议、域名、端口都相同)发出HTTP请求，如果发出跨源请求，就会报错。

虽然名字里面有XML，但是XMLHttpRequest可以报送各种数据，包括字符串和二进制，而且除了HTTP，它还支持通过其他协议传送(比如File和FTP)

1、XMLHttpRequest对象的典型用法

var xhr = new XMLHttpRequest();

//指定通信过程中状态改变时的回调函数

xhr.onreadystatechange = function(){

//通信成功时，状态值为4

if(xhr.readyState === 4){

if(xhr.status === 200){

console.log(xhr.responseText);

}else{

console.log(xhr.statusText);

}

}

};

xhr.onerror = function(e){

console.error(xhr.statusText);

};

//open方式用于指定HTTP动词、请求的网址、是否异步

xhr.open('GET','/endpoint',true);

//发出HTTP请求

xhr.send(null);

2、readyState:是一个只读属性，用一个整数和对应的常量，表示XMLHttpRequest请求当前所处的状态

0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。

1，对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。

2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。

3，对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。

4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。在通信过程中，每当发生状态变化时，readyState属性的值就会发生改变。这个值每一次变化，都会触发readyState事件。