jQuery AJAX操作

jQuery中AJAX操作

同步请求和异步请求:

同步请求: 发送方发出数据后,等接收方回应以后才发下一个数据的通讯方式

异步请求: 发送方发出数据后,不等接收方回应,接着发送下一个数据的通讯方式

区别:

同步:

1. 使用通过单个线程调用服务;该线程发送请求,在服务运行时阻塞,并且等待响应

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()的核心方法