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文件信息