声明：本文示例代码来自 Brett McLaughlin 关于Ajax的系列文章，是对原文代码片段的总结和再次实现，如果你是ajax新手的话，强烈推荐拜读其文—— https://www.ibm.com/developerworks/cn/web/wa-ajaxintro/
示例说明：
填写City和State，异步获取Zip Code，此处Zip Code和State相同。
ajax1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax demo</title>
<script type="text/javascript">
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == ""))
return;
if ((state == null) || (state == ""))
return;
// Build the URL to connect to
var url = "ajaxDemo?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;
// Send the request
xmlHttp.send(null);
}
function updatePage() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
} else if (xmlHttp.status = 404) {
alert("Request URL does not exit!");
} else {
alert("Error : status code is " + xmlHttp.status);
}
}
}
</script>
</head>
<body>
<div align="center">
<form>
<table>
<tr>
<td>City: </td>
<td align="left"><input type="text" name="city" id="city"
size="25" onchange="callServer();" /></td>
</tr>
<tr>
<td>State: </td>
<td align="left"><input type="text" name="state" id="state"
size="25" onChange="callServer();" /></td>
</tr>
<tr>
<td>Zip Code: </td>
<td align="left"><input type="text" name="zipCode" id="zipCode"
size="5" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
AjaxDemoServlet.java
package org.zzh.ajaxdemo.servlet;
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;
/**
* Servlet implementation class AjaxDemoServlet
*/
public class AjaxDemoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxDemoServlet() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
private void processRequest(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
res.setContentType("text/html");
PrintWriter out = res.getWriter();
String city = req.getParameter("city");
String state = req.getParameter("state");
if("nanjing".equals(city)) {
out.println(state);
} else {
out.println(state);
}
out.close();
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>AjaxDemo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>AjaxDemoServlet</display-name>
<servlet-name>AjaxDemoServlet</servlet-name>
<servlet-class>org.zzh.ajaxdemo.servlet.AjaxDemoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxDemoServlet</servlet-name>
<url-pattern>/ajaxDemo</url-pattern>
</servlet-mapping>
</web-app>
示例在Firefox3.6.6 和 IE8中测试正常。
分享到：
相关推荐
**二、Ajax简单示例** 以下是一个简单的Ajax GET请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'AjaxHelloWorld.json', true); xhr.setRequestHeader('Content-type', 'application/...
在这个“ajax 简单示例”中，我们将探讨如何手写Ajax代码，以及如何在Java后端如Struts框架中配合使用。 首先，让我们看看**手写Ajax代码**的基本结构。通常，一个简单的Ajax请求由以下几个部分组成： 1. **创建...
在本示例中，“ajax简单示例.EXE”可能是用来演示Ajax功能的一个可执行文件。** Ajax的核心是利用JavaScript与服务器进行异步通信，通过XMLHttpRequest对象作为桥梁，实现后台与前端的交互，而无需用户感知页面刷新...
MyEclipse 中 Ajax简单示例
在"**DWR AJAX 简单示例**"中，我们通常会看到一个常见的应用场景，即级联下拉菜单。级联下拉菜单通常用于多级关联的数据选择，例如，选择国家后，相应的省份列表会动态加载；选择省份后，城市列表也会随之更新。...
【AJAX简单示例】是针对初学者设计的一个教程，主要展示了如何在ASP.NET 2.0环境中利用AJAX技术实现动态数据查询，同时结合SQL Server 2005进行后端数据处理。AJAX（Asynchronous JavaScript and XML）是一种在无需...
AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX ...
**简单Ajax示例：** ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data ...
这个简单的示例应用展示了如何利用Ajax实现界面的异步刷新，对于初学者来说，是理解Ajax工作原理的一个良好起点。 在传统的网页交互中，用户每次点击按钮或链接，整个页面都会重新加载，而Ajax则通过在后台与服务器...
使用jaxer,jquery,sqlite做的一个简单的例子，主要展示一下jaxer做ajax应用有多么方便。 到这里http://aptana.com/jaxer/download下载一个jaxer服务器端，解压后把程序放到public文件夹下就可以
Ajax简单示例 以下是一个简单的Ajax GET请求示例，通过加载一个本地文件（例如，`ajaxDEMO.txt`）并将其内容显示在页面上： ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 监听...
以下是一个关于如何在.NET环境下创建最简单AJAX示例的详细讲解。 首先，我们需要了解AJAX的基本工作原理。它允许浏览器在不重新加载整个页面的情况下，通过JavaScript向服务器发送异步请求并接收响应数据。这提高了...
本示例将展示如何使用Ajax进行简单的异步请求。 首先，我们需要了解Ajax的工作流程。Ajax请求通常包含以下步骤： 1. **创建XMLHttpRequest对象**：这是所有Ajax操作的基础。在现代浏览器中，我们可以直接创建`...
下面是一个简单的jQuery AJAX请求示例，从服务器获取JSON数据并显示在页面上： ```html <!DOCTYPE html> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="loadData">Load ...
通过实践简单的Ajax示例，你可以掌握如何与服务器进行异步通信，从而提高你的Web开发技能。在提供的压缩包文件中，可能包含了一些基本的Ajax代码示例，建议仔细研究和学习，以便更好地理解和运用Ajax技术。
ajax原理很简单，通过js提交请求，然后服务器上处理请求，再输出数据，浏览器接收数据，并显示。所以ajax在网页上需要js代码，我们一般使用jquery。在服务器上需要处理请求的代码(比如php程序)。 以ajax翻页，
**jQuery AJAX最简单示例** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。jQuery库为开发者提供了方便、简洁的API，使得使用AJAX变得...
总的来说，这个"关于ajax的简单示例"是一个展示如何在ASP.NET项目中使用Ajax和C#进行异步通信的例子，可能是通过创建一个简单的聊天应用来实现。通过理解Ajax的工作原理和ASP.NET的特性，我们可以学习如何提高Web...
总结来说，"简单的AJAX示例(JSP+servlet)"是一个演示了如何利用AJAX、JSP和Servlet来实现异步用户名验证的应用。它涉及到前端的交互设计、后端的数据处理以及web服务器的配置，是一个典型的前后端分离的开发模式实例...
本压缩包“JS&AJAX代码示例”提供了若干实例，帮助开发者深入理解这两项技术的核心概念和用法。 **JavaScript基础** JavaScript是一种轻量级的解释型编程语言，主要在浏览器环境中运行，负责网页的动态化处理。它...