AJAX

Posted 2021-01-29 -梦珀-

使用ajax的基础

XMLHttpRequest对象

ActiveXObject对象

XMLHttpRequest（ActiveXObject）对象用于后台和服务器交换数据

创建方法

 

// new XMLHttprequest();
// new ActiveXObject(‘Microsoft.XMLHTTP‘);
var xmlhttp;
if(window.XMLHttpRequest) {
    // IE7+ Chrome FireFox Opera Safair
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6.0 IE5.0
    xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}

 

 

 

向服务器发送请求

规定请求的类型、URL 以及是否异步处理请求

xmlhttp.open(method, url, async);

method: 请求类型 POST | GET

url: 文件在服务器上的路径

async: true(异步) | false(同步) (推荐使用true)

设置HTTP头

setRequestHeader(header, value);

header: 规定头的名称

value: 规定头的值

将请求发送到服务器

xmlhttp.send(string);

string: 发送的数据（仅post方式用到）

无参数get

xmlhttp.open(‘GET‘, ‘./1.php‘, true);
xmlhttp.send();

有参数get

xmlhttp.open(‘GET‘, ‘./1.php?a=1&b=2‘, true);
xmlhttp.send();

无参数post

xmlhttp.open(‘POST‘, ‘./1.php‘, true);
xmlhttp.send();

有参数post

xmlhttp.open(‘POST‘, ‘./1.php‘, true);
xmlhttp.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
xmlhttp.send(‘a=1&b=2‘);

ajax服务器响应

以文本方式获取数据

responseText

以xml方式获取数据

responseXML

事件

每当readyState改变时触发

onreadystatechange

存有XMLHttpRequest的状态

readystate

0: 请求未初始化

1: 服务器链接已建立

2: 请求已接收

3: 请求处理中

4: 请求已处理，且响应已就绪

状态

status

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——没有发现文件、查询或URl

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

ajax提交成功时执行

xmlhttp.onreadystatechange = function () {
    if(xmlhttp.readystate == 4 && xmlhttp.status == 200) {
        console.log(xmlhttp.responseText);
    }
}

当页面含有多个ajax请求时,为每个AJAX任务调用该函数。

简单的ajax函数

/**
 * [ajax ajax封装]
 * @param  {[string]} type  [post|get]
 * @param  {[string]} url   [提交网址]
 * @param  {[object]} data  [提交数据]
 * @param  {[fun]} back  [回调函数]
 * @param  {[string]} types [‘‘|‘json‘]
 * @return {[null]}       [无]
 */
function ajax(type, url, data, back, types) {
    type = type.toUpperCase();
    if (type != ‘POST‘ && type != ‘GET‘) throw (‘type值只能为get或post‘);
    var xmlhttp, postData = ‘‘,
        getData = ‘‘;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject(‘Microsoft XMLHTTP‘);
    }
    if (back) {
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var d = xmlhttp.responseText;
                if (types == "json") {
                    d = JSON.parse(d);
                }
                back(d);
            }
        };
    }
    if (data) {
        var datas = ‘‘;
        for (var i in data) {
            datas += i + ‘=‘ + encodeURIComponent(data[i]) + ‘&‘;
        }
        datas = datas.slice(0, -1);
        if (type == ‘POST‘) {
            postData = datas;
        } else {
            getData = ‘?‘ + datas;
        }
    }
    xmlhttp.open(type, url + getData, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(postData);
}

 

调用方法

ajax(‘post‘, ‘1.php‘, {
    a: 1,
    b: 2
}, function (data) {
    console.log(data);
});

 

我的博客