`

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的。

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

发表评论

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

相关推荐

    Ajax 异步请求-校验用户名唯一性

    这可以通过Ajax异步请求来实现，无需用户等待整个页面刷新，提供更好的用户体验。 以下是一般的步骤： 1. **前端视图（View）**：在HTML表单中，我们添加一个事件监听器，如`onkeyup`或`onblur`，当用户在用户名...

    Ajax异步处理封装

    以下是一个简单的Ajax封装示例： ```javascript function ajax(url, type, callback, data) { var xhr = new XMLHttpRequest(); xhr.open(type, url, true); // 如果是POST请求，设置请求头 if (type === '...

    JS封装的AJAX函数

    使用这个封装的AJAX函数，你可以轻松地在代码中发起异步请求，比如获取某个API的数据： ```javascript ajaxGet('https://api.example.com/data', function(err, data) { if (err) { console.error(err); } else ...

    ajax异步提交源代码

    本文将深入探讨Ajax异步提交的核心概念，并通过两个示例——一个使用纯JavaScript与Servlet交互，另一个利用Prototype JS框架与Action通信——来阐述其实现过程。 首先，让我们理解Ajax的基本原理。Ajax工作流程...

    自己用的简单封装AJAX类

    7. **跨域请求**：AJAX的同源策略限制及CORS（跨源资源共享）的实现。 8. **JSONP**：对于跨域请求的一种非标准解决方案，如果AJAX类支持JSONP，会涉及相关原理。 9. **Promise和async/await**：现代JavaScript中...

    Jquery 封装下的ajax异步加载

    本资源提供了一个基于jQuery的AJAX异步加载的Web项目实例，通过导入MyEclipse开发环境即可运行，涉及到的主要技术包括jQuery、JSON以及Servlet。 ### jQuery中的AJAX jQuery提供了`.ajax()`函数，它是所有AJAX功能...

    Ajax 异步传输应用

    不过，由于没有给出具体代码内容，这里只能假设它可能包含了一些用于创建和管理Ajax请求的函数或类。 一个简单的Ajax请求示例可以这样编写： ```javascript function sendAjaxRequest(url, callback) { var xhr =...

    Ajax的小封装 get,post请求

    在描述中提到了对Ajax的get请求的小封装，这意味着我们将会讨论如何用JavaScript来构建一个简易的Ajax GET请求函数，并可能涉及POST请求的实现。 ### 1. Ajax GET 请求小封装 GET请求是最常见的HTTP方法，用于从...

    jquery请求servlet实现ajax异步请求的示例

    知识点六：实现ajax请求的代码示例 1. 使用$.ajax()方法发起ajax请求：创建一个$.ajax()方法，并设置请求的URL、类型、数据类型、发送的数据以及请求完成后的回调函数。 2. 使用$.get()和$.post()方法发起GET和POST...

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

    上述示例展示了如何封装一个适用于IE6及以上浏览器的AJAX异步请求函数，以及如何在实际项目中使用该函数发送请求并处理响应。掌握这些知识点对于前端开发者来说是非常重要的，因为它不仅涉及到了AJAX的基础用法，还...

    ajax简单示例和封装库

    这个封装的ajax函数接受URL、请求类型、回调函数和数据作为参数，简化了Ajax的使用。 在压缩包文件"ajax示例和封装库"中，可能包含了这些示例代码和封装好的Ajax库，可以直接在项目中使用，以提高开发效率。只需...

    ajaxTest 实用简单封装

    总结，AjaxTest的实用简单封装主要涵盖了Ajax的基本操作，包括GET和POST请求，以及同步和异步提交方式。通过封装这些功能，开发者可以快速地在ASP.NET环境中构建交互性强、用户体验良好的网页应用。

    ajax代码及简单封装

    ### AJAX代码及简单封装知识点详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现这一功能...

    异步请求分页示例：handler.ashx + $.ajax() + Json + 分页处理

    其次，`$.ajax()`是jQuery库中的一个核心函数，用于执行异步HTTP（Ajax）请求。它允许开发者在不刷新整个页面的情况下，从服务器获取数据并更新部分网页内容。在这个场景中，前端会使用`$.ajax()`发送请求到`handler...

    javascript跨域请求包装函数与用法示例.docx

    本文介绍了一种实现跨域请求的JavaScript封装函数，并通过具体的示例代码展示了其使用方法。这种封装函数可以帮助开发者更方便地处理跨域问题，提高代码的可维护性和扩展性。在实际开发中，应根据项目需求选择合适的...

    jquery ajax方法的再封装

    在Web开发中，`jQuery.ajax()`是进行异步数据请求的核心方法，它允许我们与服务器进行通信，获取或发送数据而无需刷新页面。然而，随着项目复杂性的增加，直接使用`$.ajax()`可能会导致代码变得冗余和难以维护。因此...

    ajax 异步传输php代码

    &lt;title&gt;Ajax异步传输示例 &lt;script src="ajaxcls.js"&gt;&lt;/script&gt; ()"&gt;加载数据 &lt;div id="dataContainer"&gt;&lt;/div&gt; function loadData() { var ajax = new Ajax(); ajax.get('server.php', function...

    js写AJAX 异步调用 －实现回调

    本文将深入讲解如何使用纯JavaScript编写AJAX异步调用，并实现回调函数处理返回的数据，同时涉及XML的XSL转换。 一、AJAX基础 1. 创建XMLHttpRequest对象：在JavaScript中，我们需要首先创建一个XMLHttpRequest...

    ExtJs异步请求和特殊用途

    在ExtJS中，异步请求（通常指的是Ajax请求）是实现动态数据加载、用户界面更新等关键功能的基础。Ajax框架允许开发者在不刷新整个页面的情况下与服务器进行通信，从而提供更流畅的用户体验。 1. **异步请求原理**：...

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