AJAX客户端说明,XMLHttpRequest对象

ajax|request|xml|xmlhttprequest|对象|客户端

在CommunityServer中运用了自己的AJAX机制,没有借助其他的辅助控件。其中客户的XMLHttpRequest对象的封装,就足以让人大饱眼福,在一般的浏览器其都能够运行AJAX。下面我们来学习学习这个咚咚,希望能给更多的人带来帮助。
 首先当然是要了解一下浏览器中的XMLHttp对象了:
 XMLHTTP方法: 
         备注:客户机可以使用XMLHTTP对象发送任意的HTTP请求,接受HTTP应答,还可以对应答的XML文档进行解析。 
         Open方法:初始化一个Msxml2.XMLHTTP请求,指定HTTP请求方式、URL以及鉴定信息。
        语法:
         Open( bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword ) 
        参数介绍:
        bstrMethod: 数据传送方式,即GET或POST。 
         bstrUrl: 服务网页的URL。 
         varAsync: 是否同步执行。缺省为True,即同步执行,但只能在DOM中实施同步执行。用中一般将其置为False,即异步执行。 
         bstrUser: 用户名,可省略。 
         bstrPassword:用户口令,可省略。 
        Send方法:发送HTTP请求到服务器,返回应答。 
        语法: 
        oXMLHttpRequest.send(varBody) 
       说明:此方法是否同步取决于Open方法的varAsync参数。如果设为True则为同步,调用立刻返回,如果设为False调用直到整个应答被接收了才返回。 
        setRequestHeader( bstrHeader, bstrvalue )
        bstrHeader:HTTP 头(header) 
        bstrvalue: HTTP 头(header)的值 
       如果Open方法定义为POST,可以定义表单方式上传: 
       xmlhttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded") 
