1.Ajax
只更新部分页面，有效利用带宽
提供连续的用户体验
提供类似C/S的交互效果，
操作更方便
2.传统Web与Ajax的差异
|---------------|----------------|---------------------------------------|
| 差异 | 方式 | 说 明 |
| 发送请求方式不同 | 传统****Web | 浏览器发送同步请求 |
| 发送请求方式不同 | Ajax****技术 | 异步引擎对象发送请求 |
| 服务器响应不同 | 传统****Web | 响应内容是一个完整页面 |
| 服务器响应不同 | Ajax****技术 | 响应内容只是需要的数据 |
| 客户端处理方式不同 | 传统****Web | 需等待服务器响应完成并重新加载整个页面后用户才能进行操作 |
| 客户端处理方式不同 | Ajax****技术 | 可以动态更新页面中的部分内容 不影响用户在页面进行其他操作 |
3.XMLHttpRequest常用方法
|-------------------------------------------------------------------------------------------------------------|----------------------------|
| 方 法 | 说 明 |
| open( String method, Stringurl,boolean async, String user, String password**)** | 创建一个新的HTTP请求 |
| send( String data ) | 发送请求到服务器端 |
| abort( ) | 取消当前请求 |
| setRequestHeader**( String header, String value )** | 设置请求的某个HTTP头信息 |
| getResponseHeader**( String header )** | 获取响应的指定HTTP头信息 |
| getAllResponseHeader**( )** | 获取响应的所有HTTP头信息 |
4.XMLHttpRequest事件
传统Web与Ajax的差异onreadystatechange：指定回调函数
常用属性
readyState：XMLHttpRequest的状态信息
|-----------|---------------------------------|
| 就绪状态码 | 说 明 |
| 0 | XMLHttpRequest****对象未完成初始化 |
| 1 | XMLHttpRequest****对象开始发送请求 |
| 2 | XMLHttpRequest****对象的请求发送完成 |
| 3 | XMLHttpRequest****对象开始读取响应 |
| 4 | XMLHttpRequest****对象读取响应结束 |
5.get请求和post请求的区别
|-----------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 步 骤 | 请求方式 | 实 现 代 码 |
| 初始化组件 | GET | xmlHttpRequest.open**( "GET",url, true );** |
| 初始化组件 | POST | xmlHttpRequest.open**( "POST",url, true );** xmlHttpRequest .setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); |
| 发送请求 | GET | xmlHttpRequest.send**(null);** |
| 发送请求 | POST | xmlHttpRequest.send**(** "key=xxx&type=12&year=2016"****); |
- 使用jQuery实现Ajax
传统方式实现Ajax的不足
步骤繁琐
方法、属性、常用值较多不好记忆
处理复杂结构的响应数据（如XML格式）比较烦琐
浏览器兼容问题
7.使用$.ajax()发送请求
$.ajax( {
"url" : "url", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"success" : function(result) { // 请求成功后要执行的代码
},
"error" : function() { // 请求失败后要执行的代码
}
} );
8.定义JSON对象
var JSON对象 = { "name" : value, "name" : value, ...... };
var person = { "name" : "张三", "age" : 30, "spouse" : null };
9.jQuery中的Ajax方法
$.ajax()
$.get()
$.post()
$.getJSON()
.load()
......
可以省略对应的一部分