javascript之ajax

定义：AJAX即“Asynchronous，Javascript+XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

优点：通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

例如手机端一个列表页面下拉加载数据，然后把请求的数据添加写入到列表页面的底部，整个数据如果不用ajax就需要想服务器请求数据，然后更新，在浏览器重新渲染出一个新的页面。因为页面的其他元素是不需要修改请求的。

原理：通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果。

---

封装AJAX方法

/**
 *
 * @param type 请求类型：get,post,...
 * @param url
 * @param dataObj 请求参数：对象字面量{key:value,...}
 * @param callback
 * @param async 是否异步
 */
function ajax(type, url, dataObj, callback, async) {
    var paramsStr = buildParamsStr(dataObj), xhr = null;
    if (type === 'get' && dataObj) {
        url = addURLParams(url, paramsStr);
    }
    xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                callback && callback(xhr.responseText);
            } else {
                console.log("请求异常！状态码：" + xhr.status);
            }
        }
    };
    xhr.open(type, url, async); // open()方法启动一个请求以备发送；
    if (type == 'get') {
        xhr.send(null);
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
        xhr.send(paramsStr);
    }
}

encodeURIComponent()方法

• GET请求经常发生查询字符串格式引发的错误；
• 可以对查询字符串中每个参数的名称和值用encdoeURIComponent()进行编码；

function buildParamsStr(paramsObj){
    var str = '';
    for (key in paramsObj) {
        // 排除原型中属性
        if (dataObj.hasOwnProperty(key)) {
            // 对查询字符串中每个参数名称和值用encdoeURIComponent()进行编码
            str += "&" + encodeURIComponent(key) + "=" + encodeURIComponent(paramsObj[key]);
        }
    }
    return str.slice(1);
}

function addURLParams(url, paramsStr) {
    url += (url.indexOf('?') === -1) ? '?' : '&';
    url += paramsStr + '&' + new Date().getTime();
    return url;
}

调用示例

window.onload = function(){
    var btn = document.getElementById("btn1");
    btn.onclick = function(){
        ajax('get', 'a.txt', function fnSucc(str){
            alert(str)
        });
    }
}