XMLHTTP属性: 
 onreadystatechange:在同步执行方式下获得返回结果的事件句柄。只能在DOM中调用。 
 responseBody: 结果返回为无符号整数数组。 
 responseStream: 结果返回为IStream流。 
 responseText : 结果返回为字符串。 
 responseXML: 结果返回为XML格式数据。
 运用这个原理也可以做网络小偷程序,网络爬虫应该就是应用这个东西来完成的吧,不过我没有做过,可能在不久的将来会制作个来玩玩,这里我们最主要的是看看CS中是如何封装他的:
   1//Ajax Start
 2/**////<summary>
 3///创建回调对象,如果存在window.XMLHttpRequest()对象,则返回此对象,如果是IE则搜索Msxml2.XMLHTTP各个版本及Microsoft.XMLHTTP并创建对象返回。
 4///</summary>
 5function Ajax_GetXMLHttpRequest() {
 6    if (window.XMLHttpRequest) {
 7        return new XMLHttpRequest();
 8    } else {
 9        if (window.Ajax_XMLHttpRequestProgID) {
            return new ActiveXObject(window.Ajax_XMLHttpRequestProgID);
        } else {
            var progIDs = ["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
            for (var i = 0; i < progIDs.length; ++i) {
                var progID = progIDs[i];
                try {
                    var x = new ActiveXObject(progID);
                    window.Ajax_XMLHttpRequestProgID = progID;
                    return x;
                } catch (e) {
                }
            }
        }
    }
    return null;
}
/**////<summary>
///Ajax回调。
///</summary>
///<param name="type">调用服务端函数所在的类包括命名空间(如:NExplus.Controls.SiteHeader)。</param>
///<param name="id">客户端所对应的标记的ID(如:<div id="ID"></div>)。</param>
///<param name="method">服务端(方法)函数名称(被AjaxMethod标记)。</param>
///<param name="args">传到服务器的字符串。</param>
///<param name="clientCallBack">同步或异步回调。</param>
///<param name="debugRequestText">调试/请求字符串。</param>
///<param name="debugResponseText">调试/输出字符串。</param>
///<param name="debugErrors">调试的错误信息。</param>
///<param name="includeControlValuesWithCallBack">是否和控件及其值一起回调。</param>
///<param name="url">Url地址。</param>
function Ajax_CallBack(type, id, method, args, clientCallBack, debugRequestText, debugResponseText, debugErrors, includeControlValuesWithCallBack, url) {
    if (!url)
    {
        url = window.location.href;
        url = url.replace(/\#.*$/, '');//去除URL中标签部分,即"#"之后的字符串。
        //加入参数Ajax_CallBack并设为true,说明是AJAX回调。
        if (url.indexOf('?') > -1)
            url += "&Ajax_CallBack=true";
        else
        {
            if (url.substr(url.length - 1, 1) == "/")
                url += "default.aspx";
            url += "?Ajax_CallBack=true";
        }
    }
    var x = Ajax_GetXMLHttpRequest();//取得XMLHttpRequest对象。
    var result = null;
    if (!x) {
        result = { "value":null, "error": "NOXMLHTTP"};
        if (debugErrors) {
            alert("error: " + result.error);
        }
        if (clientCallBack) {
            clientCallBack(result);
        }
        return result;
    }
    x.open("POST", url, clientCallBack ? true : false);//以Post方式打开对象,这样在服务端就可以用Request.Form获取参数。
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
    if (clientCallBack) {
        //如果同步,判断状态,输出错误消息。
        x.onreadystatechange = function() {
            var result = null;
            if (x.readyState != 4) {
                return;
            }
            if (debugResponseText) {
                alert(x.responseText);
            }
            try
            {
                var result = eval("(" + x.responseText + ")");
                if (debugErrors && result.error) {
                    alert("error: " + result.error);
                }
            }
            catch (err)
            {
                if (window.confirm('The following error occured while processing an AJAX request: ' + err.message + '\n\nWould you like to see the response?'))
                {
                    var w = window.open();
                    w.document.open('text/plain');
                    w.document.write(x.responseText);
                   w.document.close();
               }
               result = new Object();
               result.error = 'An AJAX error occured.  The response is invalid.';
           }
           clientCallBack(result);            
       }
   }
   var encodedData = "Ajax_CallBackType=" + type;
   if (id) {
       encodedData += "&Ajax_CallBackID=" + id.split("$").join(":");
   }
   encodedData += "&Ajax_CallBackMethod=" + method;
   if (args) {
       for (var i in args) {
           encodedData += "&Ajax_CallBackArgument" + i + "=" + encodeURIComponent(args[i]);
       }
   }
   //如果加入控件,则加入控件数据。
   if (includeControlValuesWithCallBack && document.forms.length > 0) {
       var form = document.forms[0];
       for (var i = 0; i < form.length; ++i) {
           var element = form.elements[i];
           if (element.name) {
               var elementValue = null;
               if (element.nodeName == "INPUT") {
                   var inputType = element.getAttribute("TYPE").toUpperCase();
                   if (inputType == "TEXT" || inputType == "PASSWORD" || inputType == "HIDDEN") {
                       elementValue = element.value;
                   } else if (inputType == "CHECKBOX" || inputType == "RADIO") {
                       if (element.checked) {
                           elementValue = element.value;
                       }
                   }
               } else if (element.nodeName == "SELECT") {
                   elementValue = element.value;
               } else if (element.nodeName == "TEXTAREA") {
                   elementValue = element.value;
               }
               if (elementValue) {
                   encodedData += "&" + element.name + "=" + encodeURIComponent(elementValue);
               }
           }
       }
   }
   //如果是调试,则弹出发送的数据。
   if (debugRequestText) {
       alert(encodedData);
   }
   x.send(encodedData);//向服务器发送数据。
   if (!clientCallBack) {
       if (debugResponseText) {
           alert(x.responseText);
       }
       result = eval("(" + x.responseText + ")");
       if (debugErrors && result.error) {
           alert("error: " + result.error);
       }
   }
   delete x;
   return result;
}
//Ajax End
 其他的不用多说明了,看注释应该就差不多了,如果有不对的地方请批评指教,谢谢!

时间: 2024-09-15 13:41:21

AJAX客户端说明,XMLHttpRequest对象的相关文章

使用Ajax技术通过XMLHttpRequest对象完成首页登录功能_AJAX相关

最近使用Ajax技术通过XMLHttpRequest对象完成一个首页的登录功能! 代码如下: <script type="text/javascript"> //创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ return xmlhttprequest=new XMLHttpRequest(); }else{ return xmlhttprequest=new Ac

使用Ajax技术通过XMLHttpRequest对象完成首页登录功能

最近使用Ajax技术通过XMLHttpRequest对象完成一个首页的登录功能! 代码如下: <script type="text/javascript"> //创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ return xmlhttprequest=new XMLHttpRequest(); }else{ return xmlhttprequest=new Ac

AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)

ajax|request|xml|xmlhttprequest|对象|详解 多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的HTML 页面.常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过程.有了 Ajax 和 XMLHttpRequest 对象,就可以使用不必让用户等待服务器响应的请求/响应模型了. 本文中,Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例,建立和发送请求,并响应服务器. 本

AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)

