XMLHttpRequest简单接发数据

最新推荐文章于 2022-04-18 16:02:27 发布

iteye_11119

最新推荐文章于 2022-04-18 16:02:27 发布

阅读量142

点赞数

分类专栏： JavaWeb 文章标签： Servlet Java JSP 应用服务器浏览器

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个最基本的Ajax应用：验证用户名的例子：
首先建立一个web project: ajaxTest
webRoot\js(myjs.js)
webRoot\jsp(test1.jsp)
com.zxr.servlet中是Servlet:ServiceServlet.java

test1.jsp:


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
....
<body>
   <li>用户名校验小实验</li>
   <hr/>
   <input id="userName" type="text"/>
   <input type="button" value="提交" onclick="checkvalidate();"/>
   <div id="propmt"></div>
  </body>
.....

ServiceServlet.java


package com.zxr.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

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

import org.apache.commons.lang.StringUtils;

/**
 * 2010-03-28
 * @author zxr
 *
 */

public class ServiceServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		StringBuilder msg=new StringBuilder();
		String name=request.getParameter("name");
		//name=new String(name.getBytes("ISO-8859-1"),"UTF-8");
		name=URLDecoder.decode(name,"UTF-8");

		if(StringUtils.isEmpty(name)){
			msg.append("用户名不能为空");
		}else{
			if(StringUtils.equals(name, "zxr")){
				msg.append("对不起，此用户["+name+"]已存在，请使用别的名称!");
			}else{
				msg.append("恭喜你，此用户名：["+name+"]可以使用！");
			}
		}
		out.print(msg.toString());
		out.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doGet(request, response);
	}

}

web.xml


<servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>ServiceServlet</servlet-name>
    <servlet-class>com.zxr.servlet.ServiceServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>ServiceServlet</servlet-name>
    <url-pattern>/servlet/ServiceServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>jsp/test1.jsp</welcome-file>
  </welcome-file-list>

myjs.js


var xmlhttprequest;
function checkvalidate(){
	//获取页面dom节点的元素的值
	//解决中文乱码问题：方法一：页面端发出 数据做一次encodeURI,服务器端使用new String(xxx.getBytes("ISO-8859-1"),"UTF-8");
	//方法二：页面端做两次encodeURI,服务器端使用URLDecoder.decode(xxx,"UTF-8");即可（推荐使用）
	var username=encodeURI(encodeURI(document.getElementById("userName").value));
	//alert(username);
	//创建XMLHttpRequest对象
	//针对不同浏览器，写出不同的创建方式
	if(window.XMLHttpRequest){
		//针对FirFox, Mozillar,Opera, Safari,IE7,IE8
		xmlhttprequest=new XMLHttpRequest();
		//针对特定的Mozillar浏览器进行bug修正
		if(xmlhttprequest.overrideMimeType){
			xmlhttprequest.overrideMimeType=("text/xml");
		}
	}else if(window.ActiveXObject){
		//针对IE6，IE5
		var activeName=["MSXML@.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i=0; i<activeName.length; i++){
			try{
				//取出一个插件名进行创建，如果成功就终止循环，反正继续循环试图创建
				xmlhttprequest=new ActiveXObject(activeName[i]);
				break;
			}catch(e){}
		}
	}
	//确认XMLHttpRequest对象创建
	if(!xmlhttprequest){
		alert("创建失败");
		return ;
	}else{
		alert("恭喜你创建成功！"+xmlhttprequest);
	}

	//注册回调函数( 注意只需函数名，而不需要())
	xmlhttprequest.onreadystatechange=callback;
	//设置连接信息
	//第一参数：http请求的方式，支持所有http请求方式，主要使用get和post
	//第二参数：请求的服务器端url地址，get方式参数也在其中
	//第三参数：是同步还是异步交互 ： false:同步，true:异步
	xmlhttprequest.open("GET", "servlet/ServiceServlet?name="+username, true);
	//发送数据,开始和服务器端进行交互
	xmlhttprequest.send(null);

}

//回调函数
function callback(){
	//接受响应数据
	//判断对象的状态是否交互 完成
	if(xmlhttprequest.readyState==4){
		//判断http交互是否成功
		if(xmlhttprequest.status==200){
			//获取服务器端返回的数据
			alert(xmlhttprequest.responseText);
			var respText=xmlhttprequest.responseText;
			//将数据 显示在页面上
			var divNode=document.getElementById("propmt");
			divNode.innerHTML=respText;
		}
	}
}

然后在IE或FireFox下输入：http://localhost:8080/ajaxTest/即可测试
对于中文乱码，我在Opera浏览器下测试未成功，请大家多指教，以解吾之惑....

iteye_11119

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest简单接发数据

一个最基本的Ajax应用：验证用户名的例子：首先建立一个web project: ajaxTestwebRoot\js(myjs.js)webRoot\jsp(test1.jsp)com.zxr.servlet中是Servlet:ServiceServlet.javatest1.jsp:[code="jsp"].... 用户名校验小实验 ...
复制链接

扫一扫