jQuery篇——Ajax基础之get请求

什么是Ajax?

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。(属于前端而不是后端)
那如何使用Ajax呢？掌握以下五步，你就掌握了Ajax！

1. 创建一个异步对象
   var xmlhttp=new XMLHttpRequest();
2. 设置请求方式和请求地址：.open方法，传入三个参数
   method：请求的类型；GET 或 POST
   url：文件在服务器上的位置
   async：true（异步）或 false（同步）
   xmlhttp.open(“GET”, “04-ajax-get.php”, true);
3. 发送请求：
   xmlhttp.send();
4. 监听状态的变化

                xmlhttp.onreadystatechange = function (ev2) {	
                    /*
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成，且响应已就绪
                    */
                    if(xmlhttp.readyState === 4){
                        // 判断是否请求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5.处理返回的结果
                            console.log("接收到服务器返回的数据");
                            //alertxmlhttp.responseText)
                        }else{
                            console.log("没有接收到服务器返回的数据");
                        }

                    }

5. 返回处理的结果！
   拿到服务器请求的数据：
   xmlhttp.responseText：获得字符串形式的响应数据。
   xmlhttp.responseXML:获得XML的响应数据。

Ajax在ie浏览器中使用的两个问题

1.现代浏览器都支持Ajax的异步对象，而ie7以下的要考虑对象兼容问题：解决方案如下

                var xhr;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }

2.ie的缓存机制
在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为同一个URL只有一个结果：
05-ajax-get.txt === abc；
如果你访问的URL地址没有发生变换，发送的请求恒是一个结果。
解决方案：在URL后面拼接一段随机数，如数学函数或者时间对象。

xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true)；

GET请求的封装

鉴于每次Ajax请求都要进行如上相同的五步操作，因此我们可以将Ajax封装成一个函数，需要发送请求时即开始调用，少去写大多重复的代码。同时解决一下问题：
1.url中不能出现中文2.请求超时的处理方案
封装方案如下（直接复制即可）：

function obj2str(obj) {
    /*
    {
        "userName":"lnj",
        "userPwd":"123456",
        "t":"3712i9471329876498132"
    }
    */
    obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
    obj.t = new Date().getTime();
    var res = [];
    for(var key in obj){
        // 在URL中是不可以出现中文的, 如果出现了中文需要转码
        // 可以调用encodeURIComponent方法
        // URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
    }
    return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(url, obj, timeout, success, error) {
    // 0.将对象转换为字符串
    var str = obj2str(obj); // key=value&key=value;
    // 1.创建一个异步对象
    var xmlhttp, timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.设置请求方式和请求地址
    /*
    method：请求的类型；GET 或 POST
    url：文件在服务器上的位置
    async：true（异步）或 false（同步）
    */
    xmlhttp.open("GET", url+"?"+str, true);
    // 3.发送请求
    xmlhttp.send();
    // 4.监听状态的变化
    xmlhttp.onreadystatechange = function (ev2) {
        /*
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
        */
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            // 判断是否请求成功
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                xmlhttp.status === 304){
                // 5.处理返回的结果
                // console.log("接收到服务器返回的数据");
                success(xmlhttp);
            }else{
                // console.log("没有接收到服务器返回的数据");
                error(xmlhttp);
            }
        }
    }
    // 判断外界是否传入了超时时间
    if(timeout){
        timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();
            clearInterval(timer);
        }, timeout);
    }
}

调用Ajax进行get请求

oBtn.onclick = function (ev1) {
                ajax("04-ajax-get.php", {
                    "userName":"lnj",
                    "userPwd":"123456"
                }, 3000
                , function (xhr) {
                    alert(xhr.responseText);
                }, function (xhr) {
                    alert("请求失败");
                });
            }