一、认识Ajax
1.1 web2.0的特点
- 用户贡献内容
- 内容聚合RSS
- 更丰富的用户体验
1.2 Ajax的优势
无刷新:不刷新整个业务,只刷新局部
无刷新的好处:
- 只更新部分页面,有效利用带宽
- 提供连续的用户体验
- 提供类似C/S的交互效果,操作更方便
1.3 传统web与Ajax的区别
1.4 Ajax工作流程
二、XMLHttpRequest
步骤:
- 创建XMLHttpRequest对象
- 调用open方法设置请求类型和url
- 调用send方法发送请求参数
- 调用回调函数,根据就绪状态和响应码判断请求响应是否成功
- 如果成功,则解析服务器端相应的数据,对客户端进行动态渲染
- 整个Ajax技术的核心
- 提供异步发送请求的能力
- 常用方法
2.1 事件
onreadystatechange:指定回调函数
2.2 常用属性
readyState:XMLHttpRequest的状态信息
|-----------|---------------------------------|
| 就绪状态码 | 说 明 |
| 0 | XMLHttpRequest****对象未完成初始化 |
| 1 | XMLHttpRequest****对象开始发送请求 |
| 2 | XMLHttpRequest****对象的请求发送完成 |
| 3 | XMLHttpRequest****对象开始读取响应 |
| 4 | XMLHttpRequest****对象读取响应结束 |
status:HTTP的状态码
|---------|---------------|
| 状态码 | 说 明 |
| 200 | 服务器正确返回响应 |
| 404 | 请求的资源不存在 |
| 500 | 服务器内部错误 |
| 403 | 没有访问权限 |
| ... | ...... |
就绪状态是4且状态码是200,表示正确完成
statusText:返回当前请求的响应状态
responseText:以文本形式获得响应的内容
responseXML:将XML格式的相应内容解析为DOM对象
2.3 get请求和post请求的区别
三、使用jQuery实现Ajax
3.1 传统方式实现Ajax的不足
- 步骤繁琐
- 方法、属性、常用值较多不好记忆
- 处理复杂结构的响应数据(如XML格式)比较繁琐
- 浏览器兼容问题
3.2 $.ajax()简介
javascript
$.ajax([settings]);