您的位置:首页 > 其它

30分钟学会使用Ajax:<一>

2011-10-03 18:27 29 查看
下面的例子是使用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方法使用的最多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: