ASP.NET AJAX是如何实现的？附javascript代码。

今天写了个简单的asp.net ajax页面，然后查看页面源代码，发现系统自动调用了一个叫做WebResource.js的脚本文件，
然后我就想，是不是如果我们把这个脚本文件的js代码提取出来，就不需要调用这个几十KB的文件了呢？
因为这个js文件没有压缩，显然体积太大，里面有些内容可能我们不需要呀？贴js代码，请高人指点，如何打造一个超轻量级的ajax应用function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {
    this.eventTarget = eventTarget;
    this.eventArgument = eventArgument;
    this.validation = validation;
    this.validationGroup = validationGroup;
    this.actionUrl = actionUrl;
    this.trackFocus = trackFocus;
    this.clientSubmit = clientSubmit;
}
function WebForm_DoPostBackWithOptions(options) {
    var validationResult = true;
    if (options.validation) {
        if (typeof(Page_ClientValidate) == 'function') {
            validationResult = Page_ClientValidate(options.validationGroup);
        }
    }
    if (validationResult) {
        if ((typeof(options.actionUrl) != "undefined") && (options.actionUrl != null) && (options.actionUrl.length > 0)) {
            theForm.action = options.actionUrl;
        }
        if (options.trackFocus) {
            var lastFocus = theForm.elements["__LASTFOCUS"];
            if ((typeof(lastFocus) != "undefined") && (lastFocus != null)) {
                if (typeof(document.activeElement) == "undefined") {
                    lastFocus.value = options.eventTarget;
                }
                else {
                    var active = document.activeElement;
                    if ((typeof(active) != "undefined") && (active != null)) {
                        if ((typeof(active.id) != "undefined") && (active.id != null) && (active.id.length > 0)) {
                            lastFocus.value = active.id;
                        }
                        else if (typeof(active.name) != "undefined") {
                            lastFocus.value = active.name;
                        }
                    }
                }
            }
        }
    }
    if (options.clientSubmit) {
        __doPostBack(options.eventTarget, options.eventArgument);
    }
}
var __pendingCallbacks = new Array();
var __synchronousCallBackIndex = -1;
function WebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync) {
    var postData = __theFormPostData +
                "__CALLBACKID=" + WebForm_EncodeCallback(eventTarget) +
                "&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);
    if (theForm["__EVENTVALIDATION"]) {
        postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);
    }
    var xmlRequest,e;
    try {
        xmlRequest = new XMLHttpRequest();
    }
    catch(e) {
        try {
            xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) {
        }
    }
    var setRequestHeaderMethodExists = true;
    try {
        setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
    }
    catch(e) {}
    var callback = new Object();
    callback.eventCallback = eventCallback;
    callback.context = context;
    callback.errorCallback = errorCallback;
    callback.async = useAsync;
    var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
    if (!useAsync) {
        if (__synchronousCallBackIndex != -1) {
            __pendingCallbacks[__synchronousCallBackIndex] = null;
        }
        __synchronousCallBackIndex = callbackIndex;
    }
    if (setRequestHeaderMethodExists) {
        xmlRequest.onreadystatechange = WebForm_CallbackComplete;
        callback.xmlRequest = xmlRequest;
        xmlRequest.open("POST", theForm.action, true);
        xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
        xmlRequest.send(postData);
        return;
    }
    callback.xmlRequest = new Object();
    var callbackFrameID = "__CALLBACKFRAME" + callbackIndex;
    var xmlRequestFrame = document.frames[callbackFrameID];
    if (!xmlRequestFrame) {
        xmlRequestFrame = document.createElement("IFRAME");
        xmlRequestFrame.width = "1";
        xmlRequestFrame.height = "1";
        xmlRequestFrame.frameBorder = "0";
        xmlRequestFrame.id = callbackFrameID;
        xmlRequestFrame.name = callbackFrameID;
        xmlRequestFrame.style.position = "absolute";
        xmlRequestFrame.style.top = "-100px"
        xmlRequestFrame.style.left = "-100px";
        try {
            if (callBackFrameUrl) {
                xmlRequestFrame.src = callBackFrameUrl;
            }
        }
        catch(e) {}
        document.body.appendChild(xmlRequestFrame);
    }
    var interval = window.setInterval(function() {
        xmlRequestFrame = document.frames[callbackFrameID];
        if (xmlRequestFrame && xmlRequestFrame.document) {
            window.clearInterval(interval);
            xmlRequestFrame.document.write("");
            xmlRequestFrame.document.close();
            xmlRequestFrame.document.write('<html><body><form method="post"><input type="hidden" name="__CALLBACKLOADSCRIPT" value="t"></form></body></html>');
            xmlRequestFrame.document.close();
            xmlRequestFrame.document.forms[0].action = theForm.action;
            var count = __theFormPostCollection.length;
            var element;
            for (var i = 0; i < count; i++) {
                element = __theFormPostCollection[i];
                if (element) {
                    var fieldElement = xmlRequestFrame.document.createElement("INPUT");
                    fieldElement.type = "hidden";
                    fieldElement.name = element.name;
                    fieldElement.value = element.value;
                    xmlRequestFrame.document.forms[0].appendChild(fieldElement);
                }
            }
            var callbackIdFieldElement = xmlRequestFrame.document.createElement("INPUT");
            callbackIdFieldElement.type = "hidden";
            callbackIdFieldElement.name = "__CALLBACKID";
            callbackIdFieldElement.value = eventTarget;
            xmlRequestFrame.document.forms[0].appendChild(callbackIdFieldElement);
            var callbackParamFieldElement = xmlRequestFrame.document.createElement("INPUT");
            callbackParamFieldElement.type = "hidden";
            callbackParamFieldElement.name = "__CALLBACKPARAM";
            callbackParamFieldElement.value = eventArgument;
            xmlRequestFrame.document.forms[0].appendChild(callbackParamFieldElement);
            if (theForm["__EVENTVALIDATION"]) {
                var callbackValidationFieldElement = xmlRequestFrame.document.createElement("INPUT");
                callbackValidationFieldElement.type = "hidden";
                callbackValidationFieldElement.name = "__EVENTVALIDATION";
                callbackValidationFieldElement.value = theForm["__EVENTVALIDATION"].value;
                xmlRequestFrame.document.forms[0].appendChild(callbackValidationFieldElement);
            }
            var callbackIndexFieldElement = xmlRequestFrame.document.createElement("INPUT");
            callbackIndexFieldElement.type = "hidden";
            callbackIndexFieldElement.name = "__CALLBACKINDEX";
            callbackIndexFieldElement.value = callbackIndex;
            xmlRequestFrame.document.forms[0].appendChild(callbackIndexFieldElement);
            xmlRequestFrame.document.forms[0].submit();
        }
    }, 10);
}

