走进AJAX

来源：互联网发布：xp无法映射网络驱动器编辑：程序博客网时间：2024/04/26 10:29

Asynchronous JavaScript And XML:异步的JavaScript和XML

AJAX含概了5方面的内容：

一：使用XHTML和CSS的基于标准的表示技术

二：使用DOM进行动态显示和交互

三：使用XML和XSLT进行数据交换和处理

四：使用XMLHttpRequest进行异步数据检索

五：使用JavaScript将以上技术融合在一起

AJAX其实就是老技术，新思想

AJAX能做什么？

(1)改善表单验证方式，不再需要打开新页面，也不要将整个页面数据提交

(2)不需要刷新页面就可以改变页面内容，减少用户等待时间。

(3)按需获取数据，每次只从服务器端获取需要的数据

(4)读取外部数据，进行数据机整合

(5)异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作

XMLHttpRequest常用方法

open(method,URL,async):建立与服务器的链接。（method指定请求的HTTP的方法，URL请求的地址，async是否使用异步请求其值是true/false）

send(content):发送请求。（content指定请求的参数）

setRequestHeader(header,value):设置请求的头信息

当XMLHttpRequest的send()方法不匹配参数即xmlHttpRequest.send()时，在IE中能够正常运行，但在Firefox中不能，建议最好加null

XMLHttpRequest常用属性

onreadystatechange:制定XMLHttpRequest对象的回调函数。

（onreaderstatechange属性的作用与文本框的onblur等的属性一样，是事件处理属性，即当XMLHttpRequest的状态发生改变时，XMLHttpRequest对象都会触发onreadystatechange所指向的函数）

readyState:XMLHttpRequest的状态信息。

0：XMLHttpRequest对象没有完成初始化。

1：XMLHttpRequest对象开始发送请求。

2：XMLHttpRequest对象的请求发送完成。

3：XMLHttpRequest对象开始读取相应）

4：XMLHttpRequest对象读取想要结束

states：HTTP的状态秘密。仅当readyState的值为3或4时，status属性才可用。

200：服务器相应正常

400：无法找到请求的资源

403：没有访问权限

404：访问的资源不存在

500：服务器内部错误

responseText:获得相应的文本内容。

(当readyState响应的值为0/1/2时，responseText包含一个空字符串。当readyState的值为3时，响应中包含客户端还未完成的响应信息。当readyState的值为4时，responseText包含完整的响应信息)

responseXML:获得相应的XML文档对象。

(如果readyState的值不为4，则responseXML的值为null.

当responseXML接收完整的响应时，如果Content-Type指定的MIME类型不包含text/html或applicatoin/xml或+xml结尾之一的MIME类型，则responseXML的值为null)

小结

使用AJAX技术实现异步交互的步骤如下：

（1）创建XMLHttpRequest对象

（2）通过XMLHttpRequest对象设置请求信息

（3）向服务器发送请求

（4）创建回调函数，根据相应状态动态更新页面

AJAX的使用

（1）通过XMLHttpRequest对象向服务器发送请求。

（2）使用XMLHttpRequest对象解析服务器响应数据。

（3）通过JavaScript脚步动态显示网页

页面无刷新的用户登录（路径：/ajax）

============================

============================

public final class AjaxServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");

String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
log("用户名："+name);
log("密码："+pwd);
PrintWriter out = response.getWriter();
if(name.equals("accp") && pwd.equals("123"))
out.print(name);
else
out.print(0);
out.flush();
out.close();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
}

==============================================

<html>
<head>
    <title>使用AJAX实现省市级联</title>
<script type="text/javascript">
function $(path){
   return document.getElementById(path);
}
//创建XMLHttpRequest对象
var XMLHttp;
function createXMLHttpRequest(){
   if(window.XMLHttpRequest){
    XMLHttp=new XMLHttpRequest();
   }else if(window.ActiveObject){
    XMLHttp=new ActiveObject("Microsoft.XMLHTTP");
   }
}
//提交请求数据
function doAjax(index){
   createXMLHttpRequest();
   if(index=="load"){
    var url="/thirtenn/RelatingServlet?load="+index;
   }else{
    var provinceId=$("province").value;
    var url="/thirtenn/RelatingServlet?provinceId="+provinceId;
   }
   if(XMLHttp!=null){
    //建立与服务器的链接
    XMLHttp.open("POST",url,true);
    //指定回调函数
    if(index=="load"){
     XMLHttp.onreadystatechange=load;
    }else if(index==index){
     XMLHttp.onreadystatechange=city;
    }
    //发送请求
    XMLHttp.send(null);
   }
}
//页面加载时对返回数据处理
function load(){
   //alert(XMLHttp.readyState);
   if(XMLHttp.readyState==4){
    if(XMLHttp.status==200){
     //获得相应的文本内容
     var provinceList=XMLHttp.responseText.split(";");
     if(provinceList!=null){
      for(var i=0;i<provinceList.length;i++){
            var sf=provinceList[i];
            //然后按照连字符”-”,取出省份编号和省份名称
            var sfId=sf.split("-")[0];
            var sfName=sf.split("-")[1];
            //创建选项对象option
            var option=document.createElement("option");
            //设置option的value属性和显示的数据
            option.value=sfId;
            option.innerHTML=sfName;
            //将option追加到下拉框
            document.getElementById("province").appendChild(option);
      }
     }
    }
   }
}
//级联城市
function city(){
   if(XMLHttp.readyState==4){
    if(XMLHttp.status==200){
     //获得相应的文本内容
     var cityList=XMLHttp.responseText.split(";");
     if(cityList!=null){
      //获得所选省类别的选项值
      var provinceValue=$("province").value;
      //清空城市地区列表
      $("city").options.length=0;
      //设置默认选中城市地区
      $("city").selectedIndex=1;
      for(var i=0;i<cityList.length;i++){
            var ct=cityList[i];
            //然后按照连字符”-”,取出省份编号和省份名称
            var cityId=ct.split("-")[0];
            var cityName=ct.split("-")[1];
            //创建选项对象option
            var option=document.createElement("option");
            //设置option的value属性和显示的数据
            option.value=cityId;
            option.innerHTML=cityName;
            //将option追加到下拉框
            document.getElementById("city").appendChild(option);
      }
     }
    }
   }
}
</script>
</head>

<body onload="doAjax('load')">
<div align="center">
<div style="width:600px">
<h1>使用AJAX实现省市级联</h1>
省<select id="province" name="province" onChange="doAjax(1)">
   <option>--请选择所在省--</option>
</select>
市<select id="city" name="city">
   <option>请选择所在城市</option>
</select>
</div>
</div>
</body>
</html>