zoukankan      html  css  js  c++  java
  • 封装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(

  • 相关阅读:
    C语言博客05--指针
    网络1911、1912 D&S第2次作业--批改总结
    JAVA课程设计——愤怒的小鸟(个人)
    JAVA课程设计——愤怒的小鸟(团队)
    网络1911、1912 C语言第1次作业批改总结
    Python--安装第三方库的方法
    Eclipse中文插件安装教程
    DS博客作业08--课程总结
    DS博客作业07--查找
    DS博客作业06--图
  • 原文地址:https://www.cnblogs.com/firstdream/p/2343837.html
Copyright © 2011-2022 走看看