Ajax+JSON

Ajax:无刷新:不断刷新整个页面,只刷新局部(只更新部分页面，有效利用带宽，提供连续的用户体验,提供类似C/S的交互效果，操作更方便)

XMLHttpRequest

事件 （onreadystatechange）:指定回调函数

常用属性(readyState):XMLHttpRequest的状态信息

• 整个Ajax技术的核心
• 提供异步发送请求的能力
•  常用方法

方法	说明
0	未初始化
1	开始发送请求
2	请求发送完成
3	开始读取响应
4	读取响应结束

方法	说明
open(String method,String url,boolean asunc, String user,String password)	创建一个新的HTTP请求
send(String data)	发送请求到服务端
abort()	取消当前请求
setRequestHeader(String header,String value)	设置请求的某个HTTP头信息
getRequestHeader(String header)	获取响应的指定HTTP头信息
getAllResponseHeader()	获取响应的所有HTTP头信息

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

常用属性

• status:HTTP状态码
• statusText:返回当前请求的响应状态
• responseText:以文本形式获取响应的内容
• responseXML:将XML格式的响应内容解析成 DOM对象返回

Ajax实现步骤

 创建XMLHttpRequest对象
 通过XMLHttpRequest对象设置请求信息（URL 数据 回调函数）

向服务器发送请求

创建回调函数，根据响应状态动态更新页面

编写服务器端处理客户请求

 

使用Jquery实现Ajax

$.ajax([settings]);

常用属性参数:

参数	类型	说明
url	String	发送请求的地址，默认为当前页地址
type	String	请求方式,默认为GET
data	PlainObject或String 或 Array	发送服务器的数据
data Type	String	预期服务器返回的数据类型 包括:XML,HTML,Script,JSON,JSONP ,Text
timeout	Number	设置请求超时时间

 

 

 

 

 

 

 

 

 

 

常用函数参数

参数	类型	说明
beforeSend	Function()(jqXHR jqxhr, PlainObject  settings)	发送请求前调用函数
success	Function(任意类型  result, jqxhr jqxhr)	请求成功后调用的函数 参数result:可选,有服务 器返回的参数
error	Function(JqXHR  jqxhr, String  textStatus, String  errorThrown)	请求失败时调用的函数
complete	Function(jqXHR   jqxhr, String  textStatus)	请求完成后（无论成功还是失败都调用的函数）

 

 

 

 

 

 

 

 

 

 

 

 

语法:

$.ajax({
         url:'',                      //url地址
         type:'GET',                  //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
         dataType:'json',            //指定为json类型
         data:{},                     //数据参数
         jsonp:'callback',            //服务器端获取回调函数名的key;callback是默认值
         jsonpCallback:'jsonpName',   //回调函数名
         success:function(result){    //成功执行处理，对应后台返回的jsonpName(data)方法
             
         },
         error:function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
       }
     }); 

JSON

JSON(JavaScript  Object  Notation)   

• 一种轻量级的数据交换格式
• 采用独立于语言的文本格式
• 通常用于在客户端和服务器之间传递数据

JSON优点

• 轻量级交互语言
• 结构简单
• 易于解析

定义JSON对象

var JSON对象={"name":value,"name",value,....};

定义JSON数组(两种格式)

var JSON数组 =[value,value,....];            格式一

var JSON数组 =[{"name":"value","name",value,....},{"name":"value","name",value,....}];            格式二

 

Jquery的其他Ajax方法

 

$.get(url[,data][,success][,dataType]);               //get提交方式请求

$.post(url[,data][,success][,dataType]);           //post提交方式请求

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject或String	发送到服务器的数据
success	Function(PlainObject  result, String  textStatus,jqXHR   jqxhr)	请求成功后调用的函数, 参数result:可选,由服务器返回的数据
dataType	String	预期服务器返回的数据类型 包括:XML,HTML,Script JSON,JSONP，text

 

 

 

 

 

 

 

 

 

$.getJSON(url[,data][,success]);

 

使用Ajax直接加载页面内容

.load()

${selector}.load(url[,data][,success][,complete]); 

使用.load()实现异步交互

${selector),load(url,data);