Ajax及其应用

一、什么是Ajax？

Ajax(Asynchronous JavaScript and XML):异步的js和XML
是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

组成：js，css，DOM，XMLHttpRequest对象

二、ajax原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

三、 XMLHttpRequest 对象

1. onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。
下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置： 

xmlHttp.onreadystatechange = function() {

//我们需要在这写一些代码}

2.readyState 请求响应过程中的状态码

状态码	含义
0	未初始化
1	正在加载
2	加载完成
3	交互
4	完成

3. responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

document.myForm.time.value = xmlHttp.responseText;

}

三、JSONPlaceholder 基本使用

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

JSONPlaceholder 一共有6种通用资源（Resources）：

URI    Data Size
/posts    100 posts
/comments    500 comments
/albums    100 albums
/photos    5000 photos
/todos    200 todos
/users    10 users
Routes：All HTTP methods are supported. You can use http or https for your requests.

HTTP Methods    URI
GET    /posts
GET    /posts/1
GET    /posts/1/comments
GET    /comments?postId=1
POST    /posts
PUT    /posts/1
PATCH    /posts/1
DELETE    /posts/1