JQuery实践--Ajax
- Ajax概览
无需刷新用户页面而发起服务器请求的技术。
创建一个XHR实例:
var xhr
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
}
else if (window.ActiveXObject){
xhr = new ActiveXObject("Msxml12.XMLHTTP")
}
else{
throw new Error("Ajax is not support")
}
XHR实例 方法和属性
abort() 导致当前正在执行的请求被取消 getAllResponseHeaders() 返回一个字符串。包含所有响应标头的名称和值 getResponseHeader(name) 返回指定的响应头的值 open(method,url,async,username,password) 设置请求的方法和目标URL send(content) 发起带有指定的体内容的请求 setRequestHeader(name,value) 设置请求头 onreadystatechange 请求的状态发生变化时所使用的事件处理函数 readystate 请求的状态:
0:未初始化
1:正在加载
2:已加载
3:交互
4:完成responseText 响应返回的体内容 responseXML xml格式时,根据体内容创建的XML DOM status 服务器返回的响应状态码。200,404. statusText 响应返回的状态文本消息
发起请求前: xhr.open('GET',url)
设置通报进展处理函数:xhr.onreadystatechange = function(){xhr.readystate
发起请求:xhr.send(null)==》POST请求的话,需要设置请求体:‘a=1&b=2’
获得响应: xhr.responseText - 从服务器加载预格式化的HTML
Ajax最为常见的用途之一就是从服务器获取一大块的内容并填充到DOM里某个战略位置上。
向指定的URL发起ajax请求,响应文本替换所有已匹配元素的内容 laod(url,parapaters,callback) 字符串,服务器url
paramaters:对象,省略为GET,指定为POST。属性被序列化为请求参数
cb:响应数据被加载到包装集元素之后被调用
参数: 响应文本,状态码,XHR实例包装集 如果想要发送带参数的GET,参数作为查询字符包含在URL中
对作为响应而返回的元素进行筛选。 通过在URL添加空格和# 作为后缀来完成。
$(',injectMe').load('/someResouce #div')把包装集里所有的成功表单元素,创建正确格式化的,经过URI编码的查询字符串 serialize() 已格式化的字符串 只包含成功的表单元素:未选中的复选框,单选按钮,未选择的下拉列表,已禁用的 都不包含 以javascript数组形式获取表单数据 serializeArray() 表单数据的数组
[{name:value},...]发送GET请求 (实用工具函数) $.get(url,paramaters,callback)
paramaters:查询参数
请求完成时被调用。参数:响应体,响应状态XHR实例 获取JSON数据GET请求 (实用工具函数) $.getJSON(url,paramaters,callback) 响应体解析为JSON字符串作为回调第一个参数 XHR实例 发生POST命名 (实用工具函数) $.post(url,paramaters,cb) cb:参数:响应体,状态码 XHR实例 利用已传递的选项,来发起Ajax请求 $.ajax(options) options 参数:
url: 请求URL
type: 字符串: POST, GET ==>default
data: 对象,属性作为查询参数而传递给请求
dataType:字符串,标识预期将被响应返回的数据类型: xml,html,json,jsonp,script,text
timeout:超时时间,毫秒
global: bool. 启用或禁用所谓全局函数触发.这些函数可以附加到元素上,并且在Ajax调用的不同时刻或状态下触发。
contentType: 字符串 。将要在请求上指定的内容类型。default:application/x-www-form-urlencoded
success:函数 如果请求的响应指示成功状态码,则这个函数被调用。
参数:响应体 (格式为dataType),状态码(成功状态)
error: 函数: 参数:XHR实例,状态消息字符串,XHR实例返回的异常对象
complete: 函数。请求完成时,调用.
参数:XHR实例和状态消息字符串
beforeSend: 函数. 发起请求之前被调用。
参数:XHR实例。可以在这里设置标头和预请求操作
asyn: bool。 同步还是异步
processData: bool. false:阻止已传递数据被加工为URL编码格式.默认为true
ifModified: bool. true: 自从上一次请求以来,只有在响应内容没有改变的情况下 (Last-Modified标头)才允许请求成功。省略则不执行标头检查XHR实例 设置一组默认的Ajax属性,为后续$.ajax调用 $.ajaxSetup(properties) 定义一组默认的Ajax属性
设置的属性不会英语到 load命令上
$.get和¥。post 还是发送各自的get 或post请求
- 发起通用的GET和POST
$.get,$.post - 发起带有细化控制的请求
$.ajax - 设置默认的Ajax属性
$.ajaxSetup - 全局函数
jQuery允许我们把函数附加到特定的DOM元素,这些函数在ajax请求处理的不同阶段或在请求最终成功或失败时将被触发。
$('selector').ajaxError(reportError)
当这个或任何其他全局函数被调用时,传递给回调函数的第一个参数由Javascript的Object实例构成:
属性:
1。 type:全局函数的类型的字符串:e.g ajaxError
2. target: DOM元素的引用
这个构造称为全局回调信息对象:一些全局函数类型被传递附加参数,这个共同的第一个参数可以用来标识什么全局函数类型触发了回调函数以及全局函数被附加到哪一个元素上。
这些全局回调函数的每一个都在Ajax请求的处理期间的特性时刻被调用
ajaxStart(cb) 参数:ajaxStart的全局回调信息对象 Ajax函数或命令发起时,但在XHR实例被创建前 ajaxSend(cb) 参数: ajaxSend的全局回调信息对象,XHR实例,$.ajax()函数使用的属性 XHR实例被创建后,但在XHR实例被发送给服务器之前 ajaxSuccess(cb) 参数:ajaxSuccess的全局回调信息对象,XHR实例,$.ajax()函数使用的属性 在请求已从服务器返回之后,并且响应包含成功状态码 ajaxError(cb) 参数:ajaxError的全局回调信息对象,XHR实例,$.ajax()函数使用的属性,被XHR实例返回的异常对象 在请求已从服务器返回之后,并且响应包含失败状态码 ajaxComplete(cb) 参数:ajaxComplete的全局回调信息对象,XHR实例,$.ajax()函数使用的属性 在请求已从服务器返回之后,并且在任何已声明的ajaxSuccess或ajaxError回调函数已被调用之后 ajaxStop(cb) 参数:ajaxStop的全局回调信息对象, 所有其他Ajax处理完成一件任何其他使用的全局回调函数已被调用之后