码迷,mamicode.com
首页 > Web开发 > 详细

封装ajax请求

时间:2021-04-10 13:41:40      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:call   slice   bool   rgba   span   col   rgb   XML   username   

  

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        ajax({
            url:./get.php,
            data:{a:100,b:200},
            dataType:json,
            success:function(response){
                console.log(success)
                console.log(response)
            },
            error:function(errorCode){
                console.log(error)
                console.log(errorCode)
            }
        })
        function ajax(options={}){
            if(!options.url){
                throw new Error(url required !)
            }
            if(!(options.request===undefined || options.request.toUpperCase()===GET || options.request.toUpperCase()===POST)){
                throw new Error(GET and POST are permitted)
            }
            if(!(options.async===undefined || typeof options.async===boolean)){
                throw new Error(async has to be Boolean)
            }
            if(!(options.dataType===undefined || options.dataType===string || options.dataType===json)){
                throw new Error(support string and boolean)
            }
            if(!(options.data===undefined || typeof options.data===string || Object.prototype.toString.call(options.data)===[object Object])){
                throw new Error(data support string and object)
            }

            var defaults={
                url:options.url,
                request:options.request || GET,
                async:typeof options.async===boolean ? options.async : true,
                dataType:options.dataType || string,
                data:options.data || ‘‘,
                success:options.success || function(){},
                error:options.error || function(){}
            }

            if(typeof defaults.data===object){
                let str=‘‘
                for(let key in defaults.data){
                    str+=key+=+defaults.data[key]+&
                }
                defaults.data=str.slice(0,-1)
            }

            var xhr=new XMLHttpRequest()
            if(defaults.request.toUpperCase()===GET && defaults.data){
                defaults.url+=?+defaults.data
            }

            xhr.open(defaults.request,defaults.url,defaults.async)
            xhr.onreadystatechange=function(){
                if(this.status>=200 && this.status<300 && this.readyState===4){
                    if(defaults.dataType===json){
                        let response=JSON.parse(this.responseText)
                        defaults.success(response)
                    }else if(defaults.dataType===string){
                        defaults.success(this.responseText)
                    }
                }
                if(this.readyState===4 && this.status>=400){
                    defaults.error(this.status)
                }
            }
            if(defaults.request.toUpperCase()===POST){
                xhr.setRequestHeader(content-type,application/x-www-form-urlencoded)
            }

            xhr.send(defaults.data)
        }

    </script>
</body>
</html>

 

php

<?php
    // echo ‘ajax‘;
    // $arr=array(
    //     ‘username‘=>‘uiop‘,
    //     ‘password‘=>‘123‘
    // );
    // // print_r($arr);
    // echo json_encode($arr);
    $arr=array(
        "message"=>"GET 法律success",
        "data"=>$_GET
    );
    // echo $_GET[‘a‘];
    // $username=$_GET[‘use‘]
    echo json_encode($arr);
?>

 

封装ajax请求

标签:call   slice   bool   rgba   span   col   rgb   XML   username   

原文地址:https://www.cnblogs.com/dissipate/p/14640138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!