学习Ajax技术

来源：互联网发布：怎样装饰淘宝店铺2016 编辑：程序博客网时间：2024/05/01 19:51

(1)什么是Ajax?

答:Ajax是JavaScript,XML,CSS,DOM 等多种已有技术的组合,可以实现客户端的异步请求操作,这样可以实现在不需要刷新页面的情况下与服务器进行通信,从而减少了用户的等待时间.

(2)Ajax的开发模式与传统的Web模式

i)在Ajax中,页面中用户的操作将通过Ajax引擎与服务器端进行通信,然后将返回结果提交给客户端页面的Ajax引擎,在由Ajax引擎来决定将这些数据插入页面的指定位置.

ii)传统的Web应用模式,页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面给客户端浏览器.

(3)对XMLHttpRequest的认识

XMLHttpRequest是Ajax中最核心的技术,它是一个具有应用程序接口的JavaScript对象,能够使用超文本传输协议(HTTP)连接一个服务器,是微软公司为了满足开发者的需求.

使用XMLHttpRequest对象,Ajax可以像桌面应用程序一样只通服务器进行数据层面的交换,而不用每次都刷新页面,也不用每次都将数据处理的工作交给服务器来做,这样既减轻了服务器的负担又加快了响应速度,缩短了用户等待的时间.

(4)怎样使用XMLHttpResquest对象.

i)首先需要初始化对象,由于XMLHttpRequest不是一个W3C标准,所以对于不同的浏览器,初始化得方法也不同.

IE浏览器把XMLHttpRequest实例化一个ActiveX对象.具体方法如下:

var http_request = new ActiveXObject("Msxm12.XMLHTTP");

或者

var http_request = new ActiveXObject("Microsoft.XMLHTTP");

其他浏览器把它实例化为一个本地JavaScript对象.具体方法如下:

var http_request = new XMLHttpRequest();

ii)了解XMLHttpRequest对象的常用方法和属性

XMLHttpRequest对象不同浏览器上的实例是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,不需要考虑创建该实例的方法.

open()方法

open()方法用于设置进行异步请求目标的URL,请求方法以及其他参数信息.

语法:open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

参数method用于指定请求的类型,一般为get或post;URL用于指定请求地址,也可以使用绝对地址或者相对地址,并且可以传递查询字符串;asyncFlag为可选参数,用于指定请求方式,同步请求为true,异步请求为false,默认为true.

send()方法

send()方法用于向服务器发送请求,如果请求声明为异步,该方法将立即返回,否则将等到接收到响应时为止.

语法:send (content)

参数content用于指定发送的数据,可以是DOM对象的实例,输入流或字符串,如果没有参数传递可以设置为null.

setRequestHeader()方法

setRequestHeader()方法为请求的HTTP头设置值.

语法setRequestHeader("label","value")

参数label用于指定HTTP头,value用于为指定的HTTP头设置值.

abort()方法

abort()方法用于停止当前的异步请求.

getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息,当存在参数时,表示以字符串形式返回由该参数指定的HTTP头信息.

iii)XMLHttpRequest对象与服务器交互

XMLHttpRequest对象最大的用途就是不需要刷新页面就可以与服务器进行交互.可以将Ajax与服务器的交互分为以下3个步骤:

(1)初始化XMLHttpRequest对象.

(2)设置请求状态和返回处理函数.

(3)发送HTTP请求.

引用网上一个实例: 通过DIV标签输出请求HTML页面.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过XMLHttpRequest对象读取HTML文件，并且输出读取结果</title>
</head>
<script>
var xmlHttp; //定义XMLHttpRequest对象
function createXmlHttpRequestObject(){
//如果在internet Explorer下运行
if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp=false;
}

}else{
//如果在Mozilla或其他的浏览器下运行
try{
xmlHttp=new XMLHttpRequest();
}catch(e){
xmlHttp=false;
}
}
//返回创建的对象或显示错误信息
if(!xmlHttp)
alert("返回创建的对象或显示错误信息");
else
return xmlHttp;
}
function ReqHtml(){
createXmlHttpRequestObject();
xmlHttp.onreadystatechange=StatHandler;//判断URL调用的状态值并处理
xmlHttp.open("GET","text.html",true);//调用text.html
xmlHttp.send(null);

}
function StatHandler(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
document.getElementById("webpage").innerHTML=xmlHttp.responseText;
}
}
</script>
<body>

<a href="#" onclick="ReqHtml();">通过XMLHttpRequest对象请求HTML文件</a>

<div id="webpage"></div>
</body>
</html>

0 0