原生javascript实现AJAX

AJAX简介

AJAX是Asynchronous JavaScript and XML的缩写，代表异步JavaScript和XML，是一种无刷新数据读取异步通讯技术。

AJAX实现步骤

1 创建AJAX对象

var objAjax = new XMLHttpRequest();//IE6以上

2 与服务器通信

/*
*open方法三个参数
*method 连接方法 POST/GET
*url 要读取数据的地址
*true 异步 false 同步
*/
objAjax.open(method,url,Boolean);

3 发送请求

objAjax.send();

4 监听通讯过程并返回值

// 处理返回数据
/*
* onreadystatechange
* 当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件
* readyState属性存储有XMLHttpRequest的状态信息
* 0 ：请求未初始化，还未调用open()方法
* 1 ：服务器连接已建立，已调用send()方法，正在发送请求
* 2 ：请求已接受，send()方法完成，已收到全部响应内容
* 3 : 请求处理中，正在解析响应内容
* 4 ：响应内容解析完成，可以在客户端调用
*/
objAjax.onreadystatechange = function(){
    if(objAjax.readyState == 4){
        /*
        ** Http状态码
        ** 1xx ：信息展示
        ** 2xx ：成功
        ** 3xx ：重定向
        ** 4xx : 客户端错误
        ** 5xx ：服务器端错误
        */
        if(objAjax.status == 200){
            success(objAjax.responseText);
        } else {
            if(failed){
                failed(objAjax.status);
            }
        }
    }
}

案例