那些年我学的知识--ajax浅析

　　ajax：一个web开发必须用到的技术，作为一个.net开发，在工作中自学了一些ajax的知识，自知才疏学浅，拜读了园子里一位大师的文章，对自己的所学加以总结，希望对大家有所帮助，闲话少说，且看代码：

　　

/*
*
*   CM-ajax
*   Version：0.1
*   Date:2015/2/28

*   ajax 请求封装
*   Get:get方式发送
*   Post：post方式发送
*
*   _http：XmlHttpRequest请求对象
*
*   注意：
*   param：要求所传入的参数为json格式
*/

function _initHttp() {
    var _http = false
    // IE7+,FF,Chrome
    try {
        _http = new XMLHttpRequest();
    }
    catch (trymicrosoft) {
        // IE6-
        try {
            _http = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (othermicrosoft) {
            try {
                _http = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed) {
                _http = false;
            }
        }
    }

    if (!_http) {
        alert('sorry!your browser do not support async http request');
    }
    return _http;
}

var CM = {
    get: function (url, param, handler) {
        var _http = _initHttp();
        var _para = _makeParam(param);
        _http.open("GET", url, true);
        _http.onreadystatechange = function () {
            if (_http.readyState == 4 && _http.status == 200) {
                handler(_http.responseText);
            }
        };
        _http.send(_para);
    },
    post: function (url, param, handler) {
        var _http = _initHttp();
        var _para = _makeParam(param);
        _http.open("POST", url, true);
        _http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        _http.onreadystatechange = function () {
            if (_http.readyState == 4 && _http.status == 200) {
                handler(_http.responseText);
            }
        };
        _http.send(_para);
    },
    /* 跨域请求：jsonp
    * ajax和jsonp其实本质上是不同的东西。
    * ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
    * ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取
    * 总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！
    * 参考： http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
    */
    crossDomain: function (url, handler) {
        // _handler要声明为全局变量，否则会找不到对象
        _handler = function (data) { handler(data); };
        var _url = url;
        if (_url.indexOf('?') > -1) {
            _url += '&callback=_handler';
        }
        else {
            _url += '?callback=_handler';
        }
        var script = document.createElement('script');
        script.setAttribute('src', _url);
        document.getElementsByTagName('head')[0].appendChild(script);
    }
}

// post参数
function _makeParam(param) {
    var _para = '';
    if (param) {
        for (var key in param) {
            _para += key + '=' + param[key] + '&';
        }
    }
    return _para;
}

 

　　javascript的封装真的不会，随便参考了一下大牛们的代码，姑且能用！

　　使用方法：

　　

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--引入脚本文件-->
    <script src="../js/C-AsyncHttp.js" type="text/javascript"></script>
    <script type="text/javascript">
        function getData() {
            var crossDomainUrl = 'http://localhost:22650/default.aspx';

            // 跨域请求数据
            CM.crossDomain(crossDomainUrl, function (data) {
                // TODO:跨域请求成功之后的数据处理
            });

            // Tip:参数要求为json格式
            var para = { name: "abc", age: "18" };
            var url = '../Server/server.ashx';
            // Get请求
            CM.get(url, para, function (data) { 
                // TODO:ajax请求成功之后的数据处理
            });
            // Post请求
            CM.post(url, para, function (data) {
                // TODO:ajax请求成功之后的数据处理
            });
        }

        var handler = function (data) {
            alert(data.name);
        };
    </script>
</head>
<body>
<input type="button" id="btnSend" value="Send" onclick="getData();" />
</body>
</html>

 

posted @ 2011-07-08 10:25  寒江鸟  阅读(255)  评论(0)  编辑  收藏  举报