解决方案 »

  1.   

    接上：function WebForm_CallbackComplete() {
        for (var i = 0; i < __pendingCallbacks.length; i++) {
            callbackObject = __pendingCallbacks[i];
            if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
                if (!__pendingCallbacks[i].async) {
                    __synchronousCallBackIndex = -1;
                }
                __pendingCallbacks[i] = null;
                var callbackFrameID = "__CALLBACKFRAME" + i;
                var xmlRequestFrame = document.getElementById(callbackFrameID);
                if (xmlRequestFrame) {
                    xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
                }
                WebForm_ExecuteCallback(callbackObject);
            }
        }
    }
    function WebForm_ExecuteCallback(callbackObject) {
        var response = callbackObject.xmlRequest.responseText;
        if (response.charAt(0) == "s") {
            if ((typeof(callbackObject.eventCallback) != "undefined") && (callbackObject.eventCallback != null)) {
                callbackObject.eventCallback(response.substring(1), callbackObject.context);
            }
        }
        else if (response.charAt(0) == "e") {
            if ((typeof(callbackObject.errorCallback) != "undefined") && (callbackObject.errorCallback != null)) {
                callbackObject.errorCallback(response.substring(1), callbackObject.context);
            }
        }
        else {
            var separatorIndex = response.indexOf("|");
            if (separatorIndex != -1) {
                var validationFieldLength = parseInt(response.substring(0, separatorIndex));
                if (!isNaN(validationFieldLength)) {
                    var validationField = response.substring(separatorIndex + 1, separatorIndex + validationFieldLength + 1);
                    if (validationField != "") {
                        var validationFieldElement = theForm["__EVENTVALIDATION"];
                        if (!validationFieldElement) {
                            validationFieldElement = document.createElement("INPUT");
                            validationFieldElement.type = "hidden";
                            validationFieldElement.name = "__EVENTVALIDATION";
                            theForm.appendChild(validationFieldElement);
                        }
                        validationFieldElement.value = validationField;
                    }
                    if ((typeof(callbackObject.eventCallback) != "undefined") && (callbackObject.eventCallback != null)) {
                        callbackObject.eventCallback(response.substring(separatorIndex + validationFieldLength + 1), callbackObject.context);
                    }
                }
            }
        }
    }
    function WebForm_FillFirstAvailableSlot(array, element) {
        var i;
        for (i = 0; i < array.length; i++) {
            if (!array[i]) break;
        }
        array[i] = element;
        return i;
    }
    var __nonMSDOMBrowser = (window.navigator.appName.toLowerCase().indexOf('explorer') == -1);
    var __theFormPostData = "";
    var __theFormPostCollection = new Array();
    function WebForm_InitCallback() {
        var count = theForm.elements.length;
        var element;
        for (var i = 0; i < count; i++) {
            element = theForm.elements[i];
            var tagName = element.tagName.toLowerCase();
            if (tagName == "input") {
                var type = element.type;
                if ((type == "text" || type == "hidden" || type == "password" ||
                    ((type == "checkbox" || type == "radio") && element.checked)) &&
                    (element.id != "__EVENTVALIDATION")) {
                    WebForm_InitCallbackAddField(element.name, element.value);
                }
            }
            else if (tagName == "select") {
                var selectCount = element.options.length;
                for (var j = 0; j < selectCount; j++) {
                    var selectChild = element.options[j];
                    if (selectChild.selected == true) {
                        WebForm_InitCallbackAddField(element.name, element.value);
                    }
                }
            }
            else if (tagName == "textarea") {
                WebForm_InitCallbackAddField(element.name, element.value);
            }
        }
    }
    function WebForm_InitCallbackAddField(name, value) {
        var nameValue = new Object();
        nameValue.name = name;
        nameValue.value = value;
        __theFormPostCollection[__theFormPostCollection.length] = nameValue;
        __theFormPostData += WebForm_EncodeCallback(name) + "=" + WebForm_EncodeCallback(value) + "&";
    }
    function WebForm_EncodeCallback(parameter) {
        if (encodeURIComponent) {
            return encodeURIComponent(parameter);
        }
        else {
            return escape(parameter);
        }
    }
    var __disabledControlArray = new Array();
    function WebForm_ReEnableControls() {
        if (typeof(__enabledControlArray) == 'undefined') {
            return false;
        }
        var disabledIndex = 0;
        for (var i = 0; i < __enabledControlArray.length; i++) {
            var c;
            if (__nonMSDOMBrowser) {
                c = document.getElementById(__enabledControlArray[i]);
            }
            else {
                c = document.all[__enabledControlArray[i]];
            }
            if ((typeof(c) != "undefined") && (c != null) && (c.disabled == true)) {
                c.disabled = false;
                __disabledControlArray[disabledIndex++] = c;
            }
        }
        setTimeout("WebForm_ReDisableControls()", 0);
        return true;
    }
    function WebForm_ReDisableControls() {
        for (var i = 0; i < __disabledControlArray.length; i++) {
            __disabledControlArray[i].disabled = true;
        }
    }
    function WebForm_FireDefaultButton(event, target) {
        if (event.keyCode == 13) {
            var src = event.srcElement || event.target;
            if (!src || (src.tagName.toLowerCase() != "textarea")) {
                var defaultButton;
                if (__nonMSDOMBrowser) {
                   defaultButton = document.getElementById(target);
                }
                else {
                    defaultButton = document.all[target];
                }
                if (defaultButton && typeof(defaultButton.click) != "undefined") {
                    defaultButton.click();
                    event.cancelBubble = true;
                    if (event.stopPropagation) event.stopPropagation();
                    return false;
                }
            }
        }
        return true;
    }
    function WebForm_GetScrollX() {
        if (__nonMSDOMBrowser) {
            return window.pageXOffset;
        }
        else {
            if (document.documentElement && document.documentElement.scrollLeft) {
                return document.documentElement.scrollLeft;
            }
            else if (document.body) {
                return document.body.scrollLeft;
            }
        }
        return 0;
    }
    function WebForm_GetScrollY() {
        if (__nonMSDOMBrowser) {
            return window.pageYOffset;
        }
        else {
            if (document.documentElement && document.documentElement.scrollTop) {
                return document.documentElement.scrollTop;
            }
            else if (document.body) {
                return document.body.scrollTop;
            }
        }
        return 0;
    }
      

  2.   


    function WebForm_SaveScrollPositionSubmit() {
        if (__nonMSDOMBrowser) {
            theForm.elements['__SCROLLPOSITIONY'].value = window.pageYOffset;
            theForm.elements['__SCROLLPOSITIONX'].value = window.pageXOffset;
        }
        else {
            theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
            theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
        }
        if ((typeof(this.oldSubmit) != "undefined") && (this.oldSubmit != null)) {
            return this.oldSubmit();
        }
        return true;
    }
    function WebForm_SaveScrollPositionOnSubmit() {
        theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
        theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
        if ((typeof(this.oldOnSubmit) != "undefined") && (this.oldOnSubmit != null)) {
            return this.oldOnSubmit();
        }
        return true;
    }
    function WebForm_RestoreScrollPosition() {
        if (__nonMSDOMBrowser) {
            window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);
        }
        else {
            window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);
        }
        if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {
            return theForm.oldOnLoad();
        }
        return true;
    }
    function WebForm_TextBoxKeyHandler(event) {
        if (event.keyCode == 13) {
            var target;
            if (__nonMSDOMBrowser) {
                target = event.target;
            }
            else {
                target = event.srcElement;
            }
            if ((typeof(target) != "undefined") && (target != null)) {
                if (typeof(target.onchange) != "undefined") {
                    target.onchange();
                    event.cancelBubble = true;
                    if (event.stopPropagation) event.stopPropagation();
                    return false;
                }
            }
        }
        return true;
    }
    function WebForm_TrimString(value) {
        return value.replace(/^\s+|\s+$/g, '')
    }
    function WebForm_AppendToClassName(element, className) {
        var currentClassName = ' ' + WebForm_TrimString(element.className) + ' ';
        className = WebForm_TrimString(className);
        var index = currentClassName.indexOf(' ' + className + ' ');
        if (index === -1) {
            element.className = (element.className === '') ? className : element.className + ' ' + className;
        }
    }
    function WebForm_RemoveClassName(element, className) {
        var currentClassName = ' ' + WebForm_TrimString(element.className) + ' ';
        className = WebForm_TrimString(className);
        var index = currentClassName.indexOf(' ' + className + ' ');
        if (index >= 0) {
            element.className = WebForm_TrimString(currentClassName.substring(0, index) + ' ' +
                currentClassName.substring(index + className.length + 1, currentClassName.length));
        }
    }
    function WebForm_GetElementById(elementId) {
        if (document.getElementById) {
            return document.getElementById(elementId);
        }
        else if (document.all) {
            return document.all[elementId];
        }
        else return null;
    }
    function WebForm_GetElementByTagName(element, tagName) {
        var elements = WebForm_GetElementsByTagName(element, tagName);
        if (elements && elements.length > 0) {
            return elements[0];
        }
        else return null;
    }
    function WebForm_GetElementsByTagName(element, tagName) {
        if (element && tagName) {
            if (element.getElementsByTagName) {
                return element.getElementsByTagName(tagName);
            }
            if (element.all && element.all.tags) {
                return element.all.tags(tagName);
            }
        }
        return null;
    }
    function WebForm_GetElementDir(element) {
        if (element) {
            if (element.dir) {
                return element.dir;
            }
            return WebForm_GetElementDir(element.parentNode);
        }
        return "ltr";
    }
    function WebForm_GetElementPosition(element) {
        var result = new Object();
        result.x = 0;
        result.y = 0;
        result.width = 0;
        result.height = 0;
        if (element.offsetParent) {
            result.x = element.offsetLeft;
            result.y = element.offsetTop;
            var parent = element.offsetParent;
            while (parent) {
                result.x += parent.offsetLeft;
                result.y += parent.offsetTop;
                var parentTagName = parent.tagName.toLowerCase();
                if (parentTagName != "table" &&
                    parentTagName != "body" && 
                    parentTagName != "html" && 
                    parentTagName != "div" && 
                    parent.clientTop && 
                    parent.clientLeft) {
                    result.x += parent.clientLeft;
                    result.y += parent.clientTop;
                }
                parent = parent.offsetParent;
            }
        }
        else if (element.left && element.top) {
            result.x = element.left;
            result.y = element.top;
        }
        else {
            if (element.x) {
                result.x = element.x;
            }
            if (element.y) {
                result.y = element.y;
            }
        }
        if (element.offsetWidth && element.offsetHeight) {
            result.width = element.offsetWidth;
            result.height = element.offsetHeight;
        }
        else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
            result.width = element.style.pixelWidth;
            result.height = element.style.pixelHeight;
        }
        return result;
    }
    function WebForm_GetParentByTagName(element, tagName) {
        var parent = element.parentNode;
        var upperTagName = tagName.toUpperCase();
        while (parent && (parent.tagName.toUpperCase() != upperTagName)) {
            parent = parent.parentNode ? parent.parentNode : parent.parentElement;
        }
        return parent;
    }
    function WebForm_SetElementHeight(element, height) {
        if (element && element.style) {
            element.style.height = height + "px";
        }
    }
    function WebForm_SetElementWidth(element, width) {
        if (element && element.style) {
            element.style.width = width + "px";
        }
    }
    function WebForm_SetElementX(element, x) {
        if (element && element.style) {
            element.style.left = x + "px";
        }
    }
    function WebForm_SetElementY(element, y) {
        if (element && element.style) {
            element.style.top = y + "px";
        }
    }
      

  3.   

    自己写原生的ajax
    也用不了几行代码
    关键就是这个
    var a = new ActiveXObject("Microsoft.XMLHTTP")
      

  4.   

    asp.net ajax的底层js代码绝对比jquery的多，效率也低。因为它要考虑服务器控件的因素。
      

  5.   


    function __AjaxClass()
    { 
         this.createxmlHttpRequest=function()
        {
              if (window.XMLHttpRequest)
              {
                   return new XMLHttpRequest();                    
              } 
              else if (window.ActiveXObject)
              {
                return new ActiveXObject("Microsoft.XMLHTTP");
              }
            return null;
         };
         this.createQueryString =function(parms)
         {
              if(parms!=null && typeof(parms)=="object")
              {
                    var queryString =[] ;
                    try{
                        for(var p in parms)
                        {
                            queryString.push( p + '=' + parms[p]);
                        }
                    }catch(e){
                        return '';
                    }
                  return queryString.join('&');
              }
               else if(typeof(parms)=="string")
              {
                   return parms;
              }
              return "";
         };
        /**
        **   发送get请求,第一个参数是请求的url,第二个是传递的参数值，第3个是回调函数（不传此参数，表示同步请求，传null发送异步请求，但是不回传）
        **/      
         this.doGet =function(requsertUrl,parms,callBack)
        {
             var isSynchronization =  arguments.length < 3; // 是否同步
             var xmlHttp= ajax.createxmlHttpRequest(); 
             if( xmlHttp==null)
             {
                 if(callBack!=null && typeof(callBack)=="function"){
                    callBack("Error");
                    return;
                  }
             }
            var queryString =ajax.createQueryString(parms);;
            if(queryString!="") queryString += "&";
             queryString += ("t="+Math.random());
             xmlHttp.open("GET",requsertUrl+"?"+queryString,!isSynchronization);
             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
             xmlHttp.send(null);
            if(isSynchronization){
                   if(xmlHttp.readyState==4 && xmlHttp.status == 200)
                    {
                        return eval('(' + xmlHttp.responseText + ')');
                    }
            }else{
                xmlHttp.onreadystatechange =function(){
                
                     if(callBack!=null && typeof(callBack)=="function"){
                         if(xmlHttp.readyState==4 && xmlHttp.status == 200)
                        {
                           callBack(eval('(' + xmlHttp.responseText + ')'));
                        }
                     }
                 };
            }   
        };
        /**
        **   发送post请求,第一个参数是请求的url,第二个是传递的参数值，第3个是回调函数（不传此参数，表示同步请求，传null发送异步请求，但是不回传）
        **/
        this.doPost=function(requsertUrl,parms,callBack)
        {
              var isSynchronization =  arguments.length < 3; // 是否同步
             var  xmlHttp= ajax.createxmlHttpRequest(); 
              if( xmlHttp==null)
             {
                 if(callBack!=null && typeof(callBack)=="function"){
                       callBack("Error");  return;
                  }
             }
            var queryString =ajax.createQueryString(parms); ;
            if(requsertUrl.indexOf('?')>0){
                  requsertUrl +=("&t="+Math.random());
            }else{
                 requsertUrl +=("?t="+Math.random());
            }
            xmlHttp.open("POST",requsertUrl,!isSynchronization);
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttp.send(queryString);
            if(isSynchronization){
               if(xmlHttp.readyState==4 && xmlHttp.status == 200)
                {
                    return eval('(' + xmlHttp.responseText + ')');
                }
             }else{
                    xmlHttp.onreadystatechange =function(){
                         if(callBack!=null && typeof(callBack)=="function"){
                             if(xmlHttp.readyState==4 && xmlHttp.status == 200)
                            {
                               callBack(eval('(' + xmlHttp.responseText + ')'));
                            }
                         }
                     };
             }
        };
        var ajax = this;
    } var ajax = new __AjaxClass();
     ajax.doGet("url",null);// 同步
     ajax.doGet("url",{a:1,b:'222'},null); // 异步
     ajax.doGet("url",{a:1,b:'222'},function(rs){alert(rs);}); // 异步
      

  6.   

    不会把jq应该比ms的ajax库要小把
    这个是ms ajax库，http://www.asp.net/ajaxlibrary/CDNAjax35.ashx唯一感觉好的地方就是ms在序列化上做得比较好，jquery做起来就麻烦一点
      

  7.   

    JS代码太臃肿了
    JQUERY AJAX
      

  8.   

    +1 这个不错 只实现ajax 连jquery 都别用了 更轻量级~~
      

  9.   

    要看你打算用什么样的功能，如果很简单，手写ajax应用或许能满足楼主的需求
      

  10.   

    我是这样想的，页面上一个GridView（已经绑定数据），下面一个textbox，一个button。然后我点击button，把textbox的值添加到GridView里面去，这样，用AJAX怎么做呢？我对JS不太熟悉，请各位高手多指点。
      

  11.   

    jquery.min ，感觉还可以，想方便的话还是 asp.net ajax 好。