简介
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 是什么？
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种用于创建快速动态网页的技术。
AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。
AJAX 如何工作
AJAX 基于因特网标准
AJAX 基于因特网标准，并使用以下技术组合：
-
XMLHttpRequest 对象（与服务器异步交互数据）
-
JavaScript/DOM（显示/取回信息）
-
CSS（设置数据的样式）
-
XML（常用作数据传输的格式）
示例代码
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>让 AJAX 更改这段文本</h2>
<button type="button" onclick="loadDoc()">更改文本</button>
</div>
</body>
</html>
Function loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://www.liulongbin.top:3006/api/getbooks", true);
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.send();
}
//第一步 先创建一个ajax的核心 XMLHttpRequest
let xhr = new XMLHttpRequerst();
//第二步 使用open 创建请求 第一个参数是请求方式 第二个是请求的地址 第三个是同步或者异步,true为异步
xhr.open('GET',"http://www.liulongbin.top:3006/api/getbooks",true)
xhr.setRequestHeader('') //设置请求头
//第三步 为xhr.onreadystatechange 设置监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if(xhr.status == 200){
alert(xhr.responseTwxt)
//readyState 0 请求未初始化 刚刚实例化XMLHttpRequest
//readyState 1 客户端与服务器建立链接 调用open方法
//readyState 2 请求已经被接收
//readyState 3 请求正在处理中
//readyState 4 请求成功
}
}
}
// 第四步 发送请求数据 调用send 发送请求 如果不需要参数就写一个null
xhr.send(null)
xmlhttp.readyState==4 && xmlhttp.status==200的解释：请求完成并且成功返回
xmlhttp.status的值及解释：
| status | 解释 |
|---|---|
| 100 | 客户必须继续发出请求 |
| 101 | 客户要求服务器根据请求转换HTTP协议版本 |
| 200 | 交易成功 |
| 201 | 提示知道新文件的URL |
| 202 | 接受和处理、但处理未完成 |
| 203 | 返回信息不确定或不完整 |
| 204 | 请求收到，但返回信息为空 |
| 205 | 服务器完成了请求，用户代理必须复位当前已经浏览过的文件 |
| 206 | 服务器已经完成了部分用户的GET请求 |
| 300 | 请求的资源可在多处得到 |
| 301 | 删除请求数据 |
| 302 | 在其他地址发现了请求数据 |
| 303 | 建议客户访问其他URL或访问方式 |
| 304 | 客户端已经执行了GET，但文件未变化 |
| 305 | 请求的资源必须从服务器指定的地址得到 |
| 306 | 前一版本HTTP中使用的代码，现行版本中不再使用 |
| 307 | 申明请求的资源临时性删除 |
| 400 | 错误请求，如语法错误 |
| 401 | 请求授权失败 |
| 402 | 保留有效ChargeTo头响应 |
| 403 | 请求不允许 |
| 404 | 没有发现文件、查询或URl |
| 405 | 用户在Request-Line字段定义的方法不允许 |
| 406 | 根据用户发送的Accept拖，请求资源不可访问 |
| 407 | 类似401，用户必须首先在代理服务器上得到授权 |
| 408 | 客户端没有在用户指定的饿时间内完成请求 |
| 409 | 对当前资源状态，请求不能完成 |
| 410 | 服务器上不再有此资源且无进一步的参考地址 |
| 411 | 服务器拒绝用户定义的Content-Length属性请求 |
| 412 | 一个或多个请求头字段在当前请求中错误 |
| 413 | 请求的资源大于服务器允许的大小 |
| 414 | 请求的资源URL长于服务器允许的长度 |
| 415 | 请求资源不支持请求项目格式 |
| 416 | 请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 |
| 417 | 服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求 |
| 500 | 服务器产生内部错误 |
| 501 | 服务器不支持请求的函数 |
| 502 | 服务器暂时不可用，有时是为了防止发生系统过载 |
| 503 | 服务器过载或暂停维修 |
| 504 | 关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 |
| 505 | 服务器不支持或拒绝支请求头中指定的HTTP版本 |
| 1xx | 信息响应类，表示接收到请求并且继续处理 |
| 2xx | 处理成功响应类，表示动作被成功接收、理解和接受 |
| 3xx | 重定向响应类，为了完成指定的动作，必须接受进一步处理 |
| 4xx | 客户端错误，客户请求包含语法错误或者是不能正确执行 |
| 5xx | 服务端错误，服务器不能正确执行一个正确的请求 |
AJAX - onreadystatechange 事件
onreadystatechange 用于指定XMLHttpRequest对象状态改变时的事件处理函数
每当 readyState 改变时，就会触发 onreadystatechange 事件;
readyState 属性存有 XMLHttpRequest 的状态信息.
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化 |
| 0: 请求未初始化 | |
| 1: 服务器连接已建立 | |
| 2: 请求已接收 | |
| 3: 请求处理中 | |
| 4: 请求已完成，且响应已就绪 | |
| status | 200: “OK” |
| 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪
互联网词语
服务器：上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
客户端：上网过程中，负责获取和消费资源的电脑，叫做客户端。
URL地址：
URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源
URL地址一般由三部组成：
① 客户端与服务器之间的通信协议
② 存有该资源的服务器名称
③ 资源在服务器上具体的存放位置
资源的请求方式：
客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求；
1.get 请求通常用于获取服务端资源（向服务器要资源）
例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等
2.post 请求通常用于向服务器提交数据（往服务器发送资源）
例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作
jQuery中的ajax
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下：
- $.get()
- $.post()
- $.ajax()
$.get()函数的语法
jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。
$.get() 函数的语法如下：
$.get(url, [data], [callback])
其中，三个参数各自代表的含义如下：
| 参数名 | 参数类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 要请求的资源地址 |
| data | object | 否 | 请求资源期间携带的参数 |
| callback | function | 否 | 请求成功时的回调函数 |
使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可，示例代码如下：
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
console.log(res) // 这里的 res 是服务器返回的数据
})
使用 $.get() 函数发起带参数的请求时，示例代码如下：
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) {
console.log(res)
})
$.post()函数的语法
jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。
$.post() 函数的语法如下：
$.post(url, [data], [callback])
其中，三个参数各自代表的含义如下：
| 参数名 | 参数类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 提交数据的地址 |
| data | object | 否 | 要提交的数据 |
| callback | function | 否 | 数据提交成功时的回调函数 |
使用 $post() 向服务器提交数据的示例代码如下：
$.post('http://www.liulongbin.top:3006/api/addbook',
{
bookname: '水浒传',
author: '施耐庵',
publisher: '上海图书出版社'
},
function(res) { // 回调函数
console.log(res)
})
$.ajax()函数的语法
相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。
$.ajax() 函数的基本语法如下：
$.ajax({
type: '', // 请求的方式，例如 GET 或 POST
url: '', // 请求的 URL 地址
data: { },// 这次请求要携带的数据
success: function(res) { } // 请求成功之后的回调函数
})
使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 ‘GET’ 即可
$.ajax({
type: 'GET', // 请求的方式
url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的 URL 地址
data: { id: 1 },// 这次请求要携带的数据
success: function(res) { // 请求成功之后的回调函数
console.log(res)
}
})
使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 ‘POST’ 即可：
$.ajax({
type: 'POST', // 请求的方式
url: 'http://www.liulongbin.top:3006/api/addbook', // 请求的 URL 地址
data: { // 要提交给服务器的数据
bookname: '水浒传',
author: '施耐庵',
publisher: '上海图书出版社'
},
success: function(res) { // 请求成功之后的回调函数
console.log(res)
}
})
接口的概念
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
例如：
http://www.liulongbin.top:3006/api/getbooks //获取图书列表的接口(GET请求)
http://www.liulongbin.top:3006/api/addbook //添加图书的接口（POST请求）
接口文档
接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
接口文档的组成部分
接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：
- 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
- 接口URL：接口的调用地址。
- 调用方式：接口的调用方式，如 GET 或 POST。
- 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
- 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
- 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
