学习Ajax技术
2014-01-06 18:16
183 查看
(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标签输出请求内容-->
<div id="webpage"></div>
</body>
</html>
答: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标签输出请求内容-->
<div id="webpage"></div>
</body>
</html>
相关文章推荐
- Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生
- 跟“无为”学习Ajax技术第五天
- 跟“无为”学习Ajax技术第六天
- 跟“无为”学习Ajax技术第八天
- java web开发学习-13 ajax技术简介
- AJAX技术学习
- SharePoint And Ajax Technology(1):Ajax技术学习
- 跟“无为”学习Ajax技术第六天
- 跟“无为”学习Ajax技术第七天
- 跟“无为”学习Ajax技术第八天
- 跟“无为”学习Ajax技术第九天
- ajax技术学习网址
- 跟“无为”学习Ajax技术第七天
- 跟“无为”学习Ajax技术第九天
- 从零开始学习Ajax:Web开发技术实战
- Ext/Ajax技术学习及交流活动(北京)
- 学习XHTML、CSS、DIV、Javascript,AJAX等页面技术的不错网站
- 跟“无为”学习Ajax技术第一天
- 【AJAX学习笔记】JSON数据编码解码技术
- 地图集web项目_技术学习(一)_前后端数据传输(ajax)