30分钟学会使用Ajax：<一>
下面的例子是使用Ajax的get方法进行异步请求。
这个例子的作用是：输入一个用户名，检查下用户名是否可以用。
一：首先写个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，建个check.jsp，在jsp中把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">
<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/AjaxGetServlet?username="+username+"&password="+password;
// 使用Ajax工具类，4个入参
// 第一个入参：字符串"get"
// 第二个入参：请求的url
// 第三个入参：null
// 第四个入参：回调函数，函数名随便起，这里我起了callback
Ajax.sendRequest("get",url,null, callback);
}
// 经过Servlet处理后返回的信息
function callback(data){
// 后台返回的是字符串，就用data.text，如果返回的是xml对象，则就用data.xml
var value = data.text;
//这个value要么是Servlet里out.print()里的内容
alert(value);
}
</script>
<title>学习ajax的Get方法</title>
</head>
<body>
<center>
<form action="" method="get">
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>
三：在WEB-INF\web.xml中配置servlet
<servlet> <servlet-name>ajaxGetServlet</servlet-name> <servlet-class>com.web.AjaxGetServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ajaxGetServlet</servlet-name> <url-pattern>/servlet/AjaxGetServlet</url-pattern> </servlet-mapping>
四：在包名com.web下建个Servlet，如：AjaxGetServlet，Servlet里的代码
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 AjaxGetServlet 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();
}
}
下一节将讲述Ajax的post方法，事实上post方法使用的最多