您的位置：首页 > 其它

30分钟学会使用Ajax：<二>

2011-10-03 19:45 351 查看

下面例子是介绍使用Ajax的post 方法，ajax的post方法使用比较多。

这个例子的作用是：输入一个用户名，检查下用户名是否可以用。

<一>：建个ajax的工具类

(1)：建个ajaxUtils.js

(2)：里面代码如下

var Ajax = {
createXHR : function() {// 创建XHR对象
if (window.XMLHttpRequest) {// 针对除IE浏览器以外的
var xhr = new XMLHttpRequest();
return xhr;
} else if (window.ActiveXObject) {// 针对IE浏览器的
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
return xhr;
}
},
sendRequest : function(method, url, data, callback) {// callback代表函数名
var xhr = this.createXHR();
xhr.open(method, url, true);
if ("GET" == method.toUpperCase()) {
xhr.send(null);
} else if ("POST" == method.toUpperCase()) {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// callback(xhr);可以这样
callback({
text : xhr.responseText,
xml : xhr.responseXML
});// 也可以这样。这样最好，面向对象
}
}
}
};

<二>：建jsp，在jsp中引入ajaxUtils.js工具类，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">
<script type="text/javascript" src="${pageContext.request.contextPath }/jsp/ajax/ajaxUtils.js"">
</script>
<script type="text/javascript">
function checkUserName(){
var username = document.getElementById("name").value;
var password = document.getElementById("pwd").value;

var url = "${pageContext.request.contextPath }/servlet/AjaxPostServlet";
// 使用Ajax工具类，4个入参
// 第一个入参：字符串"get"
// 第二个入参：请求的url
// 第三个入参：请求的参数
// 第四个入参：回调函数，函数名随便起，这里我起了callback
Ajax.sendRequest("post",url,"username="+username+"&password"+password, callback);
}

// 经过Servlet处理后返回的信息
function callback(data){
// 后台返回的是字符串，就用data.text，如果返回的是xml对象，则就用data.xml
var value = data.text;

//这个value要么是Servlet里out.print()里的内容
alert(value);
}

</script>
<title>学习ajax的Post方法</title>
</head>
<body>
<center>
<form action="" method="post">
username：<input type="text" size="25" value="" id="name" name="username"/><input type="button" value="检查是否被占用" onclick="checkUserName();"/>
<br />
<br /><br />
password：<input type="password" size="25" value="" id="pwd" name="password" />
<br /><br />
</form>
</center>
</body>
</html>

<3>：配置WEB-INF下面的web.xml

<servlet>
<servlet-name>ajaxPostServlet</servlet-name>
<servlet-class>com.web.AjaxPostServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxPostServlet</servlet-name>
<url-pattern>/servlet/AjaxPostServlet</url-pattern>
</servlet-mapping>

<4>：建Servlet，如AjaxPostServlet，代码如下

package com.web;

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;

public class AjaxPostServlet extends HttpServlet{

@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();

String username = request.getParameter("username");
String password =request.getParameter("password");

if("zhangsan".equals(username)){
//此处是out.print不是out.println
out.print("不可用");//out.print()里的内容将会输出到jsp页面中callback函数里
}else{
out.print("可以使用");
}
out.flush();
out.close();
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

30分钟学会使用Ajax：&lt;二&gt;

30分钟学会使用Ajax：<二>