簡易ajax例子一：
文件一：ajaxShow.js
var xmlHttp
function showTable(str)
{
if (str.length==0)
{
document.getElementById("myTable").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="change.jsp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("myTable").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
文件二：index.jsp
<html>
<head>
<script src="ajaxShow.js"></script>
<style>
#myTable tr {}{
border: 1px solid red;
}
</style>
</head>
<body>
<div>
Your Name:
<input type="text" id="txt1" onkeyup="showTable(this.value)">
</div>
hello:
<div id="myTable">
<table style="border: 1px solid red;">
<tr>
<td>
default
</td>
</tr>
</table>
</div>
</body>
</html>
文件三：change.jsp
<%
String q=request.getParameter("q");
out.println("<table style='border:1px solid green;'>");
out.println("<tr>");
out.println("<td>");
out.println("---hello---:"+q);
out.println("</td>");
out.println("</tr>");
out.println("</table>");
%>
運行下吧！挺簡單的
ajax解析xml例子
文件一：ajax.js
var xmlHttp
function showTable()
{
alert("ddd");
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="servlet/AjaxShow";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
var xml=xmlHttp.responseXML;
//獲得根節點
var topNod=xml.documentElement;
//類似這樣去遍歷XML的數據，然后給DOM賦值
var stu=xml.getElementsByTagName("stu");
var name=stu[0].getElementsByTagName("name")[0].firstChild.data;
document.getElementById("ccc").innerHTML=name;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
文件二：AjaxShow.java servlet控制處理
package com.hunau.liuyong;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxShow extends HttpServlet {
public AjaxShow() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//設置文檔格式及編碼
response.setContentType("text/xml;charset=gb2312");
response.setHeader("Cache-Control","no-cache");
PrintWriter out = response.getWriter();
CreateXML tx = new CreateXML();
tx.sendXML(out);
out.close();
}
}
文件三：CreateXML.java 構造xml形式輸出的java文件
package com.hunau.liuyong;
import java.io.FileOutputStream;
import java.io.PrintWriter;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
public class CreateXML {
public void sendXML(PrintWriter os) {
Document doc;
Element stus;
Element stu;
Element name;
Element age;
DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
try {
//構造xml格式文檔
DocumentBuilder db = dbf.newDocumentBuilder();
doc = db.newDocument();
stus = doc.createElement("stus");
stu = doc.createElement("stu");
name = doc.createElement("name");
name.appendChild(doc.createTextNode("月芽兒"));
age = doc.createElement("age");
age.appendChild(doc.createTextNode("21歲"));
stu.appendChild(name);
stu.appendChild(age);
stus.setAttribute("nation", "中國");
stus.appendChild(stu);
doc.appendChild(stus);
TransformerFactory tf = TransformerFactory.newInstance();
Transformer ts = tf.newTransformer();
//將構造的xml文檔內容寫入test.xml文件中（可選），注意test.xml文檔必須先存在
ts.transform(new DOMSource(doc), new StreamResult(
new FileOutputStream("D:/test.xml")));
//把構造的xml文檔返回到PrintWriter輸出中
ts.transform(new DOMSource(doc), new StreamResult(os));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
文件四：web.xml servlet配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AjaxShow</servlet-name>
<servlet-class>com.hunau.liuyong.AjaxShow</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxShow</servlet-name>
<url-pattern>/servlet/AjaxShow</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
文檔五：index.jsp 前臺顯示頁面
<html>
<head>
<script src="js/ajax.js"></script>
<style>
#myTable tr {}{
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" id="txt1" onclick="showTable()" value="click me">
<div id="ccc"></div>
</body>
</html>
ok！