自己动手写AJAX框架

如果你了解了js面向对象,HTTP协议,那么就自己动手写一个AJAX框架就可以了。小技术,大家不要笑啊!

源码:(注释就不写了,应该不难看懂的)

var ajax = {
    _params: null,
    _callback: null,
    _xhr: null,

    _createXHR: function () {
        if (window.ActiveXObject) {
            _xhr = new ActiveXObject("Microsoft.XMLHTTP");     //IE
        }
        else if (window.XMLHttpRequest) {
            _xhr = new XMLHttpRequest();      //FireFox,Chrome et.
        }
    },

    _ajaxcallback: function () {
        if (_xhr.readyState == 4) {
            if (_xhr.status == 200) {
                _callback.call(this, _xhr.responseText)
            }
        }
    },

    _changeParams: function () {
        var args = arguments[0];
        var s = "";
        for (var i in args) {
            s += "&" + i + "=" + args[i];
        }
        _params = s;
    },

    get: function (url, params, callback) {
        _callback = callback;
        ajax._createXHR();
        ajax._changeParams(params);
        if (null != _xhr) {
            _xhr.open('get', url + '?' + _params, true);
            _xhr.onreadystatechange = ajax._ajaxcallback;
            _xhr.send();
        }
    },

    post: function (url, params, callback) {
        _callback = callback;
        ajax._createXHR();
        ajax._changeParams(params);
        if (null != _xhr) {
            _xhr.open('post', url, true);
            _xhr.onreadystatechange = ajax._ajaxcallback;
            _xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            _xhr.send(_params);
        }
    }
}

使用就很简单了。

1.先插入引用。

<script src="js/ajax.js" type="text/javascript"></script>

 

2.然后写 js代码:(ajaxtest.htm)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/ajax.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ajaxtest() {
            var uid = document.getElementByIdx_x("txtuid").value;
            var pwd = document.getElementByIdx_x("txtpwd").value;
            ajax.get("ajaxtest.ashx", { "uid": uid, "pwd": pwd }, function (data) {
                alert(data);
            });
        }
    </script>
</head>
<body>
<input type="text" id="txtuid" />
<input type="text" id="txtpwd" onblur="ajaxtest()"/>
</body>
</html>


3.用C#建一个一般处理程序:(ajaxtest.ashx)

<%@ WebHandler Language="C#" class="ajaxtest" %>

using System;
using System.Web;

public class ajaxtest : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        var uid = context.Request["uid"];
        var pwd = context.Request["pwd"];
        context.Response.Write( uid +":" +pwd);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

这里的框架使用就和JQuery里一样,不过要注意参数的顺序:

 ajax.get("ajaxtest.ashx", { "uid": uid, "pwd": pwd }, function (data) {
                alert(data);
 });
第一个参数是url,就是你要从哪个页面获取数据。必须

第二个参数是params,也就是要传递的参数,没有时,用{}就可以了

第三个参数是callback,也就是回调函数,必须,用于获取传过来的数据。

post使用方式一样。

有更好的实现方式,欢迎拍砖啊^_^

posted @ 2011-03-17 13:28  山之松  阅读(207)  评论(0编辑  收藏  举报