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//
升级会员 