ajax和jQuery

Ajax
Web 2.0的特点（所有操作都是在不刷新窗口的情况下完成的）
用户贡献内容
内容聚合RSS
更丰富的“用户体验”
无刷新：不刷新整个页面，只刷新局部
无刷新的好处
只更新部分页面，有效利用带宽
提供连续的用户体验
提供类似C/S的交互效果，操作更方便

传统Web与Ajax的差异
差异 方式 说明
发送请求方式不同 传统Web 浏览器发送同步请求
Ajax技术 异步引擎对象发送请求
服务器响应不同 传统Web 响应内容是一个完整页面
Ajax技术 响应内容只是需要的数据
客户端处理方式不同 传统Web 需等待服务器响应完成并重新加载整个页面后用户才能进行操作
Ajax技术 可以动态更新页面中的部分内容，不影响用户在页面进行其他操作
---------------------XMLHttpRequest
整个Ajax技术的核心
提供异步发送请求的能力
常用方法
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头信息

事件
onreadystatechange：指定回调函数
常用属性
readyState：XMLHttpRequest的状态信息
就绪状态码 说明
0 XMLHttpRequest对象未完成初始化
1 XMLHttpRequest对象开始发送请求
2 XMLHttpRequest对象的请求发送完成
3 XMLHttpRequest对象开始读取响应
4 XMLHttpRequest对象读取响应结束
常用属性（续）
status：HTTP的状态码
状态码 说明
200 服务器正确返回响应
404 请求的资源不存在
500 服务器内部错误
403 没有访问权限
statusText：返回当前请求的响应状态
responseText：以文本形式获得响应的内容
responseXML：将XML格式的响应内容解析成 DOM对象返回

------------------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” );
-------------------GET：

-----------------------POST：

--------------------使用jQuery实现Ajax，jQuery将Ajax相关操作都进行了封装
传统方式实现Ajax的不足
步骤繁琐
方法、属性、常用值较多不好记忆
处理复杂结构的响应数据（如XML格式）比较烦琐
浏览器兼容问题

$.ajax([settings]);---------常用属性参数参数类型说明urlString发送请求的地址，默认为当前页地址typeString请求方式，默认为GETdataPlainObject发送到服务器的数据或String或ArraydataTypeString预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、texttimeoutNumber设置请求超时时间globalBoolean表示是否触发全局Ajax事件，默认为true----------------常用函数参数参数类型说明beforeSendFunction(jqXHRjqxhr,PlainObjectsettings)发送请求前调用的函数successFunction(任意类型result,StringtextStatus,jqXHRjqxhr)请求成功后调用的函数，参数result：可选，由服务器返回的数据errorFunction(jqXHRjqxhr,StringtextStatus,StringerrorThrown)请求失败时调用的函数completeFunction(jqXHRjqxhr,StringtextStatus)请求完成后（无论成功还是失败）调用的函数---------------------$.ajax()
$.ajax( {
“url” : “url”, // 要提交的URL路径
“type” : “get”, // 发送请求的方式
“data” : data, // 要发送到服务器的数据
“dataType” : “text”, // 指定传输的数据格式
“success” : function(result) { // 请求成功后要执行的代码
},
“error” : function() { // 请求失败后要执行的代码
}
} );

$.ajax({
“url”:“UserServlce”,
“type”:“get”,
“data”:“opr=sel”,
“dataType”:“json”,
“success”:function(result){
$(result).each(function(){
$("#box").append("

• "+this.name+"|"+this.age+"
• ");
  });
  },
  “error”:function(){
  alert(“请求异常，请联系管理员”);
  }
  });

  ------------------------JSON
  JSON（JavaScript Object Notation）
  一种轻量级的数据交换格式
  采用独立于语言的文本格式
  通常用于在客户端和服务器之间传递数据
  JSON的优点
  轻量级交互语言
  结构简单
  易于解析
  -----定义json对象：
  var JSON对象 = { “name” : value, “name” : value, …… };
  var person = { “name” : “张三”, “age” : 30, “spouse” : null };

  -----定义json数组：
  var JSON数组 = [ value, value, …… ];
  var countryArray = [ “中国”, “美国”, “俄罗斯” ];
  var personArray = [ { “name”:“张三”, “age”:30 },
  { “name”:“李四”, “age”:40 } ];
  -----访问json属性：
  JSON对象.name

  Java集合转json
  StringBuffer sb=new StringBuffer();
  sb.append("[");
  for (int i=0;i< users.size();i++) {
  sb.append("{");
  sb.append("“name”:""+users.get(i).getName()+"",“age”:""+users.get(i).getAge()+""");
  if(i==users.size()-1){
  sb.append("}");
  }else{
  sb.append("},");
  }
  }
  sb.append("]");