/**
 * ajax参数：
 * ajax({
 * method:post,get,
 * url,
 * param:参数，
 * callback:回调函数
 * })
 * 
 */
var test = (function () {       //函数自执行    test存放返回的值，作为全局变量

    // ajax创建兼容封装
    function getXlmHttp(obj) {
        var xmlHttp;
        if (window.XMLHttpRequest) { //兼容DOM
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //兼容IE
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlHttp;

    }

    // ajax get请求
    function getAjax(obj) {
        var xmlHttp = getXlmHttp();
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                console.log(xmlHttp.responseText);
                obj.callback(xmlHttp);
            }
        }
        // var obj = { "username": '张三', "password": "123" }
        // 取对象的值有两种方式，1、"."" 2、"[]"
        // 运算符要求是标识符，不能使变量，
        var str;
        for (key in obj.param) {
            str = "key" + "=" + obj.param[key] + "&";
        }
        if (str.length > 0) {
            str.url = obj.url + "?" + str;
        }
        xmlHttp.open(obj.method, obj.url)
        xmlHttp.send(null)
    }

    // ajax post请求
    // var obj = { "username": '张三', "password": "123" }
    function postAjax(obj) {
        var xmlHttp = getXlmHttp();
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                console.log(xmlHttp.responseText);
                obj.callback(xmlHttp);
            }
        }
        var str;
        for (key in obj.param) {
            str = "key" + "=" + obj.param[key] + "&";
        }
        if (str.length > 0) {
            str.url = obj.url + "?" + str;
        }
        xmlHttp.open(obj.method, obj.url);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.send(str);
    }

    // 调用请求方式封装
    function ajax(obj) {
        if (obj.method = "post") {
            postAjax(obj);
        }
        else if (obj.method = "get") {
            getAjax(obj)
        }
    }

    // ajax Json封装
    function getJson(obj) {
        obj.callback = function (xmlHttp) {
            var obj = JSON.parse(xmlHttp.responseText);
            obj.callback(obj);
        }
        getAjax(obj);
    }
    return { "getAjax": getAjax, "postAjax": postAjax, "getJson": getJson, "ajax": ajax }    //返回值
})();

test.getAjax() //调用封装的函数

优点：

1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2.使用异步的方式与服务器通信，不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

优质内容筛选与推荐>>
1、phpstorm 63342默认端口怎么修改
2、nginx 相关
3、CMMI学习作业
4、plsql查询数据库-中文显示问号问题
5、Eclipse插件打包