ajax的基本封装

ajax的基本封装


<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>

你可能感兴趣的:(ajax)