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);