AJAX是什么?
- AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
- AJAX = 异步 JavaScript和XML技术。
- AJAX 是一种独立于 Web 服务器软件的浏览器技术。
AJAX用来做什么?
前端页面向服务器后端请求数据
AJAX用在哪里?
主要在前端开发过程中,需要向服务器请求数据的时候。
AJAX核心?—操作XMLHttpRequest
实现AJAX操作步骤:
- 创建XMLHttpRequest对象
- 打开接口的连接,并发送请求
- 获取服务器返回的数据,DOM操作渲染到我们的网页中
1、创建XMLHttpRequest对象
var _http;//声明一个变量,存放XMLHttpRequest对象
if(window.XMLHttpRequest) {
_http = new XMLHttpRequest();
} else {
//创建IE浏览器中的XMLHttpRequest对象
_http = new ActiveXObject("Microsoft.XMLHTTP");
}
if(window.XMLHttpRequest),是为了防止一些浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件而进行的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以用来判断浏览器是否支持XMLHttpRequest组件.
else,用来判断是否使用IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,而是IE浏览器中专有的属性,可以用于判断浏览器是否支持ActiveX控件.通常只有IE浏览器或以IE浏览器为核心的浏览器才能支持Active控件.
2、打开接口的连接,并发送请求
_http.open(method,URL,flag,name,password);
_http.send();
代码中的参数解释如下所示:
method:指定http的请求的方式,一共有get、post、head、put、delete五种方法,常用的方法为get和post。
URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。
flag:该参数为可选参数,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式,默认为true。
name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。
password:该参数为可选参数,用于输入密码。如果服务器需要验证,则必须使用该参数。
3、获取服务器返回的数据,DOM操作渲染到我们的网页中
_http.onreadystatechange = function() {
if(_http.readyState == 4 && _http.status == 200){
var _content = _http.responseText;//接受数据
console.log(_content);
var _jsonArr = JSON.parse(_content);// 将字符串转换成JSON对象
console.log(_jsonArr);
for(var i = 0; i < _jsonArr.length; i++) {
var _li = document.createElement("li");
_li.textContent = _jsonArr[i].className;
_ct.appendChild(_li);
}
}
}
从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。
⑴未初始化状态。在创建完XMLHttpRequest对象时,该对象处于未初始化状态,此时XMLHttpRequest对象的readyState属性值为0。
⑵初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时,该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。
⑶发送数据状态。在初始化XMLHttpRequest对象后,使用send()方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest对象的readyState属性值为2。
⑷接收数据状态。Web服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest对象处于接收数据状态,XMLHttpRequest对象的readyState属性值为3。
只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态。