用JS类实现简单Ajax效果

来源：互联网发布：苏联集体农庄知乎编辑：程序博客网时间：2024/05/17 02:07

Ajax.js:

/**
AJAX类库 0.9
@appellation    AJAX Lib 0.9
@author         KinM
@date           2008-08-08
@copyright      KinM
*/
function AJAXLib()
{
    /**
    成员变量
    */
    this.XMLHttpReq = null;                     //XML对象 
    this.method = "post";                       //执行的方法(post/get) 
    this.URLString = "";                        //异步调用的页面地址 
    this.response = "";                         //异步返回的响应字符串 
    this.responseXML = "";                      //异步返回的响应XML 
    this.failed = false;                        //创建对象错误标志 
    
    /**
    事件区
    */
    this.onLoading = function() { };            //正在发送请求 
    this.onLoaded = function() { };             //已经接收到全部响应内容 
    this.onInteractive = function() { };        //正在解析响应内容 
    this.onCompletion = function() { };         //响应内容解析完成 
    this.onError = function() { };              //异步错误处理事件 
    this.onFail = function() { };               //创建对象失败处理世界 
    
    /**
    重置所有事件函数
    */
    this.resetFunctions = function() {
        this.onLoading = function() { };
        this.onLoaded = function() { };
        this.onInteractive = function() { };
        this.onCompletion = function() { };
        this.onError = function() { };
        this.onFail = function() { };
    };
    
    /**
    初始化函数(构造时自动初始化)
    */
    this.Init = function()
    {
       //对于Mozilla浏览器 
        if(window.XMLHttpRequest)
        {
            //直接使用XMLHttpRequest函数来创建XMLHttpRequest对象 
            this.XMLHttpReq = new XMLHttpRequest();
        }
        //对于IE浏览器 
        else if (window.ActiveXObject)
        {
            try
            {
                this.XMLHttpReq = new ActiveXObject("Msxml4.XMLHTTP");
            }
            catch(e)
            {
                try
                {
                    this.XMLHttpReq = new ActiveXObject("Msxml3.XMLHTTP");
                }
                catch(e)
                {
                    try
                    {
                        this.XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch(e)
                    {
                        try
                        {
                            this.XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                        } 
                        catch(oc)
                        {
                            this.failed=true;   //创建AJAX对象发生异常 
                        }
                    }
                }
            }
            try
            {
                //使用AcitveXObject函数创建浏览器 
                this.XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                //如果出现异常，再次尝试以如下方式创建XMLHttpRequest对象 
                try
                {
                    this.XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e)
                {
                    this.failed=true;   //创建AJAX对象发生异常 
                }
            }
        }
    };
    
    /**
    发送请求函数
    @param data 发送的数据
    @example send("id=1");
    */
    this.Send=function(data)
    {
        var self=this;
        //通过open方法取得与服务器的连接 
        if(this.method=="post")
        {
            this.XMLHttpReq.open(self.method,self.URLString,true);
        }
        else
        {
            this.XMLHttpReq.open(self.method,self.URLString+"?"+encodeURI(data),true);
        }
        //添加消息响应头 
        this.XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        
        //异步回调函数 
        this.XMLHttpReq.onreadystatechange = function()
        {
            //对象未创建 
            if (self.failed) {
                self.onFail();
                return;
            }
            
            //消息响应标志 
            switch (self.XMLHttpReq.readyState) {
                case 1:
                {
                    self.onLoading();
                    break;
                }
                case 2:
                {
                    self.onLoaded();
                    break;
                }
                case 3:
                {
                    self.onInteractive();
                    break;
                }
                case 4:
                {
                    if(self.XMLHttpReq.status==200) { 
                        self.response = self.XMLHttpReq.responseText;
                        self.responseXML = self.XMLHttpReq.responseXML;
                        self.onCompletion();
                    }
                    else 
                    { 
                        self.onError();     //执行错误函数 
                    }
                    break;
                }
            }
        };
        
        
        if(this.method=="post")
        {
            this.XMLHttpReq.send(encodeURI(data)); //发送请求 
        }
        else
        {
            this.XMLHttpReq.send(); //发送请求 
        }
    };
    
    this.Abort=function()
    {
        this.XMLHttpReq.abort();
    }
    
    this.Close=function()
    {
        this.XMLHttpReq=null;
    }
    //初始化AJAX库 
    this.Init();
}

前台页面调用:

<head runat="server">
    <title>测试文件</title>
        <script language="javascript" src="Ajax.js" type="text/javascript"></script>
        <script language="javascript" src="UrlParameter.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    var url=document.location.href;
    var id=UrlParameter(url,"id");
    if(id=="")
         alert('参数为空');
    else 
       ajaxTest(id); 
    function ajaxTest(id){
        var st=new AJAXLib();
        st.URLString="bb.aspx";
        //st.method="post"
        st.onCompletion=function()
        {
            alert(st.response);
        }
        st.Send("id="+id);
        }
        
    </script>
</head>

执行页面的后台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="bb.aspx.cs" Inherits="pp_bb" %>

    protected void Page_Load(object sender, EventArgs e)
    {
        string id;
        id = Request.Form["id"];
        string strIp = Request.UserHostAddress;
        Response.Write("你的ID是:" + id + ",IP是" + strIp);
        // Response.Write("pp");
    }

这样就可以简单的实现,通过获取调用页的ID而在执行页进行处理,再返回信息!