java EE开发之Servlet第六课：神奇的Ajax

1，为什么需要使用Ajax
互联网的前世今生

Web 2.0的特点

1) 用户贡献内容
2) 内容聚合RSS
3) 更丰富的“用户体验”

所有操作都是在不刷新窗口的情况下完成的

无刷新：不刷新整个页面，只刷新局部
无刷新的好处
1）只更新部分页面，有效利用带宽

2）提供连续的用户体验(播放视频)

3) 提供类似C/S的交互效果，操作更方面

2，什么是Ajax
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax几个核心：
JavaScript：更新局部的网页
XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果(核心对象)
CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果
常用方法

常用的属性

1. onreadystatechange：指定回调函数

2. readyState: XMLHttpRequest的状态信息
   

3. status：HTTP的状态码
   

4. responseText：获得响应的文本内容
5. responseXML：获得响应的XML文档对象
   

   注意：就绪状态是4而且状态码是200，才可以处理服务器数据

3，怎么样使用Ajax

1. 创建XMLHTTPRequest对象

<script type="text/javascript">
var xmlHttp;
function createXML(){
    //这里是为了适应不同的浏览器
    if(window.XMLHTTPRequest){
       //使用本地XMLHTTPRequest
       xmlHttp = new XMLHTTPRequest();
    }else if(window.ActiveXObject){
       //使用微软XMLHTTPRequest
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}   

2 . 发送异步请求

function validate(){
    createXML();
    //拿到表单中的文档框
    var un = document.getElementById("un");
    //请求的url地址
    var url = "validate.jsp?un="+un.value;
    //初始化XMLHTTPRequest对象,即调用open()
    //确定访问的方式是get还是post
    //确定访问的地址
    //true，表示异步发送
    xmlHttp.open("get",url,true);

    //当XMLHTTPRequest对象得状态发生改变时，调用callback
    // 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
    // 1 (初始化) 对象已建立，尚未调用send方法
    // 2 (发送数据) send方法已调用，但是当前的状态及http头未知
    // 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过 
    //       responseBody和responseText获取部分数据会出现错误，
    // 4 (完成) 数据接收完毕,此时可以通过responseXML和responseText获 
    //       取完整的回应数据 
    xmlHttp.onreadystatechange=callback;
    //XMLHTTPRequest对象正式发送请求
    xmlHttp.send(null);
}

3 . 回调函数处理文本内容

function callback(){
  //为4的时候，证明已经收到了所有服务器端给的东西
  if(xmlHttp.readyState==4){
    //证明页面访问正确
    if(xmlHttp.status==200){
        var msg = document.getElementById("msg");        
        msg.innerHTML="<fontcolor='red'>"+xmlHttp.responseText+"</font>"
    } 
  }
}

注意：xmlHttp.responseText可以拿到服务端的文本信息

4 . 回掉函数处理xml内容

 //解析xml文件
function parseXML(){
      //拿到xml文件所有的元素
    var xmlc = xmlHttp.responseXML.documentElement;
    //拿到城市的下拉列表
    var ct = document.getElementById("city");
    //拿到所有的city节点
    var cities = xmlc.getElementsByTagName("city"); 
    //一开始让城市的下拉列表的option为0
    ct.options.length=0;
    //遍历所有的city节点
    for(var i=0;i<cities.length;i++){  
      //city节点下面id节点的值
      var id = cities[i].childNodes[0].childNodes[0].nodeValue; 
      //city节点下面name节点的值
      var name = cities[i].childNodes[1].childNodes[0].nodeValue;
      //new一个Option
      var o = new Option(name,id);        
      //添加到下拉列表中
      ct.add(o);   
   }   
}

注意：xmlHttp.responseXML可以拿到服务端的xml文件信息