初步的ajax框架
<script language="javascript">
var XMLHttpReq = false;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
function processResponse() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
window.alert(res);
} else {
window.alert("Error Happened!");
}
}
}
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
window.alert("user name is blank");
document.myform.uname.focus();
return false;
}
else {
sendRequest('login?uname='+ uname + '&psw=' + psw);
}
}
</script>
innerHTML
的例子（级联菜单的效果）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="images/css.css" type="text/css" rel="stylesheet">
</head>
<script language="javascript" type="text/javascript">
// 创建级联菜单函数
function showSubMenu(obj) {
var currentSort =document.getElementById(obj);
currentSort.parentNode.style.display = "";
var subMenu;
if (currentSort.id=="IBM"){
subMenu = " IBM-T43";
}
else if (currentSort.id=="SONY"){
subMenu = " SONY-888";
}
currentSort.innerHTML = subMenu;
}
</script>
<table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="0" width="200" bgcolor="#f5efe7"
border="0">
<tr>
<td align="middle" height="4">
<img height="4" src="images/promo_list_top.gif" width="100%" border="0" alt="">
</td>
</tr>
<tr>
<td align="middle" bgcolor="#dbc2b0" height="19">
<b>笔记本品牌</b>
</td>
</tr>
<tr>
<td height="20">
<a onclick="showSubMenu('IBM')">IBM</a>
</td>
</tr>
<tr style="display:none">
<td height="20" id="IBM">
</td>
</tr>
<tr>
<td height="20">
<a onclick="showSubMenu('SONY')">SONY</a>
</td>
</tr>
<tr style="display:none ">
<td id="SONY" height="20">
</td>
</tr>
</table>
操作html文档（动态添加删除行）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="images/css.css" type="text/css" rel="stylesheet">
</head>
<script language="javascript" type="text/javascript">
// 增加品牌函数
function addSort() {
var name = document.getElementById("name").value;
if(name == "" ) {
return;
}
var row = document.createElement("tr");
row.setAttribute("id", name);
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () { deleteSort(name); };
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);
//清空输入框
document.getElementById("name").value = "";
}
// 删除品牌函数
function deleteSort(id) {
if (id!=null){
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}
</script>
<table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="2" width="400" bgcolor="#f5efe7" border="0">
<tr>
<td align="middle" height="4" colspan="3">
<img height="4" src="images/promo_list_top.gif" width="100%" border="0" alt="">
</td>
</tr>
<tr>
<td align="middle" bgcolor="#dbc2b0" height="19" colspan="3">
<b>品牌信息管理</b>
</td>
</tr>
<tr>
<td height="20">
增加新品牌:
</td>
<td height="20">
<input id="name" type="text" size="15">
</td>
<td height="20">
<img src="images/ok.gif" onclick="addSort();" alt="">
</td>
</tr>
<tr>
<td height="20">
品牌信息管理:
</td>
</tr>
<table border="1" width="400">
<tr>
<td height="20" valign="top" align="center">
品牌名称:
</td>
<td id="pos_1" height="20">
操作
</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</table>
解析xml文档（请求一个xml文档，然后在XMLHttpReq.responseXML中解析，在页面显示出来）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="images/css.css" type=text/css rel=stylesheet>
</head>
<script language="javascript">
var XMLHttpReq;
var PREFIX = "Sort";
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
// 增加品牌函数
function sendRequest() {
var url = "MyXml.xml";
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 处理增加品牌响应函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
readXml();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
function readXml() {
var students = XMLHttpReq.responseXML.getElementsByTagName("student");
alert(students.length);
for(var i=0;i<students.length;i++) {
var stud = students[i];
var name = stud.getElementsByTagName("sname")[0].firstChild.data;
var gre = stud.getElementsByTagName("gre")[0].firstChild.data;
var tse = stud.getElementsByTagName("tse")[0].firstChild.data;
document.write(name + "<p>");
document.write(gre + "<p>");
document.write(tse);
document.write("");
}
}
</script>
<table>
<input type="button" value="测试" onclick="sendRequest();"/>
</table>
post方式提交请求
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
var uname;
var psw;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
XMLHttpReq.open("POST", "login", true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send("uname=" + uname + "&psw=" + psw); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
uname = document.myform.uname.value;
psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest();
}
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密 码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
提交xml格式的请求参数，然后在servlet端解析这个xml (!!!)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
var uname;
var psw;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
var xml = createXML();
alert(xml);
XMLHttpReq.open("POST", "login", true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send(xml); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
var res=XMLHttpReq.responseText;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
uname = document.myform.uname.value;
psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest();
}
}
//创建XML
function createXML() {
var xml = "<user>";
xml = xml + "<name>" +uname + "<\/name>";
xml = xml + "<psw>" + psw + "<\/psw>";
xml = xml + "<\/user>";
return xml;
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密 码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
servlet端代码
package classmate;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;
public class LoginXmlAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
/*
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
//
StringBuffer bxml = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while((line = reader.readLine()) != null) {
bxml.append(line);
}
}
catch(Exception e) {
System.out.println(e.toString());
}
String xml =bxml.toString();
Document xmlDoc = null;
try {
xmlDoc =
DocumentBuilderFactory.newInstance().newDocumentBuilder()
.parse(new ByteArrayInputStream(xml.getBytes()));
}
catch(ParserConfigurationException e) {
System.out.println(e);
}
catch(SAXException e) {
System.out.println( e);
}
String uname = xmlDoc.getElementsByTagName("name").item(0).getFirstChild().getNodeValue();
String psw = xmlDoc.getElementsByTagName("psw").item(0).getFirstChild().getNodeValue();
String responseText;
if(uname.equals("jenny") && psw.equals("hi")){
responseText = "succeed";
}else{
responseText = "failed"
}
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().print(responseText);
}
}
Autocomplete Jsp 端
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<HTML><HEAD><TITLE>Shopping Online</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="images/css.css" type=text/css rel=stylesheet>
</HEAD>
<script language="javascript">
var XMLHttpReq;
var completeDiv;
var inputField;
var completeTable;
var completeBody;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送匹配请求函数
function findNames() {
inputField = document.getElementById("names");
completeTable = document.getElementById("complete_table");
completeDiv = document.getElementById("popup");
completeBody = document.getElementById("complete_body");
if (inputField.value.length > 0) {
createXMLHttpRequest();
var url = "autoComplete?action=match&names=" + escape(inputField.value);
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processMatchResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
} else {
clearNames();
}
}
// 处理返回匹配信息函数
function processMatchResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
}else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
//生成与输入内容匹配行
function setNames(names) {
clearNames();
var size = names.length;
setOffsets();
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {this.className='mouseOver';};
cell.onmouseover = function() {this.className='mouseOut';};
cell.setAttribute("bgcolor", "#FFFAFA");
cell.setAttribute("border", "0");
cell.onclick = function() { completeField(this); } ;
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
completeBody.appendChild(row);
}
}
//设置显示位置
function setOffsets() {
completeTable.style.width = inputField.offsetWidth; + "px";
var left = calculateOffset(inputField, "offsetLeft");
var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
}
//计算显示位置
function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
//填写输入框
function completeField(cell) {
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
//清除自动完成行
function clearNames() {
var ind = completeBody.childNodes.length;
for (var i = ind - 1; i >= 0 ; i--) {
completeBody.removeChild(completeBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
//搜索请求函数
function search() {
var sortName = document.getElementById("names");
createXMLHttpRequest();
var url = "autoComplete?action=search&names=" + escape(inputField.value);
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processSearchResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回匹配信息函数
function processSearchResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("res");
if (res.length>0){
document.getElementById("content").value=res[0].firstChild.data;
}
}else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
</script>
<table style="BORDER-COLLAPSE: collapse" borderColor=#111111
cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0>
<TR>
<TD align=middle height=4 colspan="3"><IMG height=4
src="images/promo_list_top.gif" width="100%"
border=0>
</TD>
</TR>
<TR>
<TD align=middle bgColor=#dbc2b0
height=19 colspan="3"><B>商品信息搜索</B>
</TD>
</TR>
<tr>
<td height="20">
输入品牌关键字:
</td>
<td height="20">
<input type="text" size="15" id="names" onkeyup="findNames();" style="height:20;">
<div style="position:absolute;" id="popup">
<table id="complete_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/>
<tbody id="complete_body"></tbody>
</table>
</div>
</td>
<td height="20">
<img src="images/search.gif" onclick="search();">
</td>
</tr>
<tr>
<td height="20" valign="top" align="center">
产品描述:
</td>
<td id="pos_1" height="80">
<textarea id="content">
</textarea>
</td>
</tr>
</table>
Autocomplete Servlet 端
package classmate;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AutoCompleteAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String action = request.getParameter("action");
String name = request.getParameter("names");�å�Šå—符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.println("<response>");
DB db = new DB();
ResultSet rs;
String strSql=null;
if ("match".equals(action)){
strSql = "select * from product where name like'" + name + "%'";
rs = db.executeQuery(strSql);
try {
while ( rs.next()) {
out.println("<res>" + rs.getString("name") + "</res>");
}
} catch (SQLException e) {
e.printStackTrace();
}
}
else if ("search".equals(action)){
strSql = "select contents from product where name ='" + name + "'";
rs = db.executeQuery(strSql);
try {
if ( rs.next()) {
out.println("<res>" + rs.getString("contents") + "</res>");
}
} catch (SQLException e) {
e.printStackTrace();
}
}
out.println("</response>");
out.close();
}
}
相关推荐
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
很简单的一个AJAX例子 .rar很简单的一个AJAX例子 .rar
一个简单的Jsp中使用ajax例子，详细的代码
ajax例子ajax例子ajax例子ajax例子
这是我写的一个很精简的Ajax例子里面对相关的Ajax的代码段有详细的描述，希望对正在学习Ajax的朋友有所帮助
ajax 例子 ajax 安装包 ajax 例子 ajax 安装包 ajax 例子 ajax 安装包
AJAX 例子
一些ajax例子,ajax学习例子,ajax入门,简单ajax 公司erp模块 http://www.keatonfund.cn/solution/index.html
Ajax开发，Ajax例子，Ajax教程，Ajax开发源码， Ajax技术
ajax 例子
要学习AJAX的，这个是比较好的入门案例，下载之后多多学习
aJAX例子--模糊查询 aJAX例子--模糊查询aJAX例子--模糊查询
lucene全文搜索ajax例子，集成高亮显示。多次搜索等功能了，解压就可以运行了
AJAX例子，这是一个页面AJAX的好例子
详细介绍在这里有：http://blog.csdn.net/comeontom/article/details/7744786 这里说的是一个简单的php+ajax例子
一个完整的用js写的ajax例子，模仿注册页面输入用户名，输入框失去焦点后，后台异步判断该用户名是否可用，并在页面显示判断结果
asp.net mvc ajax 例子 一个最简单的例子 详细： http://blog.csdn.net/yangjian15/archive/2009/10/10/4648642.aspx
一个最简单的AJAX例子 好看来评论哦.
还挺好,是我总结的ajax例子,关于ajax与servlet之间值的传递,以及servlet与数据库之间的连接,数据解析,等等!
AJAX例子（含代码） 推荐