Ajax使用

在.JS文件或者网页中写入如下脚本

js 代码

 

1. //定义XMLHttp实例  
2. var xmlHttp;  
3. function createXMLHttpRequest(){  
4. //开始初始化XMLHttpRequest对象  
5.   if(window.ActiveXObject){  
6. //IE浏览器  
7.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
8.   }else if(window.XMLHttpRequest){  
9. //Mozilla浏览器  
10.     xmlHttp = new XMLHttpRequest();  
11.   }  
12. if(xmlHttp){  
13.     xmlHttp.open("GET",url,false);  
14.     xmlHttp.onreadystatechange=function(){setState(greens,reds,contains)};  
15.     xmlHttp.send(null);  
16.   }  
17. }  
18. //回调函数举例  
19. //返回的4种状态  
20. function setState(greens,reds,contains){  
21. var contains = document.getElementById("contain");  
22.   if(xmlHttp.readyState == 0){  
23.     contains.innerHTML = "正在初始化";  
24.   }  
25.   if(xmlHttp.readyState == 1){  
26.     contains.innerHTML = "正在准备发送请求";  
27.   }  
28.   if(xmlHttp.readyState == 2){  
29.     contains.innerHTML = "正在发送请求";  
30.   }  
31.   if(xmlHttp.readyState == 3){  
32.     contains.innerHTML = "正在接收数据";  
33.   }  
34.   if(xmlHttp.readyState == 4){  
35. //信息已经成功返回，开始处理信息  
36.     if(xmlHttp.status == 200){  
37.    contains.innerHTML = xmlHttp.responstText; //返回值  
38.     }  
39.   }  
40. }  

返回xml例子

xml 代码

 

1. <states>  
2. <north>  
3.     <state>Minniesota</state>  
4.     <state>Iowa</state>  
5.     <state>North Dako</state>  
6. </north>  
7. </states>  

js 代码

 

1. var xmlDoc = xmlHttp.responseXML;  
2. var northNode = xmlDoc.getElementsByTagName("north")[0];  
3. var northStates = northNode.getElementsByTagName("state");  

DOM的一些详解

(1)设置
      在从服务器返回数据的同时，还要进行设置，使浏览器不会在本地缓存结果，response.setHeader("Cache-Control","no-cache");response.setHeader("pragma","no-cache");
      XMLHttpRequest对象提供２个可以用来访问服务器响应的属性，一个是responseText将响应提供一个串，结合HTML元素的innerHTML属性，非常有用．(document.getElementById("results").innerHTML= xmlHttp.responseText).一个是responseXML将响应提供为一个XML对象．

      (2)DOM元素的一些有用的属性
childNodes--------------------------------------返回当前元素所有子元素的数组
firstChild   --------------------------------------返回当前元素的第一个下级子元素
lastChild   ---------------------------------------返回当前元素的最后一个子元素
nextSibling---------------------------------------返回紧跟在当前元素后面的元素
nodeValue----------------------------------------指定表示元素值的读／写属性
parentNode --------------------------------------返回元素的父节点
previousSibling----------------------------------返回紧邻当前元素之前的元素

  (3)用于遍历XML文档的DOM元素方法(document)
getElementById(id)-----------------------------获取有指定唯一ID属性值文档中的元素
getElementsByTagName(name)--------------返回当前元素中有指定标记名的子元素的数组
hasChildNodes()--------------------------------返回一个布尔值，指定元素是否有子元素
getAttribute(name)------------------------------返回元素的属性值，属性由name指定

      (4)动态创建内容时所用的W3C DOM属性和方法
document.createElement(tagName)----------文档对象上的createElement方法可以创建由tagName指定的元素
document.createTextNode(text)--------------文档对象的createTextNode方法会创建一个包含静态文本的节点．
.appendChild(childNode)---------该方法将指定的节点增加到当前元素的子节点列表．
.getAttribute(name)|.setAttribute(name,value)-----------------获得和设置元素中name属性的值
        .insertBefore(newNode,targetNode)-----这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面。
        .removeAttribute(name)-----这个方法从元素中删除属性name
        .removeChild(childNode)-----这个方法从元素中删除子元素childNode
         .replaceChild(newNode,oldNode)-----这个方法将节点oldNode替换为节点newNode
          .hasChildNodes()这个方法返回一个布尔值，指示元素是否有子元素

XMLHttpRequest对象的一些典型方法

(1)、void open(String method,String url,boolean asynch);这个方法会建立对服务器的调用。
第一个参数表示要提供调用的特定方法(get,post,put)
第二个参数表示要提供所调用资源的url
第三个参数表示是异步(true)还是同步(false)
(2)、void send(content):这个方法会向具体服务器发出请求。可选参数会作为请求体的一部分发送。
(3)、void setRequestHeader(String header ,String value):这个方法为HTTP请求中一个给定的首部设置值
第一个参数表示要设置的首部。
第二个参数表示要 在首部中放置的值。这个方法必须在调用open()之后才能调用。
XMLHttpRequest对象的一些典型属性：
(1)、onreadystatechange:每个状态改变时都会触发这个事件处理器，通常会调用一个javascript函数，用来处理返回时要调用的函数。
(2)、readyState:请求的状态。有5个值：0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成。
(3)、responseText:服务器的响应，表示为一个串
(4)、responseXML:服务器的响应，表示为一个XML，这个对象可以解析为一个DOM对象。
(5)、status:服务器的Http状态码(200对应ok，404对应Not Found(未找到))



servlet向浏览器回写

java 代码

 

1. response.setContentType("text/xml");  
2. PrintWriter out = response.getWriter();  
3. out.println(responseText);  
4. out.close();