jQuery中AJAX操作
同步请求和异步请求:
同步请求: 发送方发出数据后,等接收方回应以后才发下一个数据的通讯方式
异步请求: 发送方发出数据后,不等接收方回应,接着发送下一个数据的通讯方式
区别:
同步:
- 使用通过单个线程调用服务;该线程发送请求,在服务运行时阻塞,并且等待响应
2.如果是使用者在服务运行的过程中阻塞时崩溃了,当它重新启动时,将无法重新连接到正在进行的调用,所以响应丢失了.使用者必须重新调用过程,并且期望这次不会崩溃
异步:
1.使用者通过两个调用服务: 一个线程发送请求,而另一个单独的线程接收响应
2.如果使用者在发送了请求之后等响应是崩溃了,当它重新启动时,可以继续响应,所以响应不会丢失
1、AJAX简介
1.定义: 异步JavaScript及XML(Asynchronous JavaScript And XML).它是一系列交互式网页应用技术的结合体,包含知识有:
1)基于XHTML和CSS标准的表示
2)使用Document Object Model(DOM)进行动态显示和交互
3)使用XMLHttpRequest与服务器进行异步通信
4)使用JavaScript绑定一切
2.AJAX是一种用于创建快速动态网页技术
3.通过在后台与服务器进行少量数据交换,AJAX可以使用网页实现异步更新.这意味着可以在不重新加载整个网页情况下,对网页的某个部分进行更新;而传统的网页(不使用AJAX)如果需要更新内容,必须重载整个页面.
XMLHttpRequest:是AJAX的核心对象,用于实现发送和接收HTTP请求与响应信息
1.open(method,uri,async,[username],[password]) -> 建立到服务器的新请求
method -> 请求方式(get, post , put, delete或head)
uri -> 请求的服务器地址
async -> 设置异步或同步,true(默认)/false
根据需要可传username和password给服务器进行用户验证
2.setRequestHeader(header, value) -> 设置请求的头信息,当readyState 属性值为1时, 可以在调用open()方法后调用这个方法,否则将得到一个异常
3.getResponseHeader() -> 用于检索响应的头部值.但readyState属性值为3或4时,可以调用此方法, 否则返回一个空字符串. 此外还可以通过getAllResponseHeaders()方法获取所有的 HttpRespons的头部信息
4.send([data]) -> 向服务器发送了请求, 若为POST请求,可以通过参数data传递数据给服务器,若不传递参数可以显示的调用send(null),等同于send();
//设置表单传输的编码格式,若为POST传值,这要显示设置
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
application/x-www-form-urlencoded: 标准的编码格式,数据被编码为名称/值对
5.readyState属性 -> 提供当前HTML的就绪状态,有0-4个状态
0: 未初始化状态,创建了XMLHttpRequest对象,但未初始化
1: 准备发送状态,调用了XMLHttpRequest对象的open()方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2: 已发送状态,已经通过send()方法把一个请求发送到服务器端,但还没收到响应
3: 正在接收状态,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到
4: 完成响应状态, 已经完成了HttpRequest响应的接收
6.status属性 -> 返回HTTP状态代码,如200,400. readyState属性值为3或4时才可用
7.statusText属性 -> 返回HTTP状态代码对应的文本如200->ok, 404->Not Found. readyState属性值为3或4时才可用
8.abort() -> 退出当前请求
9.responseText属性 -> 获得字符串形式的响应数据, 但readyState值为4时, 该属性才包含完整的响应信息
10.responseXML属性 -> 获得XML形式的响应数据, 但readyState属性值为4,且响应头部的Content-Type的MIME类型被自动为XML(text/xml或application/xml)时,该属性才有值并且被解析为一个XML文档,否则该属性值为null,如果返回的XML文档结果不良或未完成响应回传,该属性值也会为null
11.onreadystatechange -> 每当readyState属性值发生改变时,就会触发onreadychange事件,一般都通过该事件来触发回传处理函数
2、操作步骤
1.创建XMLHttpRequest对象
function getXmlHttp() {
var xmlHttp;
//检查浏览器是否支持XMLHttpRequest对象
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp ;
}
2.初始化HTTP请求参数(定义open()方法)
3.发送请求(调用send()方法)
4.设置回调函数 -> 判断readyState是否为4以及status是否为200,然后通过responseText或responseXML获取服务器返回的数据
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("result").innerHTML = xmlHttp.responseText ;
}
3、jQuery中AJAX操作
1.$.load()
-> 加载HTML的内容
$("#content").load("loaded.html #s") ;
-> 筛选加载HTML内容
$("#content").load("loaded.html #s") ;
-> 传递参数(get)
$("#content").load("getDate.jsp?num=2&t="+Math.random()) ;
-> 传递参数(post)
$("#content").load("getDate.jsp #n",{num:3}) ;
-> 回调函数
function(data) {}
注：date返回的是HTML文档 alert(date) ;
注: 可以把以上的HTML文档转换为jQuery对象,然后访问HTML文档中的某部分内容,当要注意以下两点:
1)html文档中根据节点使用filter方法获取
2)html文档中子节点使用find方法获取
->回调函数的三个参数
function(responseText,textStatus,XMLHttpRequest) {}
responseText:同上面的data, 请求返回的内容
textStatus:请求的状态, 如success,error,timeout等
XMLHttpRequest:XMLHttpRequest对象
2.$.get()/$.post()
1)$.get(url,[data],[callback],[type])
2)$.post(url,[data],[callback],[type])
url:待载入页面的URL地址(某个servlet程序)
data:待发送 Key/value 参数
callback:载入成功时回调函数(请求成功后[success]才会触发此函数)
type:返回内容格式,xml, html, script, json, text, _default
3.$.ajax() -> 通过HTTP请求加载远程数据
ajax(url,[settings]) -> url: 一个用来包含发送请求的URL字符串
settings: AJAX 请求设置,所有选项都是可选的
4.$.ajaxSetup() -> 设置全局AJAX默认选项
5.$.parseJSON() -> 接收一个JSON字符串,返回解析后的对象,类似于eval（)函数
6.$.getScript()/$.getJSON()
$.getScript():通过 HTTP GET请求载入并执行一个 JavaScript 文件
$.getJSON():通过 HTTP GET 请求载入 JSON 数据
回调函数: 成功载入JSON文件或JSON数据后触发该函数,可使用$.each()方法遍历对象和数组(查看API文档)
语法 -> $.each("数组或对象",回调函数(对象的成员或数组的索引,变量或内容){ })
退出each循环 -> return false ;
7.全局函数
1)ajaxComplete -> AJAX 请求完成时执行函数
2)ajaxError -> AJAX 请求发生错误时执行函数
3)ajaxSend -> AJAX 请求发送前执行函数(有回调函数)
4)ajaxStart -> AJAX 请求发送前执行函数
5)ajaxStop -> AJAX 请求结束时执行函数
6)ajaxSuccess -> AJAX 请求结束时执行函数(有回调函数)
3、jQuery中的AJAX相关工具函数
1.serialize() -> 序列表表格内容为字符串
2.serializeArray() ->序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据
3.$.param() ->将表单元素数组或者对象序列化,是.serialize()的核心方法
