zoukankan      html  css  js  c++  java
  • [CommunityServer]AJAX客户端说明,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) {
     10            return new ActiveXObject(window.Ajax_XMLHttpRequestProgID);
     11        }
     else {
     12            var progIDs = ["Msxml2.XMLHTTP.5.0""Msxml2.XMLHTTP.4.0""MSXML2.XMLHTTP.3.0""MSXML2.XMLHTTP""Microsoft.XMLHTTP"];
     13            for (var i = 0; i < progIDs.length; ++i) {
     14                var progID = progIDs[i];
     15                try {
     16                    var x = new ActiveXObject(progID);
     17                    window.Ajax_XMLHttpRequestProgID = progID;
     18                    return x;
     19                }
     catch (e) {
     20                }

     21            }

     22        }

     23    }

     24    return null;
     25}

     26///<summary>
     27///Ajax回调。
     28///</summary>
     29///<param name="type">调用服务端函数所在的类包括命名空间(如:NExplus.Controls.SiteHeader)。</param>
     30///<param name="id">客户端所对应的标记的ID(如:<div id="ID"></div>)。</param>
     31///<param name="method">服务端(方法)函数名称(被AjaxMethod标记)。</param>
     32///<param name="args">传到服务器的字符串。</param>
     33///<param name="clientCallBack">同步或异步回调。</param>
     34///<param name="debugRequestText">调试/请求字符串。</param>
     35///<param name="debugResponseText">调试/输出字符串。</param>
     36///<param name="debugErrors">调试的错误信息。</param>
     37///<param name="includeControlValuesWithCallBack">是否和控件及其值一起回调。</param>
     38///<param name="url">Url地址。</param>

     39function Ajax_CallBack(type, id, method, args, clientCallBack, debugRequestText, debugResponseText, debugErrors, includeControlValuesWithCallBack, url) {
     40    
     41    if (!url)
     42    {
     43        url = window.location.href;
     44        url = url.replace(/\#.*$/'');//去除URL中标签部分,即"#"之后的字符串。
     45        //加入参数Ajax_CallBack并设为true,说明是AJAX回调。
     46        if (url.indexOf('?'> -1)
     47            url += "&Ajax_CallBack=true";
     48        else
     49        {
     50            if (url.substr(url.length - 11== "/")
     51                url += "default.aspx";
     52                
     53            url += "?Ajax_CallBack=true";
     54        }

     55    }

     56
     57    var x = Ajax_GetXMLHttpRequest();//取得XMLHttpRequest对象。
     58    var result = null;
     59    if (!x) {
     60        result = "value":null"error""NOXMLHTTP"};
     61        if (debugErrors) {
     62            alert("error: " + result.error);
     63        }

     64        if (clientCallBack) {
     65            clientCallBack(result);
     66        }

     67        return result;
     68    }

     69
     70    x.open("POST", url, clientCallBack ? true : false);//以Post方式打开对象,这样在服务端就可以用Request.Form获取参数。
     71    x.setRequestHeader("Content-Type""application/x-www-form-urlencoded; charset=utf-8");
     72    if (clientCallBack) {
     73        //如果同步,判断状态,输出错误消息。
     74        x.onreadystatechange = function() {
     75            var result = null;
     76        
     77            if (x.readyState != 4{
     78                return;
     79            }

     80            
     81            if (debugResponseText) {
     82                alert(x.responseText);
     83            }

     84            
     85            try
     86            {
     87                var result = eval("(" + x.responseText + ")");
     88                if (debugErrors && result.error) {
     89                    alert("error: " + result.error);
     90                }

     91            }

     92            catch (err)
     93            {
     94                if (window.confirm('The following error occured while processing an AJAX request: ' + err.message + '\n\nWould you like to see the response?'))
     95                {
     96                    var w = window.open();
     97                    w.document.open('text/plain');
     98                    w.document.write(x.responseText);
     99                    w.document.close();
    100                }

    101                
    102                result = new Object();
    103                result.error = 'An AJAX error occured.  The response is invalid.';
    104            }

    105            
    106            clientCallBack(result);            
    107        }

    108    }

    109    var encodedData = "Ajax_CallBackType=" + type;
    110    if (id) {
    111        encodedData += "&Ajax_CallBackID=" + id.split("$").join(":");
    112    }

    113    encodedData += "&Ajax_CallBackMethod=" + method;
    114    if (args) {
    115        for (var i in args) {
    116            encodedData += "&Ajax_CallBackArgument" + i + "=" + encodeURIComponent(args[i]);
    117        }

    118    }

    119    //如果加入控件,则加入控件数据。
    120    if (includeControlValuesWithCallBack && document.forms.length > 0{
    121        var form = document.forms[0];
    122        for (var i = 0; i < form.length; ++i) {
    123            var element = form.elements[i];
    124            if (element.name) {
    125                var elementValue = null;
    126                if (element.nodeName == "INPUT"{
    127                    var inputType = element.getAttribute("TYPE").toUpperCase();
    128                    if (inputType == "TEXT" || inputType == "PASSWORD" || inputType == "HIDDEN"{
    129                        elementValue = element.value;
    130                    }
     else if (inputType == "CHECKBOX" || inputType == "RADIO"{
    131                        if (element.checked{
    132                            elementValue = element.value;
    133                        }

    134                    }

    135                }
     else if (element.nodeName == "SELECT"{
    136                    elementValue = element.value;
    137                }
     else if (element.nodeName == "TEXTAREA"{
    138                    elementValue = element.value;
    139                }

    140                if (elementValue) {
    141                    encodedData += "&" + element.name + "=" + encodeURIComponent(elementValue);
    142                }

    143            }

    144        }

    145    }

    146    //如果是调试,则弹出发送的数据。
    147    if (debugRequestText) {
    148        alert(encodedData);
    149    }

    150    x.send(encodedData);//向服务器发送数据。
    151    if (!clientCallBack) {
    152        if (debugResponseText) {
    153            alert(x.responseText);
    154        }

    155        result = eval("(" + x.responseText + ")");
    156        if (debugErrors && result.error) {
    157            alert("error: " + result.error);
    158        }

    159    }

    160    delete x;
    161    return result;
    162}

    163
    164//Ajax End

      其他的不用多说明了,看注释应该就差不多了,如果有不对的地方请批评指教,谢谢!
  • 相关阅读:
    非常有助于理解二极管PN结原理的资料
    5个CSS3技术实现设计增强
    如何读懂Web服务的系统架构图
    网页布局WEB标准的HTML结构化
    网站内容排版可用性分析
    用CSS做导航菜单的4个理由
    提高网站设计可用性(有效性)的10条原则
    dl,dt,dd标签 VS 传统table实现数据列表
    一些CSS3新技术
    21个CSS技巧
  • 原文地址:https://www.cnblogs.com/xdotnet/p/communityserver_xmlhttp_ajax.html
Copyright © 2011-2022 走看看