一、什么是AJAX

AJAX是”Asynchronous JavaScript and XML”的缩写,它是指一种创建交互式网页应用的网页开发技术,即异步的JavaScript和XML,是一种用于创建快速动态网页的技术。传统的网页(不使用Ajax)如果需要更新内容,需要重载整个网页面,使用AJAX则不需要加载更新整个网页,实现部分内容更新。

二、为什么要使用AJAX

Ajax主要是实现页面和web服务器之间数据的异步传输。

不使用Ajax

1,简单来说不采用Ajax的页面,当用户在页面发起请求时,就要进行整个页面的刷新,刷新的快慢取决于服务器的处理快慢,在这个过程中用户就得等待,不能进行其他操作,也就是同步的方式。

2,客户端和服务端传递了很多不需要的数据,使得效率低,用户体验差。

使用Ajax的好处

1,采用了Ajax的页面,可以实现页面的局部更新,而不是整个页面的更新。

2,在用户发起请求后,用户还可以进行页面上的其他操作,也就是异步的方式。

3,客户端和服务端间只传递需要的数据,效率高,用户体验性好。

4,Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。

三、AJAX的工作原理

Ajax的核心是JavaScript对象XMLHttpRequest,也就是Ajax功能实现所依赖的对象,Ajax就是通过浏览器的内置对象XMLHttpRequest来发送异步请求的。

XMLHttpRequest常用方法属性

1,open()(String methods, String url, Boolean async, String username, String password)

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

2,send(content)

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

POST的请求头

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

onreadystatechange:请求状态改变的事件触发器(readyState变化时会调用此方法),一般用于指定回调函数。

readyState:请求状态readyState一改变,回调函数被调用,他有五个状态

0:未初始化

1:open方法成功调用之后。

2:服务器已经应答客户端的请求。

3:交互中,Http头信息已经接收,响应数据尚未接收。

4:完成,数据接受完成。

responseText:服务器返回的文本内容

responseXML:服务器返回的兼容DOM的XML内容

status:服务器返回的状态码

四,Ajax的实现流程

1,创建XMLHttpRequest对象,也就是创建一个异步调用对象。

2,创建一个新的HTTP请求,并指定该HTTP请求的方法,URL以及验证信息。

3,设置响应HTTP请求状态变化的函数。

4,发送HTTP请求。

5,获取异步调用返回的数据。

6,使用JavaScript和DOM实现局部刷新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//1,创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2,设置请求方式和请求地址
xhr.open('get', 'http://localhost:4000/first');
//3,如果发送的是post,还需要设置请求参数的格式
//xhr.setRequestHeader('Content-Type', 'application/json')
//4,设置发送内容并发送该请求
xhr.send(JSON.stringfiy({name: 'Daisy'}));
//5,监听AJax的请求状态
xhr.onreadystatechange = function(){
//5.1 判断响应报文,为4则表明客户端已经拿到并解析出了结果
if(xhr.readyState == 4){
//5.2 判断响应报文的状态,如果是200,则表明本次请求是成功的
if(xhr.status == 200){
//6,拿到服务器返回的数据
var data = xhr.responseText;
}
}
}