下面就是一个简单的Ajax程序：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'first.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
//定义XMLHttpRequest对象
var request;
//完成XMLHttpRequest对象的初始化
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
//DOM 2 浏览器
request = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
request = new ActiveXObject("Msxm12.XMLHTTP");
}catch(e){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
}
//下拉值改变时，触发的事件
function change(id){
//初始化XMLHttpRequest
createXMLHttpRequest();
//设置请求相应的URL
var url = "SelectServlet?id=" + id;
//打开与服务器相应连接的地址
request.open("POST", url, true);
//设置处理响应的回调函数
request.onreadystatechange = callback;
//发送请求
request.send(null);
}
//定义处理响应的回调函数
function callback(){
//响应完成且正常
alert("1");
if(request.readyState==4) {
alert("2");
if(request.status==200) {
alert("3");
var selectMsg = request.responseText;
alert(selectMsg);
document.getElementById("output").innerHTML = selectMsg;
}else {
alert("发生错误：");
}
}
}
</script>
</head>
<body>
<select name="first" id="first" onchange="change(this.value);">
<option value="1" selected="selected">中国</option>
<option value="2">美国</option>
<option value="3">日本</option>
</select>
<div id="output"></div>
</body>
</html>
Servlet代码
package com.lbx.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;
@SuppressWarnings("serial")
public class SelectServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String id = request.getParameter("id");
System.out.println(id);
PrintWriter out = response.getWriter();
if(id.equals("1")){
out.println("你选择了中国");
}
if(id.equals("2")){
out.println("你选择了美国");
}
if(id.equals("3")){
out.println("你选择了日本");
}
}
}
相关推荐
在JavaScript中，我们可以通过以下方式创建一个XMLHttpRequest实例： ```javascript var xhr = new XMLHttpRequest(); ``` 接下来，我们需要设置HTTP请求的方法、URL和是否异步执行。通常，我们使用`open()`方法来...
Struts是一个基于Java的开源框架，用于构建企业级Web应用程序。它遵循MVC（Model-View-Controller）设计模式，将业务逻辑、数据和界面表现分离，使开发更加模块化和可维护。当Ajax与Struts结合使用时，可以显著增强...
这里我们关注的是如何使用XMLHttpRequest对象来实现一个简单的信息验证功能。 XMLHttpRequest是Ajax的核心组件，它提供了一种异步与服务器通信的方式。以下是一个基本的XMLHttpRequest的使用流程： 1. **创建实例*...
创建一个XMLHttpRequest对象实例非常简单。在JavaScript中，可以通过`new XMLHttpRequest()`来实现。例如： ```javascript var request = new XMLHttpRequest(); ``` #### 四、关键方法与属性详解 XMLHttpRequest...
无论 readyState 值何时发生改变，XMLHttpRequest 对象都会激发一个readystatechange 事件。onreadystatechange 属性接收一个 EventListener 值，向该方法指示无论 readyState 值何时发生改变，该对象都将激活。 三...
Ajax（异步JavaScript和XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。XMLHttpRequest（XHR）是实现Ajax的核心对象，它允许JavaScript与服务器进行通信，接收或发送数据，实现页面的动态更新。本...
2. **XMLHttpRequest对象**：这是AJAX的基础，它提供了一个在后台与服务器进行通信的API。JavaScript通过XMLHttpRequest对象可以异步地发送GET或POST请求，并获取服务器的响应数据。 3. **DOM（Document Object ...
下面是一个简单的AJAX示例，展示了如何使用`XMLHttpRequest`对象发送请求并处理响应： ```javascript function Ustbwuyi() { var data = document.getElementById("username").value; CreateXmlHttp(); if (!...
`ResponseXML`属性是一个XML DOM对象，它包含了服务器返回的XML格式的数据。如果服务器返回的是一个有效的XML文档，那么这个属性就可以被用来解析和操作数据。例如，假设服务器返回了一个包含用户信息的XML： ```...
还会讨论如何创建第一个Ajax请求，理解异步与同步的区别，以及如何利用JavaScript处理响应。 **第二章：数据格式** Ajax传输的数据可以是XML、JSON、HTML等多种格式。本章将深入探讨XML和JSON，它们在Ajax中的角色...
Ajax（Asynchronous ...总结来说，Ajax程序设计入门需要掌握JavaScript、DOM操作、XMLHttpRequest的使用以及如何构建异步通信的逻辑。通过Ajax，开发者可以构建更加高效、互动性强的Web应用，提供更优质的用户体验。
总之，这个基于Ajax的小程序是一个集成了前端与后端交互的实战项目，对于掌握Web开发中的异步通信技术具有重要的学习价值。通过实际操作和调试，开发者可以深入理解Ajax技术在实际应用中的强大功能和灵活性。
首先，创建一个XMLHttpRequest实例是开始AJAX请求的第一步。在JavaScript中，你可以通过`new XMLHttpRequest()`来创建： ```javascript var xhr = new XMLHttpRequest(); ``` 一旦实例化了XMLHttpRequest对象，你...
在这个“一个简单的Ajax聊天应用程序”中，我们将会深入探讨如何利用Ajax实现一个实时、交互式的聊天室。 1. **基础架构** - **前端**：主要由HTML、CSS和JavaScript组成，其中JavaScript负责与服务器进行异步通信...
本资源包含了ASP.NET AJAX程序设计的源码，这对学习和理解这一技术具有极大的帮助。 首先，我们要了解ASP.NET AJAX的核心组件。这包括： 1. **Microsoft AJAX Library**：这是客户端JavaScript库，提供了与服务器...
Ajax.dll可能是一个封装了Ajax功能的.NET库，包含了处理Ajax请求和响应的类和方法。深入研究源码可以帮助我们理解其内部工作原理，例如如何创建和配置XMLHttpRequest对象，如何处理异步回调，以及如何与服务器进行...
AJAX调试器会将所有AJAX（XMLHttpRequest）活动记录到Chrome的开发者工具控制台。 这使开发人员可以轻松查看顶级请求信息，例如HTTP状态，响应时间和大小。 单击URL在新选项卡中打开AJAX调用，包括所有输入，从而使...