美文网首页
Http请求

Http请求

作者: 衣裳云墨 | 来源:发表于2020-12-21 07:39 被阅读0次

    1、AJAX封装

    function ajax(method,url,params,callback) {
     //对参数进行处理
     method=method.toUpperCase()
     let post_params=null
     let get_params=''
     
     if (method==='GET') {
      if (typeof params==='object') {
       let tempArr=[]
       for (let key in params) {
        tempArr.push(`${key}=${params[key]}`)
       }
       params=tempArr.join('&')
      }
      get_params=`?${params}`
     } else {
      post_params=params
     }
    
     //发请求
     let xhr=new XMLHttpRequest()
    
     xhr.onreadystatechange=function(){
      if (xhr.readyState!==4) return
      callback(xhr.responseText)
     }
    
     xhr.open(method,url+get_params,false)
     if (method==='POST')
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    
     xhr.send(post_params) 
    }
    
    ajax('get','https://www.baidu.com',{id:15},data=>console.log(data))
    

    2、JSONP

    function jsonp(url, params_obj, callback) {
     //创建一个供后端返回数据调用的函数名
     let funcName = 'jsonp_' + Data.now() + Math.random().toString().substr(2, 5)
    
     //将参数拼接成字符串
     if (typeof params==='object') {
      let temp=[]
      for (let key in params) {
       temp.push(`${key}=${params[key]}`)
      }
      params=temp.join('&')
     }
    
     //在html中插入<script>资源请求标签
     let script=document.createElement('script')
     script.src=`${url}?${params}&callback=${funcName}`
     document.body.appendChild(script)
    
     //在本地设置供后端返回数据时调用的函数
     window[funcName]=data=>{
      callback(data)
    
      delete window[funcName]
      document.body.removeChild(script)
     }
    }
    
    //使用方法
    jsonp('http://xxxxxxxx',{id:123},data=>{
     //获取数据后的操作
    })
    

    相关文章

      网友评论

          本文标题:Http请求

          本文链接:https://www.haomeiwen.com/subject/rysknktx.html