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

---

超全面的测试IT技术课程，0元立即加入学习！有需要的朋友戳：

腾讯课堂测试技术学习地址