欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程

目录导航

收藏的一个纯js ajax封装类

美国西岸机房 添加于 2014-02-03  

javascript教程

xmlhttp.js

function $() {
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1)
      return element;
    elements.push(element);
  }
  return elements;
}

//封装XMLHTTP的Request类的代码 
var Request = new Object();
//定义一个XMLHTTP的数组
Request.reqList = [];
//创建一个XMLHTTP对象,兼容不同的浏览器
function getAjax()
{
    var ajax=false; 
    try 
    { 
     ajax = new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch (e)
     { 
      try 
      { 
      ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
     catch (E)
      { 
      ajax = false; 
      } 
    }
    if (!ajax && typeof XMLHttpRequest!='undefined') 
    { 
     ajax = new XMLHttpRequest(); 
    } 
    return ajax;
}
//封装XMLHTTP向服务器发送请求的操作
//url:向服务器请求的路径;method:请求的方法,即是GET还是POST;callback:当服务器成功返回结果时,调用的函数
//data:向服务器请求时附带的数据;urlencoded:url是否编码;callback2;当服务器返回错误时调用的函数
Request.send = function(url, method, callback, data, urlencoded, callback2)
 { 
    var req=getAjax();  //得到一个XMLHTTP的实例
    //当XMLHTTP的请求状态发生改变时调用
    req.onreadystatechange = function() 
    {
    // 当请求已经加载
    if (req.readyState == 4) 
    {
            // 当请求返回成功
            if (req.status < 400) 
            {
            // 当定义了成功回调函数时,执行成功回调函数
            if(callback)
                callback(req,data);
            } 
            // 当请求返回错误
            else 
            {
                alert("当加载数据时发生错误 :\n" + req.status+ "/" + req.statusText);
                //当定义了失败回调函数时,执行失败回调函数
                if (callback2) 
                callback2(req,data);
            }
            //服务器已经进行了处理,更改界面提示信息
            afterLoading();
            //删除XMLHTTP,释放资源
            try {
                delete req;
                req = null;
            } catch (e) {}
        }
    }
    //如果以POST方式回发服务器
    if (method=="POST")
     {
        req.open("POST", url, true);
        //请求需要编码
        if (urlencoded) 
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');        
        req.send(data);
        Request.reqList.push(req);
    }
    //以GET方式请求
     else 
    {
        req.open("GET", url, true);
        req.send(null);
        Request.reqList.push(req);
    }
    //正在向服务器发送请求,页面显示正在加载的提示
    loading();    
    return req;
}
//全部清除XMLHTTP数组元素,释放资源
Request.clearReqList = function() 
{
    var ln = Request.reqList.length;
    for (var i=0; i<ln; i++) {
        var req = Request.reqList[i];
        if (req) 
        {
        try 
        {
            delete req;
        } catch(e) {}
        }
    }
    Request.reqList = [];
}
//进一步封装XMLHTTP以POST方式发送请求时的代码
//clear:是否清除XMLHTTP数组的所有元素;其他参数的意义参见Request.send
Request.sendPOST = function(url, data, callback, clear, callback2) 
{
    if (clear)
        Request.clearReqList();
    Request.send(url, "POST", callback, data, true, callback2);
}
//进一步封装XMLHTTP以GET方式发送请求时的代码
Request.sendGET = function(url, callback, args, clear, callback2) 
{
    if (clear)
        Request.clearReqList();
    return Request.send(url, "GET", callback, args, false, callback2);
}
//向服务器发送请求过程中,显示页面加载提示
function loading()
{
var div = $("loadingflag");
if(div)
div.style.display ="";
}
//服务器处理完成后,页面加载提示消失
function afterLoading()
{
var div = $("loadingflag");
if(div)
div.style.display ="none";
}

使用例子:

test.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script src="xmlhttp.js" type="text/javascript"></script>
     <script type="text/javascript">
    function go()
    {
      var post="name="+$("txtName").value+"&pwd="+$("txtPwd").value;
      Request.sendPOST("Handler.ashx",post,rec,null,null);
    }
    function rec(req,data)
    {    
      var retext=req.responseText;
      $("result").innerHTML=retext;
    }
    </script>
</head>
<body>
<div>用户名:<input type="text" id="txtName" /></div>
<div>密码:<input type="text" id="txtPwd" /></div>
<div><input type="button" id="btnOK" onclick="go()" value="提交" /><span id="result"></span></div>
<div id="loadingflag" style="display:none">数据提交中,请等待...</div>
</body>
</html>

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string name = context.Request.Params["name"].ToString();
        string pwd = context.Request.Params["pwd"].ToString();
        if (name != "gdjlc" && pwd != "gdjlc")
            context.Response.Write("用户名或密码错误。");
        else
            context.Response.Write("正确,进入系统。");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

本文出自零度科技转载请注明出处:http://www.ldisp.com/a/javascript/2014/2649.shtml

上一篇:browserLanguage 和language取浏览器设置的首选语言
下一篇:高性能JavaScript模板引擎原理解析

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理