JavaScript基础知识——ajax

Posted 2020-10-27 utrustme

QA：

　　1、手写Ajax

　　以下已经兼容IE

function Ajax(type, url, data, success, failed){
    // 创建ajax对象
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘)
    }
 
    var type = type.toUpperCase();
    // 用于清除缓存
    var random = Math.random();
 
    if(typeof data == ‘object‘){
        var str = ‘‘;
        for(var key in data){
            str += key+‘=‘+data[key]+‘&‘;
        }
        data = str.replace(/&$/, ‘‘);
    }
 
    if(type == ‘GET‘){
        if(data){
            xhr.open(‘GET‘, url + ‘?‘ + data, true);
        } else {
            xhr.open(‘GET‘, url + ‘?t=‘ + random, true);
        }
        xhr.send();
 
    } else if(type == ‘POST‘){
        xhr.open(‘POST‘, url, true);
        // 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
 
    // 处理返回数据
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){//状态变化
            if(xhr.status == 200){//服务端返回的状态码
                success(xhr.responseText);
            } else {
                if(failed){
                    failed(xhr.status);
                }
            }
        }
    }
}
 
// 测试调用
var sendData = {name:‘asher‘,sex:‘male‘};
Ajax(‘get‘, ‘data/data.html‘, sendData, function(data){
    console.log(data);
}, function(error){
    console.log(error);
});

readyState每次的变化，都会出发onreadystatechange 函数的执行
　　0、未初始化，还没有调用send()方法
　　1、载入，已经调用send（），正在发送请求
　　2、载入完成，send（）执行完成，并且已经接受相应内容
　　3、正在解析响应
　　4、响应解析完成，客户端调用
status 状态码
　　200-请求成功
　　3XX-重定向，浏览器直接跳转
　　4XX-客户端请求错误(404找不到，401没有权限)
　　5XX-服务器错误

　　2、跨域实现方式

　　　　跨域：浏览器同源策略，不允许ajax访问其他接口

　　　　跨域条件：协议，域名，端口，有一个不同，就算跨域

　　　　可以跨域的标签：　　　　　

< img src =xxx >
< link href = xxx>
< script src = xxx>

　　　　实现方式：JSONP、服务端设置http header