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:'jsonp',            //指定为jsonp类型
         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);

猜你喜欢