Javascript学习------ajax

原生js 封装ajax-纯粹网上直接照搬，没看懂希望下次回头看时能明白一点：
<!DOCTYPE html>
<html>
<body>
    <script type="text/javascript">
        // 使用原生js 封装ajax
        // 兼容xhr对象
        var $ = {
            createXHR: function () {
                if (typeof XMLHttpRequest != "undefined") { // 非IE6浏览器
                    return new XMLHttpRequest();
                } else if (typeof ActiveXObject != "undefined") {// IE6浏览器
                    var version = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp",];
                    for (var i = 0; i < version.length; i++) {
                        try {
                            return new ActiveXObject(version[i]);
                        } catch (e) {
                        }
                    }
                } else {
                    throw new Error("您的系统或浏览器不支持XHR对象！");
                }
            },
            params: function (data) {
                var arr = [];
                for (var i in data) {
                    arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
                }
                return arr.join("&");
            },
            ajax: function (obj) {
                var xhr = this.createXHR();
                obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
                obj.data = this.params(obj.data);      // 转义字符串
                if (obj.method === "get") {      // 判断使用的是否是get方式发送
                    obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
                }
                // 异步
                if (obj.async === true) {
                    // 异步的时候需要触发onreadystatechange事件
                    xhr.onreadystatechange = function () {
                        // 执行完成
                        if (xhr.readyState == 4) {
                            callBack();
                        }
                    }
                }
                xhr.open(obj.method, obj.url, obj.async);  // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
                if (obj.method === "post") {
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send(obj.data);
                } else {
                    xhr.send(null);
                }
                // xhr.abort(); // 取消异步请求
                // 同步
                if (obj.async === false) {
                    callBack();
                }
                // 返回数据
                function callBack() {
                    // 判断是否返回正确
                    if (xhr.status == 200) {
                        obj.success(xhr.responseText);
                    } else {
                        obj.Error("获取数据失败，错误代号为：" + xhr.status + "错误信息为：" + xhr.statusText);
                    }
                }
            }
        }
        var html = document.getElementsByTagName("html")[0];
        html.onclick = function () {
            $.ajax({
                "method": "post",
                "async": false,
                "url": "Main/settext",
                "data": {
                    "name": "gaga",
                    "age": 10000000,
                    "num": "12346&598"
                },
                "success": function (data) {
                    alert(data);
                },
                "Error": function (text) {
                    alert(text);
                },
                "async": false
            });
        }
    </script>
</body>
</html>
posted on 2014-09-19 15:23 流浪小白鼠阅读(126) 评论(0) 编辑收藏举报