zoukankan      html  css  js  c++  java
  • 实现自己的$.ajax

    在很长的一段时间里,遇到要ajax数据时,都只会拖拖jQuery的$.ajax

    可是要用$.ajax必须引用jQuery库。

    虽然jQuery库不是很大,但是我们可能有时候不想引用。

    闲着无聊就做了个$.ajax,这样在要ajax数据时就可以简单的应用了。

    废话太多了。这里省略无数火星语#$%^&*@...

    上代码吧:

    window.$.ajax = function () {
            var args = arguments[0];
            if (typeof args == "object") {
                var request = null;
                if (window.XMLHttpRequest) {
                    request = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    request = new ActiveXObject('Microsoft.XMLHTTP');
                }
                var stateChange = function () {
                    switch (request.readyState) {
                        case 1: //载入中
                            if (args.loading) args.loading();
                            break;
                        case 2: //载入完成
                            if (args.achieve) args.achieve();
                            break;
                        case 3: //交互
                            if (args.interact) args.interact();
                            break;
                        case 4: //完成 200 is OK, 404 is not found, so on 
                            if (request.status == 200) {
                                //request.responseText or request.responseXML
                                if (args.success) args.success(request.responseText);
                            } else {
                                //request.statusText include error
                                if (args.error) args.error();
                            }
                            break;
                    }
                }
                if (request && args.url) {
                    var type = args.type ? args.type : "get";
                    var async = args.async ? args.async : true;
                    var data = args.type ? (args.type == "get" ? null : (args.data ? args.data : null)) : null;
                    var url = args.url;
                    request.onreadystatechange = stateChange;
                    request.open(type, url, async);                  
                    request.send(data);          
                }
            }
        }
    
     然后我们页面就可以这么使用了:
     $.ajax({
                url: "Handler1.ashx?t=" + Math.random(),
                loading: function () {
                    log.write('载入中1')
                },
                achieve: function () {
                    log.write('载入完成1')
                },
                interact: function () {
                    log.write('交互1')
                },
                success: function (txt) {
                    log.write(txt)
                },
                async: false
            });
    

     有木有感到很熟悉。

    好吧就这样了。

  • 相关阅读:
    Javascript
    读jQuery源码
    常用正则-(各种数字,不能包括特殊字符等,后续再补充)
    SpringBoot入门教程(二) Spring Boot配置第二章
    Mybatis面试题
    HTTP和socket的连接请求的区别
    Maven有哪些优点和缺点
    @Autowired 与@Resource的区别(详细)
    spring的优点与缺点
    SpringMVC常见面试题总结
  • 原文地址:https://www.cnblogs.com/pencil/p/2294789.html
Copyright © 2011-2022 走看看