zoukankan      html  css  js  c++  java
  • Promise实现ajax

    利用Promise实现ajax

    GET

        function getAjax(url) {
            return new Promise((resolved,rejected)=>{
                //创建ajax对象
                let ajax = new XMLHttpRequest();
                //配置参数
                ajax.open('get',url,true)
                //发送请求
                ajax.send();
                //请求成功之后
                ajax.onload = function () {
                    if(this.status === 200){
                        console.log(ajax.responseText)
                        resolved(ajax.responseText);
                    }else{
                        rejected();
                    }
    
                }
            })
        }
    View Code
    getAjax(url).then().catch()

    POST

        function postAjax(url,param) {
            return new Promise((resolved,rejected)=>{
                //创建ajax对象
                let ajax = new XMLHttpRequest();
                //配置参数
                ajax.open('post',url,true);
    
                //设置请求头,表示我传递的参数的类型
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //发送请求,并将数据传递过去
                ajax.send(JSON.stringify(data));
    
                //请求成功之后
                ajax.onload = function () {
                    if(this.status === 200){
                        console.log(ajax.responseText)
                        resolved(ajax.responseText);
                    }else{
                        rejected();
                    }
    
                }
            })
        }
    View Code
    getAjax(url,param).then().catch()

    GET POST合并

        function myAjax(type,url,params) {
            return new Promise((resolved,rejected)=>{
    
                //创建ajax对象
                let ajax;
                //注意,不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性,一是因为这个字符串本身可以伪造,二是通过IE版本判断JavaScript特性将非常复杂。
                if (window.XMLHttpRequest) {
                    ajax = new XMLHttpRequest();
                } else {
                    ajax = new ActiveXObject('Microsoft.XMLHTTP');
                }
    
    
                if(type == 'get' || type == ''){//get
                    //配置参数
                    ajax.open('get',url,true)
                    //发送请求
                    ajax.send();
                }else if(type == 'post'){//post
                    //配置参数
                    ajax.open('post',url,true);
                    //设置请求头,表示我传递的参数的类型
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    //发送请求,并将数据传递过去
                    ajax.send(JSON.stringify(data));
                }
    
                //请求成功之后
                request.onreadystatechange = function (){
                    if (request.readyState === 4){
                        if(this.status === 200){
                            console.log(ajax.responseText)
                            resolved(ajax.responseText);
                        }else{
                            rejected();
                        }
                    }
                }
    
            })
        }
    View Code
        getAjax('get').then().catch()
        getAjax('post',param).then().catch()
  • 相关阅读:
    占位
    JavaScript(13):用jQuery实现复选框的全、反、取选
    JavaScript(12):jQuery(1)
    JavaScript(11):词法分析
    JavaScript(10):行为(HTML)、结构(CSS)、样式(JS)相分离的页面
    JavaScript(9):非常规form表单提交、弹出框、URL和刷新、定时器
    JavaScript(8):搜索框示例实现、样式操作、属性操作、标签操作
    JavaScript(7):DOM直接查找与间接查找的补充
    JavaScript(6):作用域、面向对象
    开篇杂谈
  • 原文地址:https://www.cnblogs.com/shaokevin/p/9796882.html
Copyright © 2011-2022 走看看