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技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存到数据库。打开阅读RSS时,自动获取最新的RSS内容,而无需刷新页面。 /RSSReader.jsp RSS阅读器 /rss.js ...
在Ajax的帮助下我们的网页只需局部刷新即可更新数据的显示,减少了不必要的数据量,大大提高了用户体验,缩短了用户等待的时间,使得web应用程序更小、更快,更友好。当然以上都是司空见惯的内容了,作为一名合格的...
在Ajax的帮助下我们的网页只需局部刷新即可更新数据的显示,减少了不必要的数据量,大大提高了用户体验,缩短了用户等待的时间,使得web应用程序更小、更快,更友好。 当然以上都是司空见惯的内容了,作
5、Pjax局部加载,Ajax评论无刷新多次提交,Ajax全文即时搜索,G头像缓存,动态Title标题 6、全站自响应图片预览,导航悬浮,滚动微语,访客/博主评论样式区别,访客操作系统、浏览器、IP地址记录… 功能详解...
外部控件引发局部刷新 338 8.2.6 Ajax错误处理 341 8.2.7 告诉用户你正在做什么—— UpdateProgress控件 342 8.2.8 ASP.NET AjaxControToolKit简介 345 8.3 使用第三方组件 Ajax.dll 开发 347 8.4 使用第三方组件...
外部控件引发局部刷新 338 8.2.6 Ajax错误处理 341 8.2.7 告诉用户你正在做什么—— UpdateProgress控件 342 8.2.8 ASP.NET AjaxControToolKit简介 345 8.3 使用第三方组件 Ajax.dll 开发 347 8.4 使用第三方组件...
ORACLE_SID=oral10g\ --变局部变量 export ORACLE_SID --变全局变量 unset ORACLE_SID --卸载环境变量 ORACLE_HOME=... --安装路径;直接用一句语句也可以,如下 export ORACLE_HOME=/oracledata/.../bin: ...
AJAX:异步JavaScript和XML(AJAX)技术被用来实现页面的局部更新,而不需要刷新整个页面,从而提供更流畅的用户体验。 jQuery:这个快速、小巧且功能丰富的JavaScript库,使得HTML文档遍历和操作、事件处理、动画...
2、 Ajax我们主要应用就是xmlhttprequest,回调函数实现局部刷新达道数据更新! 4.2需求分析 Blog网站主要是实现注册用户登录、管理相关信息、博文及相关评论、查看留言、友情链接、及图片的上传和图像的播放而为...
-ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...
2、 Ajax我们主要应用就是xmlhttprequest,回调函数实现局部刷新达道数据更新! 4.2需求分析 Blog网站主要是实现注册用户登录、管理相关信息、博文及相关评论、查看留言、友情链接、及图片的上传和图像的播放而为...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...
167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求? 41 171、AJAX都有哪些有点和缺点? ...
167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求? 41 171、AJAX都有哪些有点和缺点? ...
强大的SEO优化处理使网站优化一步到位,商品大类、小类、子类均增加了商品关键词(keywords)以及描述(DESCRIPTION),可以对所有类别进行关键词设置,大大提高搜索引擎优化的搜索力度,同时增加商品大类、小类、子类...
• sample03.htm 局部变量的使用方式 • sample04.htm 在函数体中定义全局变量 • sample05.htm 使用没有定义的变量 • sample06.htm 重复定义变量 • sample07.htm 引用未...