使用原生ajax及其简单封装

Posted juxiu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用原生ajax及其简单封装相关的知识,希望对你有一定的参考价值。

原生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);
})

以上是关于使用原生ajax及其简单封装的主要内容,如果未能解决你的问题,请参考以下文章

原生ajax 方法封装

原生ajax的简单封装(仅提供大概的思路,具体还有参数验证的都没做)

原生JS封装ajax方法

原生JS封装AJAX

原生js封装ajax代码

封装原生ajax