本文最后更新于2021年11月30日，已超过195天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！
好处
- 无刷新：不刷新整个页面，之刷新局部
- 无刷新的好处
- 只更新部分页面，有效利用带宽
- 提供连续的用户体验
- 提供类似C/S的交互效果，操作更方便
传统Web与Ajax的差异
差异 | 方式 | 说明 |
|---|---|---|
发送请求方式不同 | 传统Web Ajax技术 | 浏览器发送同步请求 异步引擎对象发送请求 |
服务器响应不同 | 传统Web Ajax技术 | 响应内容事一个完整的页面 响应内容只是需要的数据 |
客户端处理方式不同传统Web Ajax技术 | 传统Web Ajax技术 | 可以动态更新页面中的部分内容 不影响用户在页面进行其他操作 |
Ajax：异步刷新技术
XMLHttpRequest
- 整个Ajax技术的核心
- 提供异步发送请求的能力
- 常用方法
方法 | 说明 |
|---|---|
open(String method,String url,boolean async,String user,String password) | 创建一个新的HTTP请求 |
send(String data) | 发送当前请求 |
abort() | 取消当前请求 |
- 常用属性
- status：HTTP的状态码
状态码 | 说明 |
|---|---|
200 | 正确返回响应 |
404 | 请求的资源不存在 |
500 | 服务器内部错误 |
403 | 没有访问权限 |
- staatusText:返回当前请求的响应状态
- responseText：以文本形式获得响应的内容
- responseXML：将XML格式的响应内容解析成DOM对象返回
使用Ajax验证用户名
- 使用文本框的onblur时间
- 使用Ajax技术实现异步交互
- 通过XMKLHttpRequest对象
- 通过XMLHttpRequest对象设置请求信息
- 向服务器发送请求
- 创建回调函数，工具响应状态动态更新页面
- 编写服务器端处里客服端请求
$.ajax()简介
- 语法
$.ajax([settings])- 常用属性参数
参数 | 类型 | 说明 |
|---|---|---|
url | String | 发送请求的参数，默认为当前页地址 |
type | String | 请求方式,默认为GET |
data | PlainObject String Array | 发送到服务器的数据 |
data Type | String | 预期服务器返回的数据类型，包括：xml，HTML Script JSON JSONP text |
常用函数参数
参数类型说明beforeSendFunction(jqXHR jqxhr,PlainObject settings)发送请求前调用的函数successFunction(任意类型 result,String textStatus,jqXHR jqxhr)请求成功后调用的函数参数result:可选，由服务器返回的数据。error请求失败的调用函数complete请求完成后调用的函数
认识JSON
JSON
- 一种轻量级的数据交互格式。
- 采用独立于语言的文本的文本格式
- 通常用于在客户端和服务器之间传递数据
- JSON的优点
- 轻量级交互语言
- 结构简答
- 易于解析
定义JOSN
定义JSON对象
语法
代码语言：javascript复制var json对象 = {“name”：value}定义JSON数组
语法
代码语言：javascript复制var JSON数组=[value ,value,....];
