Ajax基础知识.docx
- 文档编号:5454316
- 上传时间:2022-12-16
- 格式:DOCX
- 页数:19
- 大小:26.20KB
Ajax基础知识.docx
《Ajax基础知识.docx》由会员分享,可在线阅读,更多相关《Ajax基础知识.docx(19页珍藏版)》请在冰豆网上搜索。
Ajax基础知识
1Ajax基础知识
1、同步交互和异步交互
同步交互
*客户端向服务器端发送请求—>等待服务器端处理—>处理完毕返回,这个期间客户端不能做任何其他事情。
*发送方发出数据后,等接收方发回相应以后才发下一个数据包的通讯方式。
异步交互
*客户端向服务器端发送请求—>等待服务器端处理—>处理完毕返回,这个期间客户端可以做其他事情。
*发送方发出数据后,不等接收方发回相应,接着发送下个数据包的通讯方式。
2、Ajax的定义
*Ajax被认为是(AsynchronousJavascriptandXML的缩写)
*允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。
3、Ajax模型与传统web模型的区别
Ajax模型
*客户端浏览器向服务器发送请求,请求的是数据。
*服务器向客户端浏览器相应的是数据。
*在ajax模型中,客户端浏览器与服务器通信,传递的是数据。
传统web模型
*客户端浏览器向服务器发送请求,请求的是整个页面
*服务器相应客户端浏览器的是整个页面
*在传统的web模型中,客户端浏览器与服务器通信,传递的是整个页面。
4、实现异步交互的技术
*Flash
*Javaapplet
*框架:
如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个页面。
*隐藏的iframe
*XMLHttpRequest:
该对象是对JavaScript的一个扩展,可使网页与服务器进行通信。
是创建Ajax应用的最佳选择。
实际上通常把Ajax当成XMLHttpRequest对象的代名词。
5、Ajax的工作原理
*Ajax的核心是JavaScript对象XmlHttpRequest
*XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理相应,而不阻塞用户。
*用户的浏览器在执行任务时即装载了Ajax引擎。
Ajax引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。
它负责编译用户界面及与服务器之间的交互。
*Ajax引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。
现在,可以用JavaScript调用Ajax引擎来代替产生一个Http的用户动作,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给Ajax来执行。
6、Ajax包含的技术
AJAX(AsynchronousJavaScriptandXML)并不是一项新技术,其实是多种技术的综合,包括JavaScript、XHTML和CSS、DOM、XML和XMLHttpRequest。
*服务器端语言:
服务器需要具备向浏览器发送特定信息的能力。
Ajax与服务器端语言无关。
*XML是一种描述数据的格式。
Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML是其中一种选择。
*XHTML和CSS标准化呈现。
*DOM实现动态显示和交互。
*使用XMLHTTP组建XMLHttpRequest对象进行异步数据读取。
*使用JavaScript绑定和处理所有数据。
7、Ajax的优点与缺点
优点:
*最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
*使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
*可以把以前一些服务器负担的工作转嫁给客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。
并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
*基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
缺点:
*AJAX大量使用了Javascript和AJAX引擎,而这个取决于浏览器的支持。
IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla虽然也支持AJAX,但是提供XMLHttpRequest的方式不一样。
所以,使用AJAX的程序必须测试针对各个浏览器的兼容性。
* AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。
这个就需要在明显位置提醒用户“数据已更新”。
* 对流媒体的支持没有FLASH、Java Applet好。
* 对搜索引擎的支持比较弱。
* 一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。
8、XMLHttpRequest对象
<1>XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
<2>XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。
非W3C标准!
由于非标准所以实现方法不统一。
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象。
其他浏览器(Firefox、Safari、Opera…)把它实现为一个本地的JavaScript对象。
<3>XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,而不论这个实例创建的方法是什么。
<4>创建XMLHttpRequest对象
<5>XMLHttpReqeust对象的方法
abort()停止当前请求。
getAllResponseHeaders()把http请求的所有响应首部作为键/值对返回。
getResponseHeader("headerLabel")返回指定首部的串值。
open("method","url")建立对服务器的调用,method参数可以是GET、POST。
url参数可以是相对URL或绝对URL。
这个方法还包括3个可选参数。
send(content)向服务器发送请求。
setReqeustHeader("label","value")把指定首部设置为所提供的值。
在设置任何首部之前必须先调用open()。
<6>XMLHttpRequest对象的属性
onreadystatechange状态改变的事件触发器
readyState对象状态(interger):
0=未初始化
1=读取中
2=已读取
3=交互中
4=完成
responseText服务器进程返回数据的文本版本。
responseXML服务器进程返回数据的兼容DOM的XML文档对象。
status服务器返回的状态码,如:
404=“文件未找到”、200=“成功”。
statusText服务器返回的状态文本信息。
2Ajax的实现步骤
<1>创建XMLHttpReqeust对象
<2>服务器端向客户端相应(注册监听)
*XMLHttpRequest对象的onreadystatechange属性
该事件处理函数由服务器触发,而不是用户。
在 Ajax 执行过程中,服务器会通知客户端当前的通信状态。
这依靠更新XMLHttpRequest对象的readyState来实现。
改变readyState属性是服务器对客户端连接操作的一种方式。
每次readyState属性的改变都会触发readystatechange事件。
*XMLHttpRequest对象的readyState 属性
readyState 属性表示Ajax请求的当前状态,它的值用数字代表。
0 代表未初始化。
还没有调用 open 方法
1 代表正在加载。
open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。
send 已被调用。
请求已经开始
3 代表交互中。
服务器正在发送响应
4 代表完成。
响应发送完毕
*每次readyState值的改变,都会触发readystatechange事件。
如果把onreadystatechange事件处理函数赋给一个函数,那么每次readyState值的改变都会引发该函数的执行。
readyState 值的变化会因浏览器的不同而有所差异。
但是,当请求结束的时候,每个浏览器都会把readyState的值统一设为 4。
*XMLHttpRequest对象的status属性
服务器发送的每一个响应也都带有首部信息。
三位数的状态码是服务器发送的响应中最重要的首部信息,并且属于超文本传输协议中的一部分。
常用状态码及其含义:
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改)
在XMLHttpRequest对象中,服务器发送的状态码都保存在status属性里。
通过把这个值和200或304比较,可以确保服务器是否已发送了一个成功的响应。
<3>建立客户端与服务器端的通信连接
*XMLHttpRequest对象的open ( method, url, asynch ) 方法
XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
method:
请求类型,类似 “GET”或”POST”的字符串。
若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符)。
若需要向服务器发送数据,用POST。
url:
路径字符串,指向你所请求的服务器上的那个文件。
可以是绝对路径或相对路径。
asynch:
表示请求是否要异步传输,默认值为true(异步)。
指定true,在读取后面的脚本之前,不需要等待服务器的相应。
指定false,当脚本处理过程经过这点时,会停下来,一直等到Ajax请求执行完毕再继续执行。
*如果请求方式是”POST”方式的话,需要再open( )方法后,调用setRequestHeader(header,value)方法
当浏览器向服务器请求页面时,它会伴随这个请求发送一组首部信息。
这些首部信息是一系列描述请求的元数据(metadata)。
首部信息用来声明一个请求是 GET 还是 POST。
Ajax请求中,发送首部信息的工作可以由 setRequestHeader完成。
参数header:
首部的名字; 参数value:
首部的值。
如果用 POST 请求向服务器发送数据,需要将“Content-type”的首部设置为“application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。
该方法必须在open()之后才能调用。
<4>客户端向服务器端发送请求
*XMLHttpRequest对象的send(data)方法
如果请求方式是”GET”方式的话,send( )方法发送请求数据,服务器端接受不到参数。
如果请求方式是”POST”方式的话,send ( ) 方法发送请求数据,服务器端可以接受参数。
TestServlet.java
public class TestServlet extends HttpServlet{
public void doGet(HttpServletRequestrequest,HttpServletResponseresponse)
throws ServletException,IOException{
response.setContentType( "text/html" );
PrintWriterout=response.getWriter();
System. out .println("connectionserversuccess" );
System. out .println(request.getParameter("a" ));
System. out .println(request.getParameter("b" ));
System. out .println(request.getParameter("c" ));
out. println( "getconnectionserversuccessful!
");
}
public void doPost(HttpServletRequestrequest,HttpServletResponseresponse)
throws ServletException,IOException{
doGet(request,response);
}
}
web.xml
xml version ="1.0" encoding ="UTF-8" ?
>
< web-app version ="2.5"
xmlns ="
xmlns:
xsi ="http:
//www.w3.org/2001/XMLSchema-instance"
xsi:
schemaLocation ="
>
web-app>
test.js
functioncreateXmlHttpRequest(){
varxmlHttp;
try{ //Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest();
}catch(e){
try{ //InternetExplorer
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
returnxmlHttp;
}
window.onload=function(){
document.getElementById("ok").onclick=function(){
//1.创建XMLHttpRequest对象
varxhr=createXmlHttpRequest();
/**
*2.建立客户端与服务器端的连接
*/
xhr.open("POST","testServlet?
timeStamp="+newDate().getTime()+"&c=9",true);
//xhr.open("GET","testServlet?
timeStamp="+newDate().getTime()+"&c=9",true);
//3.客户端向服务器端发送请求数据
//send()如果请求类型是GET方式的话,客户端发送请求数据,服务器端接收不到
//get方式的时候相当于xhr.send(null);
//xhr.send("a=7&b=8");
//不过可以通过在xhr.open的servlet路径后面加参数发送数据
//xhr.open("GET","../testServlet?
timeStamp="+newDate().getTime()+"&c=9",true);
//这里之所以加上时间参数是为了防止缓存
//如果请求类型是POST方式的话,需要设置请求首部信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("a=7&b=8");
//4.服务器端向客户端进行响应
xhr.onreadystatechange=function(){
//alert(xhr.readyState);
//由于被触发了多次,所以上面会打印多次
if(xhr.readyState==4){
//响应发送回来之后,还要根据Status确定有没有成功
if(xhr.status==200){
vardata=xhr.responseText;
alert(data);
}
}
}
}
};
index.jsp
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
执行结果:
Demo1
RegisterServlet.java
publicclassRegisterServletextendsHttpServlet{
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
Stringusername=request.getParameter("username");
System.out.println("username="+username);
//查询数据库表
if(username==null||"".equals(username)){
out.println("请输入你的用户名!
");
}elseif(username.equals("sa")){
out.println("该用户名已存在!
");
}else{
out.println("该用户名可以使用!
");
}
}
}
register.jsp
<%@pagelanguage="java" pageEncoding="utf-8"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ajax 基础知识