AJAX异步请求函数的封装及示例
++YONG原创，转载请注明
1. 封装函数：
封装的一个异步请求发送的函数和一个回调函数的模板：myAjax.js
|
//定义XMLHttpRequest对象实例
var http_request = false;
/*************************************************************************
* 方法说明：可复用的http请求发送函数
* 参数说明：
* method：请求方式(GET/POST)
* url：目标URL
* content：用POST方式发出请求时想传给服务器的数据，
* 数据以查询字串的方式列出，如：name=value&anothername=othervalue。
* 若用GET方式：请传null
* responseType：响应内容的格式(text/xml)
* callback：要回调的函数
*************************************************************************/
function sendRequest(method, url, content, responseType, callback) {
http_request = false;
//开始初始化XMLHttpRequest对象
if (window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType("text/xml");
}
} else {
if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
}
if (!http_request) { // 异常,创建对象实例失败
//"不能创建XMLHttpRequest对象实例"
window.alert("\u4e0d\u80fd\u521b\u5efaXMLHttpRequest\u5bf9\u8c61\u5b9e\u4f8b.");
returnfalse;
}
if (responseType.toLowerCase() == "text") {
http_request.onreadystatechange = callback;
} else {
if (responseType.toLowerCase() == "xml") {
http_request.onreadystatechange = callback;
}else {
//"响应类别参数错误"
window.alert("\u54cd\u5e94\u7c7b\u522b\u53c2\u6570\u9519\u8bef\u3002");
return false;
}
}
// 确定发送请求的方式和URL以及是否异步执行下段代码
if (method.toLowerCase() == "get") {
http_request.open(method, url, true);
} else {
if (method.toLowerCase() == "post") {
http_request.open(method, url, true);
http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
} else {
//http请求类别参数错误
window.alert("http\u8bf7\u6c42\u7c7b\u522b\u53c2\u6570\u9519\u8bef\u3002");
return false;
}
}
//开始发起浏览请求
http_request.send(content);
}
/*************************************************************************
*
* 方法说明：回调函数(处理返回信息的函数)模板
*
*************************************************************************/
function processResponse() {
// 请求已完成
if (http_request.readyState == 4) {
// 信息已经成功返回，开始处理信息
if (http_request.status == 200) {
//返回的是文本格式信息
alert(http_request.responseText);
//返回的XML格式文档就用alert(http_request.responseXML);
} else { //页面不正常
//"您所请求的页面有异常"
alert("\u60a8\u6240\u8bf7\u6c42\u7684\u9875\u9762\u6709\u5f02\u5e38\u3002");
}
}
}
|
注释写得很清楚了，不作过多解释，注意理解sendRequest方法。
2. 示例：
2.1. 创建一页面：index.jsp
主要解决调用以上封装的函数
|
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<title>first AJAX demo</title>
<script language="JavaScript" src="js/myAjax.js"></script>
</head>
<body>
请输入用户名：
<input type="text" name="userName" onblur="myRequest()" />
<label id="msg" style="color: red" />
</body>
<script type="text/javascript">
//请求函数
function myRequest(){
var name;
if (document.getElementById("userName") != undefined) {
name = document.getElementById("userName").value;
}
//URL未尾要加个随机数，以免请求不能再次提交
var url = "ajaxRequest.do?time=" + Math.random();
//要提交到服务器的数据
var content = "userName=" + name;
//调用异常请求提交的函数
sendRequest("POST",url,content,"TEXT",processResponse);
}
//回调函数
function processResponse(){
// 请求已完成
if (http_request.readyState == 4) {
// 信息已经成功返回，开始处理信息
if (http_request.status == 200) {
var msg = document.getElementById("msg");
if(msg != undefined){
//返回的是文本格式信息
msg.innerText = http_request.responseText;
}
} else { //页面不正常
//"您所请求的页面有异常"
alert("\u60a8\u6240\u8bf7\u6c42\u7684\u9875\u9762\u6709\u5f02\u5e38\u3002");
}
}
}
</script>
</html>
|
如上页面中，当文本框失去焦点时，就会调用myRequest()函数，在这个函数中调用异常请求函数来发送数据到相应的Servlet中。
2.2. AJAXSevlet.java：
|
package org.qiujy.web.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*处理异常请求
*@authorqiujy
*@version1.0
*/
publicclass AJAXServlet extends HttpServlet {
publicvoid doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
publicvoid doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("AJAX请求已经到达Sevlet。。。。");
// 解决AJAX的中文问题
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String name = request.getParameter("userName");
System.out.println("userName===" + name);
if(name.matches("\\w{6,20}")){
response.getWriter().write("用户名：" + name + " 合法!");
}else{
response.getWriter().write("用户名：" + name + " 不合法!");
}
}
}
|
2.3. 运行结果：
鼠标离开文本框时：
2.4. 本例源代码：
3. AJAX中文问题：
利用AJAX来处理异常请求时，常出现中文乱码问题，我的解决方案是：把整个应用程序的编码都设置成UTF-8，就决对不会出现乱码问题了。同时在提交请求数据时为了避免URL传中文参数的问题，改用POST请求方式。