Ajax

一:什么是Ajax

Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用，不是一门新语言。它是用JavaScript编写。与xml的关系就是可以读取和返回xml文件。

二:Ajax中的对象和方法说明

Ajax的核心对象就是xmlHttpRequest

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1：方法

xmlHttpRequst对象利用send()和open()方法与服务器进行交互。

open(method,url,async)

• method：请求的类型；GET或POST
• url：文件在服务器上的位置
• async：true（异步）或false（同步）

send(string)

• string：仅用于POST请求

如果是post请求，必须使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据：

2：属性

readyState

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

State

• 200: "OK"
• 404: 未找到页面

responseText

• 获得字符串形式的响应数据。

responseXML

• 获得 XML 形式的响应数据。

onreadystatechange

• 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

三:Ajax运行原理(为什么要用Ajax)

ajax通过xmlhttpRequest对象执行操作，其中xmlhttpRequest对象是在浏览器中内置的一个对象

其运行原理就相当于创建了一个请求代理，通过代理去完成与服务器的交互，交互的过程中客户不需要等待，还可以进行其它的工作，交互完成以后，代理再将交互的结果返回给客户页面。

第一步:创建xmlHttpRequest对象，每个浏览器的创建不是都相同。

varxmlhttp;
1. if(window.XMLHttpRequest)
2. {//IE7+,Firefox,Chrome,Opera,Safari创建方式
3. xmlhttp=newXMLHttpRequest();
4. }
5. else
6. //IE6,IE5创建方式
7. newActiveXObject("Microsoft.XMLHTTP");
9. }

第二步：设置open（）方法和setRequestHeader()方法参数。

将请求方式，请求目的地址，和请求类型设置到open方法中，如果是post请求，则需要设置setRequestHeader()参数

第三步：发送执行

利用send方法，与服务器真正的交互执行

第四步：获得执行结果

首先判断执行是否完成，然后通过js操作dom元素，将返回的responseText返回到页面

xmlhttp.onreadystatechange=function()
1. {
2. //判断是否发送成功，是否找到请求页面等
3. if(xmlhttp.readyState==4&&xmlhttp.status==200)
4. {
5. //操作页面元素
6. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
7. }
8. }

四:Ajax实例(焦点离开验证用户是否存在)

利用ajax在焦点离开的时候判断注册的用户是否存在

varxmlHttp;//声明xmlHttp对象
1. //实例化xmlHttpRequest对象
2. functioncreateXMLHttpRequest(){
3. //表示当前浏览器不是ie,如ns,firefox
4. if(window.XMLHttpRequest){
5. xmlHttp= }elseif(window.ActiveXObject){
6. //input失去焦点事件onblur（），调用这个js方法验证
7. functionvalidate(field){
8. if(trim(field.value).length!=0){
9. //创建XMLHttpRequest
10. createXMLHttpRequest();
11. //每次请求的url地址不同，利用时间产生不同url地址，可以防止缓冲造成问题
12. varurl="user_validate.jsp?userId="+trim(field.value)+"×tamp="+newDate().getTime();
13. xmlHttp.open("GET",153); font-weight:bold; background-color:inherit">true);
14. //方法地址，处理完成后自动调用，回调
15. xmlHttp.onreadystatechange=function(){//匿名函数
16. if(xmlHttp.readyState==4){//Ajax引擎初始化成功
17. if(xmlHttp.status==200){//http协议成功
18. document.getElementById("userIdSpan").innerHTML="<fontcolor='red'>"+xmlHttp.responseText+"</font>";
19. }else{
20. alert("请求失败，错误码="+xmlHttp.status);
21. };
22. //将参数发送到Ajax引擎
23. xmlHttp.send(null);
24. else{
25. document.getElementById("userIdSpan").innerHTML="";
26. }

<tdwidth="78%">
1. inputname="userId"type="text"class="text1"id="userId"
2. size="10"maxlength="10"onkeypress="userIdOnKeyPress()"value="<%=userId%>"onblur="validate(this)">spanid="userIdSpan"</spantd>

//后台验证方法利用jsp编写

<%@pagelanguage="java"contentType="text/html;charset=GB18030"
1. pageEncoding="GB18030"%>
2. <%@pageimport="com.bjpowernode.drp.sysmgr.manager.*"%>
3. <%
4. //可以采用清除缓存的方法，如下
5. //response.setContentType("text/xml");
6. //response.setHeader("Cache-Control","no-store");//HTTP1.1
7. //response.setHeader("Pragma","no-cache");//HTTP1.0
8. //response.setDateHeader("Expires",0);
9. //out.println("Hello");
10. //Thread.currentThread().sleep(3000);
11. StringuserId=request.getParameter("userId");
12. if(UserManager.getInstance().findUserById(userId)!=null){
13. out.println("用户代码已经存在");
15. %

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!