Ajax与jQuery

1.Ajax
只更新部分页面，有效利用带宽
提供连续的用户体验
提供类似C/S的交互效果，
操作更方便

2.传统Web与Ajax的差异

差异	方式	说      明
发送请求方式不同	传统Web	浏览器发送同步请求
	Ajax技术	异步引擎对象发送请求
服务器响应不同	传统Web	响应内容是一个完整页面
	Ajax技术	响应内容只是需要的数据
客户端处理方式不同	传统Web	需等待服务器响应完成并重新加载整个页面后用户才能进行操作
	Ajax技术	可以动态更新页面中的部分内容 不影响用户在页面进行其他操作

 3.XMLHttpRequest常用方法

方     法	说      明
open( String method,  String url,   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" );

6. 使用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()
……
可以省略对应的一部分