Ajax基础知识Word格式文档下载.docx
- 文档编号:18441857
- 上传时间:2022-12-16
- 格式:DOCX
- 页数:19
- 大小:26.20KB
Ajax基础知识Word格式文档下载.docx
《Ajax基础知识Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《Ajax基础知识Word格式文档下载.docx(19页珍藏版)》请在冰豆网上搜索。
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的实现步骤
创建XMLHttpReqeust对象
服务器端向客户端相应(注册监听)
*XMLHttpRequest对象的onreadystatechange属性
该事件处理函数由服务器触发,而不是用户。
在
Ajax
执行过程中,服务器会通知客户端当前的通信状态。
这依靠更新XMLHttpRequest对象的readyState来实现。
改变readyState属性是服务器对客户端连接操作的一种方式。
每次readyState属性的改变都会触发readystatechange事件。
*XMLHttpRequest对象的readyState
属性
readyState
属性表示Ajax请求的当前状态,它的值用数字代表。
0
代表未初始化。
还没有调用
open
方法
1
代表正在加载。
方法已被调用,但
send
方法还没有被调用
2
代表已加载完毕。
已被调用。
请求已经开始
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比较,可以确保服务器是否已发送了一个成功的响应。
建立客户端与服务器端的通信连接
*XMLHttpRequest对象的open
(
method,
url,
asynch
)
XMLHttpRequest
对象的
方法允许程序员用一个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()之后才能调用。
客户端向服务器端发送请求
*XMLHttpRequest对象的send(data)方法
如果请求方式是”GET”方式的话,send(
)方法发送请求数据,服务器端接受不到参数。
如果请求方式是”POST”方式的话,send
方法发送请求数据,服务器端可以接受参数。
TestServlet.java
public
class
TestServlet
extends
HttpServlet{
void
doGet(HttpServletRequestrequest,HttpServletResponseresponse)
throws
ServletException,IOException{
response.setContentType(
"
text/html"
);
PrintWriterout=response.getWriter();
System.
out
.println("
connectionserversuccess"
.println(request.getParameter("
a"
));
b"
c"
out.
println(
getconnectionserversuccessful!
}
doPost(HttpServletRequestrequest,HttpServletResponseresponse)
doGet(request,response);
web.xml
?
xml
version
="
1.0"
encoding
UTF-8"
>
web-app
2.5"
xmlns
xmlns:
xsi
http:
//www.w3.org/2001/XMLSchema-instance"
xsi:
schemaLocation
servlet
description
ThisisthedescriptionofmyJ2EEcomponent<
/
description>
display-name
ThisisthedisplaynameofmyJ2EEcomponent<
display-name>
servlet-name
TestServlet<
servlet-class
app.servlet.TestServlet<
/servlet
servlet-mapping
url-pattern
/testServlet<
/servlet-mapping
welcome-file-list
welcome-file
index.jsp<
/welcome-file-list
web-app>
test.js
functioncreateXmlHttpRequest(){
varxmlHttp;
try{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest();
}catch(e){
//InternetExplorer
xmlHttp=newActiveXObject("
Msxml2.XMLHTTP"
try{
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"
//3.客户端向服务器端发送请求数据
//send()如果请求类型是GET方式的话,客户端发送请求数据,服务器端接收不到
//get方式的时候相当于xhr.send(null);
//xhr.send("
a=7&
b=8"
//不过可以通过在xhr.open的servlet路径后面加参数发送数据
../testServlet?
//这里之所以加上时间参数是为了防止缓存
//如果请求类型是POST方式的话,需要设置请求首部信息
xhr.setRequestHeader("
Content-Type"
application/x-www-form-urlencoded"
xhr.send("
//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="
%>
!
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
html>
head>
title>
MyJSP'
index.jsp'
startingpage<
/title>
metahttp-equiv="
pragma"
content="
no-cache"
cache-control"
expires"
0"
scripttype="
text/javascript"
src="
test/test.js"
/script>
/head>
body>
inputtype="
button"
value="
id="
/>
/body>
/html>
执行结果:
Demo1
RegisterServlet.java
publicclassRegisterServletextendsHttpServlet{
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("
text/html;
charset=utf-8"
Stringusername=request.getParameter("
username"
System.out.println("
username="
+username);
//查询数据库表
if(username==null||"
.equals(username)){
out.println("
请输入你的用户名!
}elseif(username.equals("
sa"
)){
该用户名已存在!
}else{
该用户名可以使用!
register.jsp
utf-8"
-//W3C//DTDHTML4.01Transitional//
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ajax 基础知识