理解Ajax

田小檬

发布于 2022-08-30 16:11:00

7610

发布于 2022-08-30 16:11:00

文章被收录于专栏：田小檬博客

本文最后更新于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请求完成后调用的函数