AJAX客户端说明XMLHttpRequest对象

林夕相心587

林夕相心587

2016-02-19 13:02

下面是个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) {
            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 + 'nnWould 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
 其他的不用多说明了,看注释应该就差不多了,如果有不对的地方请批评指教,谢谢!
展开更多 50%)
分享

猜你喜欢

AJAX客户端说明XMLHttpRequest对象

Web开发
AJAX客户端说明XMLHttpRequest对象

AJAX-XMLHttpRequest 对象

Web开发
AJAX-XMLHttpRequest 对象

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

为AJAX请求添加客户端事件

Web开发
为AJAX请求添加客户端事件

Zune 客户端

平面设计 标志设计 UI设计 VI设计
Zune 客户端

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

win客户端和linux客户端的区别

服务器
win客户端和linux客户端的区别

在客户端重新创建对象

编程语言 网络编程
在客户端重新创建对象

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

窗口重排在Excel2010工作表中的应用

窗口重排在Excel2010工作表中的应用

深入J2ME配置层

深入J2ME配置层
下拉加载更多内容 ↓