Ajax详细讲解及实例

Ajax详细讲解及实例

一、XMLHttpRequest的方法

abort(): 停止发送当前请求。

getAllResponseHeaders(): 获取服务器返回的全部响应头；以 CRLF 分割的字符串，或者 null 如果没有收到任何响应。
　　如：
　　　　 date: Fri, 08 Dec 2017 21:04:30 GMT\r\n
　　　　content-encoding: gzip\r\n
　　　　x-content-type-options: nosniff\r\n
　　　　server: meinheld/0.6.1\r\n
　　　　x-frame-options: DENY\r\n
　　　　content-type: text/html; charset=utf-8\r\n

getResponseHeader(): 返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 null。

open("method","URL"[,asyncFlag[,"username"[,"password"]]]):建立与服务器URL的链接，并设置请求和方法，以及是否使用异步请求。
　　如果远程服务需要用户名、密码，则提供对于的用户名和密码

send(content): 发送请求。其中content是请求参数。

setRequestHeader("label","value"): 在发送请求之前，先设置请求头。

 二、XMLHttpRequest的属性

onreadystatechange：该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数。

readyState：XMLHttpRequest对象的处理状态。状态每次变更都会触发onreadystatechange指定的方法被触发
　　0：代理被创建，但尚未调用 open() 方法。
　　1：open() 方法已经被调用。
　　2：send() 方法已经被调用，并且头部和状态已经可获得。
　　3.下载中； responseText 属性已经包含部分数据。
　　4.下载操作已完成。

responseText: 该属性用于获取服务器的响应文本。

responseXML: 该属性用于获取服务器响应的XML文档对象。

status： 该属性是服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码。
　　服务器常用状态码如下：
　　　　200：服务器响应正常。
　　　　304：该资源在上次请求之后没有任何修改，这通常用于浏览器的缓存机制。使用GET请求时尤其需要注意。
　　　　400：无法找到请求的资源。
　　　　401：访问资源的权限不够。
　　　　403：没有权限访问资源。
　　　　404：需要访问的资源不存在。
　　　　405：需要访问的资源被禁止。
　　　　407：访问的资源需要代理身份验证。
　　　　414：请求的URL太长。
　　　　500：服务器内部错误。

statusText: 该属性是服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息。

 三、简单实现ajax请求

/**
 * Created by xxc on 2021/3/28
 * 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
function ajax(opt) {
    opt = opt || {};
    opt.type = opt.type.toUpperCase() || 'GET';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () {
    };
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        try{
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }catch (e) {
            try{
                xmlHttp = new ActiveXObject('Msxml12.XMLHTTP');
            }catch (e) {
                
            }
        }
    }
    var params = [];
    for (var key in opt.data) {
        params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');
    if (opt.type.toUpperCase() === 'POST') {
        xmlHttp.open(opt.type.toUpperCase(), opt.url, opt.async);
        // 如果使用formdata 上传文件 不设置请求头
        if (opt.contentType !== 'multipart/form-data') {
            xmlHttp.setRequestHeader('Content-Type', opt.contentType || 'application/x-www-form-urlencoded;charset=utf-8');
        }
        xmlHttp.send(postData);
    } else if (opt.type.toUpperCase() === 'GET') {
        xmlHttp.open(opt.type, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    }
    xmlHttp.onreadystatechange = function () {
        if(xmlHttp.readyState == 4){
            if (xmlHttp.status == 200) {
                var returnData = opt.dataType == 'json' ? JSON.parse(xmlHttp.responseText) : xmlHttp.responseXML;     ;
                opt.success(returnData);
            } else {
                if (opt.error) {
                    var returnData = opt.dataType == 'json' ? JSON.parse(xmlHttp.responseText) : xmlHttp.responseXML;     ;
                    opt.error(returnData);
                }
            }
        }
    }
}

/*使用示例*/
/*
ajax({
    url:'http://www.baidu.com',
    type:"post",
    async:true,
    contentType:'multipart/form-data',
    dataType:"json/xml",
    data:{username:'xxx',password:'123456'},
    success:function (data) {
        console.log(data)
    },error:function(res){
        console.log(res);
    }
})
*/