原生ajax+封装ajax+使用方法

ajax分为get、post两种方式，只要记住运行的四个步骤就行了

1、创建XMLHttpRequest对象；

2、使用对象open方法，放置—请求方式：get/post，api，async；

3、使用对象send方法，放置—所要发送的数据；

4、执行onreadystatechange回调函数，函数内判断对象readyState和status的状态；

     readyState（状态值）：ajax的运行步骤，无论访问是否成功都会响应的步骤，五个值（0-4）；

                                 取值：0、请求未初始化（没有执行open()方法和send()方法）；

                                            1、服务器已连接，正在发送请求；

                                            2、请求接收；

                                            3、请求处理，解析响应内容；

                                            4、请求完成，解析完成，数据可以调用；

    status（状态码）：无论请求是否成功，http协议返回的信息，来判断服务器状态；

                        取值：1XX、信息响应（服务器接收到请求并且处理）；

                                   2XX、处理成功响应的信息；

                                   3XX、重定向响应（需要对信息进行进一步处理）；

                                   4XX、客户端错误（请求语法错误不能被执行）；

                                   5XX、服务器错误（执行请求失败）；

贴上四个步骤的代码：

// 第一步：创建对象
var xhr = null;
// 根据浏览器创建兼容的XMLHttpRequest对象
if(window.XMLHttpRequest) {
    // 兼容火狐、谷歌
    xhr = new XMLHttpRequest();
} else {
    // 兼容ie
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

// 第二步：执行open函数
xhr.open('get/post', url, async); // async取值true（异步）/false（同步）

// 第三步：执行send函数
xhr.send(null); // 需要发送的数据

// 第四步：执行回调函数
xhr.onreadystatechange = function() {
    // 同时满足状态值和状态码请求访问成功
    if(xhr.readyState == 4 && xhr.status == 200) {
        // 打印返回数据（字符串）
        console.log(xhr.responseText);
        // 把json字符串解析成json对象
        JSON.parse(xhr.responseText);
    }
}

上面是最基本的代码，下面来封装一下，技术不佳，潦草能用，尚待完善

function ajax(option) {
    // 实例化对象
    option = option || {};
    // 默认type为GET
    option.type = option.type.toUpperCase() || 'GET';
    // 接口
    option.url = option.url || '';
    // 默认异步
    option.async = option.async || true;
    // 发送数据
    option.data = option.data || {};
    // success
    option.success = option.success || function() {};

    // 创建xhr对象
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 处理需要发送的参数
    var str = '';
    for (var key in option.data) {
        str += key + '=' + option.data[key] + '&';
    }
    option.data = str.substr(0, str.length - 1);

    // 判断type
    if (option.type.toUpperCase() === 'GET') {
        xhr.open(option.type, option.url, option.async);
        xhr.send(null);
    } else if (option.type.toUpperCase() === 'POST') {
        xhr.open(option.type, option.url, option.async);
        // 设置响应头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xhr.send(option.data);
    }

    // 执行回调
    xhr.onreadystatechange = function() {
        if(xhr.status != 200) {
            option.error(xhr.responseText);
        } else if (xhr.readyState == 4 && xhr.status == 200) {
               option.success(xhr.responseText);
            }
        }
    }

使用方法：

var data = {
            type: 'get',
            url: './api.php',
            data: {
                username: username,
                password: password
            },
            success: function(data) {
                console.log(data);
            }
        };
ajax(data);