`
八岭书生
  • 浏览: 104703 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

简单的AJAX例子详解

阅读更多

ajax.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实例详解</title>
<script type="text/javascript">

	var myRequest;

    // 创建XMLHttpRequest对象
	function createXMLHttpRequest() {
		if(window.ActiveXObject) { // 浏览器是否支持ActiveX对象
			myRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} else if(window.XMLHttpRequest) {
			myRequest = new XMLHttpRequest();
		}
	}
	
   // 建立发送异步数据请求的函数doAjax
	function doAjax() { 
		createXMLHttpRequest();  // 调用创建XMLHttpRequest对象的方法
		var username = document.getElementById("username").value;	// 获取文本域中的值		
		myRequest.open("get", "plain.do?username="+username, true);	// 建立对服务器的调用
		myRequest.onreadystatechange = updatePage; // 设定处理服务器响应函数
        myRequest.send(null); //用get方式建立调用,必须发送null	

	 function updatePage() {
			if(myRequest.readyState == 4) { //监视服务器端的状态改变. 用于测试响应是否已完成
				if(myRequest.status == 200) {//获得服务器的HTTP状态码. 用于判断数据请求是否成功
					var data = myRequest.responseText; // 获取服务器传递信息
					var res = document.getElementById("message");	
					res.innerHTML = data;
					alert(data); // 通过 responseText 属性来取回由服务器返回的数据
				}				
			}
		}
	}	
</script>			
</head>

<body>
<form action="">
	<table>
    	<tbody>
    		<tr>
  				<td>账号:</td>
  				<td><input name="username" type="text" id="username" onchange="doAjax();"></td> 
  			</tr>
  			<tr>
  				<td>密码:</td>
  				<td><input name="password" type="password"></td>
  			</tr>
    	</tbody>
    </table>
</form>
<p id="message">注册成功???</p>
</body>
</html>

 

PlainServlet.java

 

package com.lian.servlet;

import java.io.IOException;
import java.io.Writer;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class PlainServlet extends HttpServlet {
	
	/*
	 * 接受请求的服务器端程序
	 * 
	 */

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {		
		Writer out = resp.getWriter();
		
		String username = req.getParameter("username");
		
		if("test".equals(username)) {
			out.write("no");
		} else {
			out.write("yes");
		}	
		
	}	
}
 

web.xml相应配置

 

<servlet>
	<servlet-name>PlainServlet</servlet-name>
	<servlet-class>com.lian.servlet.PlainServlet</servlet-class>
</servlet>

<servlet-mapping>
	<servlet-name>PlainServlet</servlet-name>
	<url-pattern>/plain.do</url-pattern>
</servlet-mapping>
 

 

分享到:
评论

相关推荐

    ajax例子及课件详解

    **Ajax(Asynchronous JavaScript and XML)技术详解** Ajax是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术的核心是JavaScript...

    无刷新技术Ajax小例子详解

    讲解了Ajax的应用,Ajax的几种技术的集合,如:JavaScript 、css 、xml 、xmlHttpRequest等

    反向ajax聊天简单例子

    本文将围绕一个基于Java的反向Ajax聊天实例——"反向Ajax聊天简单例子"进行详细解析。 1. 反向Ajax原理: 反向Ajax的核心思想是通过持久连接(Persistent Connection)或轮询(Polling)等技术,使服务器能够在有...

    掌握AJAX 真正详解

    ### 掌握AJAX:真正详解 #### 一、引言 随着互联网技术的飞速发展,用户体验成为了网站设计中的重要考量因素之一。AJAX(Asynchronous JavaScript and XML)作为一种革新性的技术,使得Web应用程序能够提供更加流畅...

    JSP下AJAX例子

    **JSP下AJAX例子详解** AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,提高了用户体验。在...

    ajax3个例子详解(asp.net开发)

    本篇将通过三个具体的例子深入解析AJAX在ASP.NET中的应用。 **例子一:异步更新时间** 这个例子展示了如何使用AJAX来实时更新网页上的时间。我们首先创建一个ASP.NET Web Form,然后添加一个Label控件显示时间,...

    基于java的AJAX例子

    "基于java的AJAX例子"这个压缩包可能包含了多个示例项目,每个项目都展示了不同场景下使用AJAX与Java服务器端通信的方式。这些例子可以帮助你更好地理解AJAX在实际开发中的应用,通过实践加深对AJAX技术的理解。 ...

    AJAX详解,菜鸟请进

    以下是一个简单的AJAX GET请求的例子: ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr....

    jquery,ajax的几个小例子

    **jQuery和Ajax技术详解** jQuery是一款非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及Ajax交互。在Web开发中,jQuery是实现动态和交互性网页的关键工具。Ajax(Asynchronous ...

    ajax技术详解demo源码

    **Ajax技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。Ajax的核心是JavaScript对象...

    ajax php mysql简单例子

    根据提供的文件信息,我们可以将这个简单的 AJAX、PHP 和 MySQL 的示例分解成几个关键的知识点进行详细介绍。 ### 1. AJAX (Asynchronous JavaScript and XML) AJAX 是一种用于创建快速动态网页的技术,它允许在不...

    ajax例子servlet传值

    ### AJAX与Servlet交互详解 #### 一、引言 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛应用于实现网页的部分更新而无需重新加载整个页面,从而提升了用户体验。本文将通过一个具体的例子来...

    ajax简单二级连动例子

    【Ajax简单二级联动例子详解】 在网页开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的异步更新,提供用户更加流畅的交互体验。本例将重点讲解如何利用Ajax实现一个简单的二级联动效果,...

    ajax使用例子 包括返回xml

    **Ajax技术详解与示例应用** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了...

    Ajax的一个小例子—类似google的搜索提示

    **Ajax技术详解** Ajax,全称为"Asynchronous JavaScript and ...这只是一个基础的示例,实际的Web应用可能会涉及更复杂的交互逻辑、错误处理和性能优化,但这个简单的例子已经足以启发我们去探索更高级的Ajax应用。

    JAVA EE Ajax小例子

    **Java EE AJAX小例子详解** 在Java EE开发中,AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式Web应用程序的技术,它允许页面在不重新加载整个页面的情况下与服务器进行异步通信。在这个"JAVA EE ...

    Ajax很简单(jsp例子)

    ### Ajax在JSP中的应用详解 #### 一、引言 随着Web开发技术的不断进步,用户对于网页的交互性和实时性有了更高的要求。Ajax(Asynchronous JavaScript and XML)技术的出现极大地改善了用户体验,使得网页能够实现...

    jquery ajax例子返回值详解

    jQuery提供了简单易用的API来实现AJAX操作,包括$.ajax()、$.post()和$.get()。 1. **$.get()**: 这个函数用于发起GET请求,通常用于从服务器获取数据。在给定的例子中,$.get()接收三个参数:URL("test.jsp")...

    tomcat-servlet-ajax最基础例子

    【标题】"Tomcat-Servlet-Ajax基础实例详解" 在这个基础实例中,我们将探讨如何在Tomcat服务器上使用Servlet和Ajax技术实现一个简单的交互功能。Tomcat是一个流行的开源Java Servlet容器,它允许开发者运行和部署...

    ajax请求例子

    #### 三、jQuery中的$.ajax()方法详解 jQuery库提供了$.ajax()方法简化了原生JavaScript中使用XMLHttpRequest对象的方式。$.ajax()方法接受一个对象作为参数,该对象包含了一系列配置选项,用于定制AJAX请求的行为...

Global site tag (gtag.js) - Google Analytics