`

ajax局部刷新及小程序

    博客分类:
  • ajax
 
阅读更多
XMLHttpRequest为运行于浏览器中的javascript脚本提供了一种在页面内与服务器通信

的手段,这样就使得页面内的javascript可以在不刷新页面的前提下,向服务器提交数据,

及从服务器获取数据

实现功能:当输入学号后,自动补充姓名和性别

程序代码如下:
User代码如下:
package com.bean;

public class User {
	
	private String no;
	
	private String username;
	
	private String sex;

	public String getNo() {
		return no;
	}

	public void setNo(String no) {
		this.no = no;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

}



GetServlet代码如下:
package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.bean.User;


public class GetUser extends  HttpServlet{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		String no = request.getParameter("no");
		List<User> list = new ArrayList<User>();
		
		User user1 = new User();
		User user2 = new User();
		User user3 = new User();
		user1.setNo("101");
		user1.setUsername("liyi");
		user1.setSex("male");
		
		user2.setNo("102");
		user2.setUsername("zhangsan");
		user2.setSex("male");
		
		user3.setNo("103");
		user3.setUsername("lisi");
		user3.setSex("female");
		
		list.add(user1);
		list.add(user2);
		list.add(user3);
		System.out.println("success invoke service!");
		
		PrintWriter out = response.getWriter();
		response.setContentType("text/xml");
		response.setCharacterEncoding("utf-8");
		response.setHeader("Cache-Control", "no-cache");
		out.println("<?xml version='1.0' encoding='utf-8'?>");
		out.println("<response>");       
		for(int i=0;i<list.size();i++){ 
			if(list.get(i).getNo().equalsIgnoreCase(no)){  
				out.print("<username>"+list.get(i).getUsername()+"</username>");    
				out.print("<sex>"+list.get(i).getSex()+"</sex>");    
				}   
			}    
		out.println("</response>");   
		out.flush();
		out.close();  
	}
	
}



web.xml代码:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

	<servlet>
		<servlet-name>GetUser</servlet-name>
		<servlet-class>com.servlet.GetUser</servlet-class>
	</servlet>
	
	<servlet-mapping>
	  <servlet-name>GetUser</servlet-name>
	  <url-pattern>/GetUser</url-pattern>
	</servlet-mapping>
</web-app>



index.jsp代码:
<%@ 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>ajax</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">
	 var xmlHttp;
	 
	 function makeRequest(){
		 if(window.XMLHttpRequest){
			 xmlHttp = new XMLHttpRequest();
		 }else if(window.ActiveXObject){
			 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		 }
	 }
	 function createAjax(no){
		 makeRequest();
		 var url = "GetUser?no="+no;
		 xmlHttp.open('GET',url,true);
		 xmlHttp.onreadystatechange=callback;
		 xmlHttp.setRequestHeader("Content-Type","text/html;charset=utf-8");
		 xmlHttp.send(null);
	 }
	 function callback(){
		 window.alert(document.getElementById('no').value);
		 if(xmlHttp.readyState==4){
			 if(xmlHttp.status==200){
				 xmlDom = xmlHttp.responseXML;
				 document.getElementById('username').value=xmlDom.getElementsByTagName("username")[0].firstChild.data;
				 document.getElementById('sex').value=xmlDom.getElementsByTagName("sex")[0].firstChild.data;
			 }else{
				 window.alert("xmlHttp status :"+xmlHttp.status);
			 }
		 }else{
			 window.alert(xmlHttp.readyState);
		 }
	 }
	</script>
  </head>
  
  <body>
  <div style="margin-top: 50px;"></div>
    <table cellpadding="0" cellspacing="0" bgcolor="#33CCFF" border="0" align="center">
     <tr>
      <td>学号:</td>
      <td>
        <input id="no" name="no" onblur="createAjax(this.value);">
      </td>
     </tr>
     <tr>
      <td>姓名:</td>
      <td>
       <input id="username" name="username">
      </td>
     </tr>
     <tr>
      <td>性别:</td>
      <td>
       <input id="sex" name="sex">
      </td>
     </tr>
    </table>
  </body>
</html>



运行结果:


  • 大小: 9.2 KB
分享到:
评论

相关推荐

    AJAX小程序

    "AJAX小程序"是利用这种技术构建的小型Web应用,它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,为用户带来流畅的互动体验。例如,一个“播放器类型”的AJAX小程序,可能具备无需跳转页面就能...

    局部刷新功能实现

    局部刷新功能是软件开发中的一个重要概念,特别是在用户界面(UI)设计和优化中。它允许应用程序只更新屏幕上的特定部分,而不是整个页面或窗口,从而提高了性能、降低了资源消耗,并提供了更好的用户体验。局部刷新...

    定时刷新页面小程序

    【定时刷新页面小程序】是一种网页应用,主要用于实时同步页面中的数据,提高用户体验。在Web开发中,有时我们需要确保用户看到的信息是最新的,特别是在处理实时数据如股票行情、天气预报或者在线聊天室等场景。该...

    asp.net 的 ajax刷新

    UpdatePanel是实现局部刷新的核心控件,它创建了一个可以异步更新的区域。当UpdatePanel内的控件触发事件时,服务器端的代码会执行,然后只有UpdatePanel的内容会被替换,而不是整个页面。 2. jQuery AJAX: ...

    Ajax无刷新上传 示例程序.rar

    综上所述,"Ajax无刷新上传 示例程序.rar"包含了一个完整的Ajax无刷新上传解决方案,从客户端的HTML和JavaScript到服务器端的ASP处理,以及进度反馈机制。这个实例对初学者来说是很好的学习材料,可以帮助他们理解和...

    springmvc tiles 局部刷新

    总的来说,Spring MVC和Tiles的局部刷新是通过整合前端的AJAX技术与后端的Controller处理来实现的,它提升了Web应用的性能和用户体验。理解并熟练掌握这一技术对于开发高效、用户友好的Web应用至关重要。

    如何使用Ajax技术开发Web应用程序

    总结起来,Ajax技术通过JavaScript和XMLHttpRequest对象实现了Web页面的局部更新,减少了页面的刷新,提高了交互性和效率。通过逐步学习和实践,开发者可以利用Ajax技术构建更高效、更动态的Web应用程序。在后续的...

    ASP.NET AJAX无刷新分页演示包

    ASP.NET AJAX无刷新分页是一种高效且用户友好的网页交互技术,它允许用户在不重新加载整个页面的情况下更新页面的部分内容。在这个"ASP.NET AJAX无刷新分页演示包"中,开发者使用了Visual Studio 2008和Access数据库...

    AJax组件 无刷新

    描述中的"AJax的一款很小的无刷新组件,直接引用到vs的控件栏里然后拖进项目用就好了"表明这是一个适用于Visual Studio (VS) 开发环境的Ajax组件,开发者可以方便地将它添加到工具箱中,通过简单的拖放操作将其整合...

    基于ASP的Ajax无刷新文件上传.zip

    【标题】"基于ASP的Ajax无刷新文件上传"是一个典型的Web开发技术应用场景,它结合了Active Server Pages(ASP)和Asynchronous JavaScript and XML(Ajax)技术,实现了在不刷新整个网页的情况下进行文件上传,提高...

    基于ajax及jQurey实现局部刷新过程解析

    本文主要讲解了如何使用Ajax技术和jQuery库来实现Web页面的局部刷新功能。局部刷新是一种常用的Web开发技术,可以在不重新加载整个页面的情况下,更新页面的部分内容。这种方法提高了用户体验,减少了服务器负载,...

    Ajax示例程序及PPT

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够...总的来说,"Ajax示例程序及PPT"将帮助我们深入理解Ajax的工作机制,学习如何在实际项目中应用Ajax,提升网页的交互性和效率。

    springmvc集成 tiles2实现页面模板局部刷新

    在本文中,我们将深入探讨如何将Spring MVC框架与Tiles2框架集成,以便实现在Web应用程序中的页面模板和局部刷新功能,同时确保浏览器自适应高度。Tiles2是一个强大的视图层框架,它允许开发者创建可重用的页面组件...

    ajax安装用于无刷新技术

    例如,UpdatePanel控件可以实现局部刷新,而ScriptManager控件是使用ASP.NET AJAX的基础,它管理客户端脚本和Ajax请求。 4. **Web服务或PageMethods**: 为了处理Ajax请求,服务器端需要提供一个接收和响应的接口。...

    基于ASP的Ajax无刷新上传(ASP)最简单的调用方法11.28.zip

    Ajax(Asynchronous JavaScript and XML)则是利用JavaScript异步通信与XML数据交换的技术,它允许在后台与服务器交换数据并局部更新页面,提高了用户体验。 在ASP环境中实现Ajax无刷新上传,主要涉及以下几个关键...

    ASP.NET+AJAX程序设计(第一卷:服务器端)

    这些控件允许开发者在不离开当前页面的情况下进行异步操作,如UpdatePanel可以实现局部刷新,ScriptManager则负责管理客户端脚本。 **服务器端AJAX处理** 服务器端的AJAX处理主要涉及以下几个关键组件: 1. **...

    ajax+servelet无刷新显示用户名

    Ajax的核心是JavaScript对象XMLHttpRequest,通过这个对象,前端可以向服务器发送请求,获取响应,并在后台处理这些数据,更新部分DOM元素,从而实现页面局部刷新。在这个例子中,用户注册时输入用户名,Ajax负责在...

    ajax+json程序代码

    Ajax是一种在不刷新整个网页的情况下,通过后台与服务器交换数据并局部更新网页的技术。它通过JavaScript的XMLHttpRequest对象实现,可以提高用户体验,使得网页更具响应性。然而,实际应用中,XML并不是Ajax传输...

    AJAX编写用户注册实例及技术小结

    AJAX技术的一个关键优势是实现了局部刷新,即只更新页面的特定部分,而不是整个页面。在这个例子中,用户无需等待页面刷新就能看到用户名或企业名是否可用的结果。 8. **用户体验优化**: 通过使用AJAX,用户在...

Global site tag (gtag.js) - Google Analytics