ajax|request|xml|xmlhttprequest|对象|详解 挑战异步性 本文的后面,我将用很多时间编写和使用异步代码,但是您应该明白为什么 open() 的最后一个参数这么重要.在一般的请求/响应模型中,比如 Web 1.0,客户机(浏览器或者本地机器上运行的代码)向服务器发出请求.该请求是同步的,换句话说,客户机等待服务器的响应.当客户机等待的时候,至少会用某种形式通知您在等待: ·沙漏(特别是 Windows 上). ·旋转的皮球(通常在 Mac 机器上). ·应用程序基本上

XMLHttpRequest对象的ReadyState属性值列表

readystate取值 描述 0 描述一种"未初始化"状态;此时,已经创建一个xmlhttprequest对象,但是还没有初始化. 1 描述一种"发送"状态;此时,代码已经调用了xmlhttprequest open()方法并且xmlhttprequest已经准备好把一个请求发送到服务器. 2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应. 3 描述一种"正在接收"状态

XMLHttpRequest对象的创建

  首先先介绍一下XMLHttpRequest对象,我们都知道Ajax它并不是单单一门技术,而是几种技术的融合.XMLHttpRequest是Ajax技术体系中最为核心的技术,如果没有XMLHttpRequest,Ajax的其余技术就无法成为一个有机的整体.在Ajax应用程序中XMLHttpRequest对象负责将用户信息以异步方式发送到服务器,并接收服务器返回的响应信息和数据.   XMLHttpRequest时XMLHttp组件的一个对象,使用XMLHttpRequest可以实现不向服务器提

AJAX客户端说明,XMLHttpRequest对象_AJAX相关

在CommunityServer中运用了自己的AJAX机制,没有借助其他的辅助控件.其中客户的XMLHttpRequest对象的封装,就足以让人大饱眼福,在一般的浏览器其都能够运行AJAX.下面我们来学习学习这个咚咚,希望能给更多的人带来帮助.  首先当然是要了解一下浏览器中的XMLHttp对象了:  XMLHTTP方法:           备注:客户机可以使用XMLHTTP对象发送任意的HTTP请求,接受HTTP应答,还可以对应答的XML文档进行解析.           Open方法:初始

AJAX XMLHttpRequest对象详解

XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们仍然很有必要理解这个对象的详细工作机制. 一.引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM

Ajax基础教程(2)-使用XMLHttpRequest对象 2.3 交互示例

看到这里,你可能想知道典型的Ajax交互是什么样.图2-1显示了Ajax应用中标准的交互模式. 图2-1 标准Ajax交互 不同于标准Web客户中所用的标准请求/响应方法,Ajax应用的做法稍有差别. 1. 一个客户端事件触发一个Ajax事件.从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发Ajax事件.可以有如下的代码: <input type="text"d="email" name="email" onblu