AJAX异步请求函数的封装及示例

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." );
        return false ;
    }
    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;
 
 
/**
  * 处理异常请求
  * @author qiujy
  * @version 1.0
  */
public class AJAXServlet extends HttpServlet {
   
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
 
        this .doPost(request, response);
    }
   
    public void 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请求方式。
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值