Ajax(Asynchronous JavaScript and XML),异步JavaScript和XML,是时下最流行的技术。从命名可以看出,Ajax并不是新的技术,而是原有技术的集合。
Ajax的核心技术是xmlHttpRequest。通过xmlHttpRequest可以在不刷新当前页面的情况下向处理页面发送数据,并可以将处理结果输出到页面。
使用Ajax,一般分为一下几步。
(1)首先要创建xmlHttpRequest对象。不同的浏览器,创建xmlHttpRequest对象及使用的方法有一些差别,这里只针对IE浏览器进行创建。代码如下:
var xmlhttp = false; //初始化变量
//如果ActiveXObject存在,说明是IE5.0以上的版本,否则使用XMLHttpRequest创建
if(window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest( );
}
(2)对象创建成功后,就可以使用对象中的open( ) 方法创建新请求了。方法格式如下:
xmlhttp.open(method, rurl, isAsync);
method参数指明请求的方法,如get或post.
rurl参数指明请求的页面,可以是绝对地址,也可以是相对地址。
isAsync参数指明请求是否为异步。默认为True,即异步。
(3)如果isAsync等于True,那么当请求的状态改变时,将调用onreadystatechange属性,该属性制订了一个回调函数,格式如下:
xmlhttp.onreadystatechange = reabackfunc;
(4)在回调函数中,首先需要判断http的请求状态和http状态吗。这是通过readyState属性和status属性来判断的。readyState属性有5种状态值,常用的是4,表示数据接收完毕。status属性的值比较多,常用的是200,表示请求成功。一般这两个属性一起来判断,格式如下:
xmlhttp.onreadystatechange = function(){
if(readystate == 4 and status == 200){
....
}
}
(5)当响应页处理结束后,即满足了“readystate == 4 and status == 200"这个条件,就可以使用xmlhttprequest对象的属性获取响应页的值了。
(6)最后使用send()方法来接收回应。send方法可以传递数据,但这取决于open方法中的rmethod参数,当参数为get时,数据是负载URL中进行传递的。
附1: XMLHTTPRequest对象的属性
属性 | 描述 |
onreadystatechange | 指定当readyState属性变化时应该调用的函数 |
readyState | 请求的状态。整数0表示未初始化,1表示正在载入,2表示已载入,3表示交互,4表示已完成 |
responseText | 包含以字符串形式返回的数据 |
responseXml | 包含以XML格式文档对象返回的数据 |
status | 服务器返回的HTTP状态码,如200 |
statusText | 服务器返回的HTTP状态字符串,如OK |
附2: XMLHTTPRequest对象的方法
方法 | 描述 |
abort( ) | 停止一个请求 |
getAllResponseHeaders( ) | 以字符串的形式返回响应的所有报头 |
getResponseHeader( header) | 以字符串的形式返回响应的报头”header“的值 |
open( 'method', 'URL', 'a') | |
send( content) | 使用POST方法发送该请求,参数为可选 |
setRequestHeader('x', 'y') | 设置一个参数对(x为参数名,y为参数值),并且作为该报头参数发送请求 |
(1)在一个JS文件xmlhttprequestCreate.js中定义创建XMLHTTPRequest对象的函数:
//创建XmlHttpRequest对象
function CreateXmlHttpRequest()
{
var xmlHttp = false;
if(window.XMLHttpRequest) //当前浏览器支持XmlHttpRequest
{
xmlHttp = new XMLHttpRequest(); // 创建XmlHttpRequest对象
}
else if(window.ActiveXObject) //如果XmlHttpRequest对象是ActiveX控件
{
try
{
//尝试使用Msxml2.XMLHTTP来创建XmlHttpRequest对象
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
//尝试使用Microsoft.XMLHTTP来创建XmlHttpRequest对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttp = false; //当前浏览器不支持XmlHttpRequset
}
}
}
return xmlHttp; //返回创建的XmlHttpRequest对象
}
(2)在需要使用Ajax的页面中添加代码:
<script type="text/javascript" src="ajax_1.js"></script>
<script type="text/javascript" language="javascript">
var xmlHttp = false;
function createReq()
{
var url = "AJAX_Server.aspx";
xmlHttp = CreateXmlHttpRequest();
if(!xmlHttp) //创建失败
{
alert("当前浏览器不支持XmlHttpRequest对象,创建失败!");
return;
}
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback; //指定回调函数
xmlHttp.send(); //发送请求
}
function callback() //回调函数,对服务器端的响应处理,监视response状态
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
Display(); //所有状态成功,执行此函数,显示数据
}
else //http返回状态失败
{
alert("服务器端返回状态" + xmlHttp.statusText);
}
}
else //请求状态还没成功,页面等待
{
document.getElementById("myTime").innerHTML="数据加载中...";
}
}
function Display() //接受服务器端返回的数据,对其进行显示
{
document.getElementById("myTime").innerHTML = xmlHttp.responseText;
// document.getElementById("ResText").value = xmlHttp.responseXML;
}
</script>