ajax的基本封装

最新推荐文章于 2023-11-17 11:37:31 发布

Amanda_wmy

最新推荐文章于 2023-11-17 11:37:31 发布

阅读量933

点赞数 1

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/Amanda_wmy/article/details/81251852

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ajax的基本封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax封装</title>
</head>
<body>
    <script>
        //封装者
        function ajax (method,url,params,done) {  //希望params传递的是对象
             method = method.toUpperCase() //将请求方法都转成大写
             var xhr = new XMLHttpRequest();//创建对象
             //将params转换成字符串
             //将object类型的参数转换成'key1=value1&key2=value2'格式
             if(typeof params === 'object'){
                 var tempArr = []
                 for(var key in params){
                     var value = params[key]
                     tempArr.push(key + '=' + value)
                 }
                 //tempArr = ['key1=value1','key2=value2']
                 params = tempArr.join('&')
                 //tempArr = ['key1=value1&key2=value2'] //转成了字符串
             }
             if(method === 'GET'){
                 url += '?' + params  //get请求url后面拼接问号
             }
             xhr.open(method,url); //向服务器发送请求
             var data = null
             if(method === 'POST'){
                 xhr.setRequestHeader('Content-Type','“application/x-www-form-urlencoded”') //post请求需设置请求头
                 data = params
             }

             xhr.send(data); //向服务器发送请求
             xhr.onreadystatechange = function(){ //服务器响应请求
                  if(this.readyState !==4) return  //readyState不为4时return
                  //！！！！！不应该在封装的函数中主观的处理响应的结果，应该在调用者身上使用响应的结果，要拿到响应的结果
                  //不应该在封装者里面主观的去判断调用者要去干什么
                //   console.log(this.responseText)
                //调用这个函数
                done(this.responseText)
             }
        }
        //调用者
        //变被动为主动，定义一个函数，传递函数，调用者传递给封装者
        var onDone = function(res){
            console.log(res) //res就是即可拿到this.responseText的内容
            console.log('做完了')
        }
        // ajax('GET' , 'time.php' , 'id=1')
        // ajax('POST', 'add.php' , 'key1=value1&key2=value2') //传字符串形式，但是多数情况下是传递对象形式
        // ajax('GET' , 'time.php' , {id:1})  
        // ajax('POST', 'add.php' , {key1:'value1',key2:'value2'})
        // ajax('post', 'add.php' , {key1:'value1',key2:'value2'})
        ajax('post', 'add.php',{}, onDone)
    </script>
</body>
</html>

Amanda_wmy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax的基本封装

ajax的基本封装&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