AJAX及其相关应用

1、AJAX的相关定义

AJAX全称为AsynchronousJavaScript and XML，即异步的JavaScript和XML。值得注意的是，AJAX不是一个新的编程语言，而是对前端和后端进行数据、文本传递的一种技术。

简单理解即是：前后端传输数据场景下使用的数据。

主要通过与服务器进行少量数据交换，Ajax可以使网页实现异步更新。根据异步可以了解到运用AJAX之后可以在不重新加载整个网页的情况下，对网页进行部分更新。例如我们在淘宝网站购物刷新时，只对部分商品进行更新。

2、AJAX工作原理分析

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。

AJAX的工作原理主要如下：

1、当浏览器确定发生某一事件之后，由浏览器创建一个XMLHttpRequest对象；

2、并发送XMLRequest，在发送的这一请求中，需要指定该HTTP请求的方法、URL以及验证信息；

3、通过Internet向浏览器发送数据，服务器接收后对接收到的HttpRequest进行处理，并根据不同的请求创建响应，将数据返回到浏览器；

4、在通过Internet将数据传回到浏览器中，浏览器使用JS来处理回传的数据，并对页面进行更新。

3、XMLHttpRequest对象

3.1XMLHttpRequest对象的常用属性

3.1.1onreadystatechange

用于指定状态改变时所触发的事件处理器。

3.1.2 readyState

用于获取请求状态的属性。

当一个XMLHttpRequest对象被创立后，readyState属性标示了当前对象处于什么状态，可以通过对该属性的访问，来判读此次请求的状态然后做出相应的操作。

case 0 :未初始化状态，此时，已经创建了一个XMLHttpRequest对象，但是还没有初始化。

Case 1:准备发送状态：此时，已经调用了XMLHttpRequest对象的open()方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器。

case 2：已发送状态，此时已经通过send方法把一个请求发送到服务器，等待响应。

case 3:正在接收状态，此时已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到。

case 4:完成响应状态，此时已经完成了HttpResponse响应的接收。

3.1.3 responseText

用户获取服务器相应的属性。

当readyState的值为0、1、2时，responseText为空字符串；当readyState的值为3时，responseText为还未完成的响应信息；当readyState的值为4时，responseText为响应信息。

3.1.4 responseXML

用于当接收到完整的HTTP响应(readyState的值为4)时描述XML响应，若readyState的值不为4，它取值为null。

3.1.5 status

用于描述HTTP状态代码的属性。仅当readyState的值为3或4时，status属性才可用。

3.2 XMLHttpRequest对象的常用方法

3.2.1 open()

open("method","URL"[,asyncFlag[,"username"[,"password"]]])

method用于指定请求类型GET or POST；

URL 用于指定请求地址，可以使用相对地址和绝对地址，并且可以传递查询字符串；

asyncFlag可选参数，用于指定请求方式，异步请求为true，同步请求为false；

username可选参数，用于指定请求的用户名，没有时可省略；

password可选参数，用于指定请求密码，没有时可省略；

例如：oReq.open("GET","http://www.example.org/example.txt");

4、JSONPlaceholder 基本使用

SONPlaceholder 是一个提在线 REST API 的网站，我们在开发时可以使用它获取一些假数据、假图片。其返回的数据为 JSON 格式，且同时支持 HTTP 和 HTTPS 这两种请求类型。