使用原生ajax及其简单封装

Posted 2020-10-26 juxiu

原生ajax配置详解

 // 原生ajax
    // 1. 创建ajax对象
    if(window.XMLHttpRequest){
        // //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        var xhr = new XMLHttpRequest()
    }else{
       // IE6, IE5 浏览器执行代码
        var xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }
    // 2.连接服务器 open(方法，地址，异步传输)
    xhr.open(‘get‘,‘file:///d%3A/markown/index.html‘,true);
    
    // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 配置请求头
    // setRequestHeader(header,value) 向请求添加 HTTP 头。
            // header: 规定头的名称
            // value: 规定头的值


    //3. 发送请求,如果使用的是post方法，则请求携带数据，在send中配置（仅post请求可用）
    xhr.send()

    
    // 4.接收返回，客户端和服务器端有交互的时候会调用onreadystatechange
    xhr.onreadystatechange=function(){
        // xhr.readyState   浏览器和服务器进行到哪一步了。
        // 0 --(未初始化) ：还没有调用open方法
        // 1 --(载入)     ：已调用send方法，正在发送请求
        // 2 --(载入完成)  ：send方法完成，已收到全部响应内容，
        // 3. --(正在解析) ：正在解析响应内容。
        // 4 --(完成)     ：响应内容解析完成，可以在客户端使用
        if(xhr.readyState == 4){
            if(xhr.status== 200){
                // xhr.responseText  获得字符串形式的响应数据。
                // xhr.responseXML      获得 XML 形式的响应数据。
                console.log("请求成功，响应内容为" + xhr.responseText);
            }else{
                console.log("请求出错！！！");
            }
        }
    }

对ajax简单封装

function ajax(methods,url,callBack,text) {
    if(window.XMLHttpRequest){
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        var xhr = new XMLHttpRequest()
    }else{
       // IE6, IE5 浏览器执行代码
        var xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }
    // 给methods 一个默认值
    var methods = methods|| ‘get‘ ;
    xhr.open(methods,url,true);
    // 如果是get请求，直接调用send方法发送请求
    if (methods== ‘get‘){
        xhr.send();
    }
    // 如果是post请求，则可配置请求参数
    if (methods==‘post‘){
        xhr.send(text);
    }
    xhr.onreadystatechange=function(){
        if(xhr.readyState == 4){
            if(xhr.status== 200){
                // 请求成功之后调用回调函数
                callBack(xhr.responseText);
            }else{
                let error = ‘错误码‘ + xhr.status
                callBack(error);
            }
        }
    }
}

调用

ajax(‘get‘,‘file:///d%3A/markown/index.html‘,‘‘,function(result){
    console.log(result);
})