AJAX 异步传输的WEB模式
发布时间:2020-12-16 00:51:16 所属栏目:百科 来源:网络整理
导读:如果有这么一种需求,即希望在不更新页面的情况下与服务器端进行数据交互,并且你的行为能够实时得到相应,那么就可以使用这篇博文要介绍的技术。 AJAX指异步JavaScript及XML(Asynchronous JavaScript And XML)。 AJAX是一种在2005年由Google推广开来的编
如果有这么一种需求,即希望在不更新页面的情况下与服务器端进行数据交互,并且你的行为能够实时得到相应,那么就可以使用这篇博文要介绍的技术。 AJAX指异步JavaScript及XML(Asynchronous JavaScript And XML)。 AJAX是一种在2005年由Google推广开来的编程模式,不是一种新的编程语言,而是一种使用现有标准的新方法。 通过AJAX,你的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,你的JavaScript可在不重载页面的情况与Web服务器交换数据。 AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
Ajax的核心是JavaScript对象XmlHttpRequest,用于在后台与服务器交换数据。 XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户,即实现异步请求。 几乎所有的浏览器(IE7+、Firefox、Chrome、Safari、Opera)都支持XMLHttpRequest对象(IE5和IE6使用的是ActiveXObject)。
下面就来学习一下这一编程模式。 1. 创建XmlHttpRequest对象: 下面是一个XmlHttpRequest对象的创建方法,
2 |
function GetXmlHttpObject() |
4 |
varxmlHttp= null ; |
6
{ |
8
newXMLHttpRequest(); |
10
catch(e) |
11 |
12 |
//Internet Explorer |
13 |
14 |
15 |
ActiveXObject("Msxml2.XMLHTTP" ); |
16
} |
18
19 |
"Microsoft.XMLHTTP"20 |
21 |
22 |
returnxmlHttp; |
2. 向服务器端发送请求:
刚才创建了过XHR对象,现在就利用它向服务器端发生请求。
xmlHttp.open("GET"
,url,
true
xmlHttp.send();
3. 获取来自服务器的响应:
来自服务器的响应有两种形式:字符串类型responseText和xml类型responseXML。
这里只说第一种,利用这一句就把服务器响应的内容传回到当前页面。
4. onreadystatechange事件:
readyState属性存有XMLHttpRequest的状态信息,从0到4共五种状态。每当readyState改变时,就会触发onreadystatechange事件,即调用对应的函数。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