`

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

AjaxServlet浏览器JavaScript应用服务器 
阅读更多
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请求方式。
 
分享到：
| Struts2拦截器
评论
1 楼 hedahai119 2009-07-14  
你这个不是所有浏览器都支持的吧

FF的ajax回调函数不是
http_request.onreadystatechange = callback;
这么写吧，而且FF得
http_request.readyState == 4
也只返回1，他是不会返回4的。

你这思路不错 改进下就更好了

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    原生javascript实现的ajax异步封装功能示例

    主要介绍了原生javascript实现的ajax异步封装功能,结合完整实例形式分析了原生javascript实现的ajax异步交互函数与相应的使用方法,需要的朋友可以参考下

    纯js封装的ajax功能函数与用法示例

    本文实例讲述了纯js封装的ajax功能函数与用法。分享给大家供大家参考，具体如下： AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。是7...

    关于二次封装jquery ajax办法示例详解

    前言 Ajax 的全称是Asynchronous JavaScript and XML ...在我们前端处理数据的时候免不了要 ajax 与后台通信， ajax 是通过 XMLHttpRequest 对象与服务器进行通信的， jquery 在 XMLHttpReaquest 的基础上封装了 $.

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    AsyncAjaxSample Ajax异步调用的完整示例 第2章（/C02/） 2.1.htm 3段JS使用形式 2.2.htm 不同浏览器使用“&lt;noscript&gt;&lt;/noscript&gt;” 2.3.htm 调用单独的JS文件 2.3.js 一个单独的...

    python入门到高级全栈工程师培训 第3期 附课件代码

    03 内置函数补充及getattribute 04 getattribue补充 05 item系列 06 str与repr 07 自定制format 08 slots属性 09 doc属性 10 module和class 11 析构方法 12 call方法 13 迭代器协议 14 迭代器协议实现斐波那契数列 ...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -添加定时器控件Timer，用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化Tree控件的AJAX实现。 +为页面的Form添加autocomplete="off"属性。 -参考...

    ExtAspNet_v2.3.2_dll

    -添加定时器控件Timer，用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化Tree控件的AJAX实现。 +为页面的Form添加autocomplete="off"属性。 -参考...

    JavaScript王者归来part.1 总数2

    　7.3.1 构造函数--一个双精度浮点数封装类的例子　 　7.3.2 缺省构造和拷贝构造　 　7.3.3 对象常量　 　7.4 对象的销毁和存储单元的回收　 　7.5 JavaScript的内置对象　 　7.5.1 Math对象　 　7.5.2 Date对象--...

    jquery插件使用方法大全

    延迟对象 延迟对象（Deferred Object，jQuery.Deferred对象）是一个可链接的（chainable）实用工具对象，实现了Promise接口，可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。...

    亮剑.NET深入体验与实战精要2

    本书集实用性、思想性、趣味性于一体，内容共分为技术基础总结、系统架构设计思想及项目实战解析三部分，随书所附光盘收录大量实例代码及独家披露的商业系统，供读者参考学习。 本书适合于.NET初、中级开发人员参考...

    亮剑.NET深入体验与实战精要3

    本书集实用性、思想性、趣味性于一体，内容共分为技术基础总结、系统架构设计思想及项目实战解析三部分，随书所附光盘收录大量实例代码及独家披露的商业系统，供读者参考学习。 本书适合于.NET初、中级开发人员参考...

    asp.net知识库

    SQL server 2005中新增的排序函数及应用 根据基本表结构及其数据生成 INSERT ... 的 SQL 简便的MS SQL 数据库 表内容 脚本 生成器 将表数据生成SQL脚本的存储过程 直接从SQL语句问题贴子数据建表并生成建表语句的...

    JAVA上百实例源码以及开源项目

    　各种EJB之间的调用源码示例，用远程接口的引用访问EJB、函数将被FirstEJB调用，同时它将调用secondEJB 基于JAVA的UDP服务器模型源代码 2个目标文件 摘要:Java源码,网络相关,UDP 　基于JAVA的UDP服务器模型源代码...

    java开源包1

    该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁，通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...

    java开源包11

    该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁，通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...

    java开源包2

    该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁，通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...

    java开源包3

    该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁，通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...

    java开源包6

    该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁，通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...

Magicbox
Global site tag (gtag.js) - Google Analytics