封装ajax

最新推荐文章于 2024-10-04 20:38:15 发布

Formattor

最新推荐文章于 2024-10-04 20:38:15 发布

阅读量87

点赞数

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

本文链接：https://blog.csdn.net/Formattor/article/details/115494977

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

XMLHttpRequest()

get

// 创建xhr
var xhr=new XMLHttpRequest()
// 调用xhr
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
// xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')
// 发送
xhr.send()
// 监听
xhr.onreadystatechange=function(){
  if(xhr.readyState===4&&xhr.status===200){
    console.log(xhr.responseText);
  }
}

post

// 创建xhr
var xhr=new XMLHttpRequest()
// 调用xhr
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 发送
xhr.send('bookname=上帝掷骰子吗&author=曹天元&publisher=北京联合出版公司')
// 监听
xhr.onreadystatechange=function(){
  if(xhr.readyState===4&&xhr.status===200){
    console.log(xhr.responseText);
  }
}

封装ajax

处理data参数

function resolveData(data){
  var arr=[]
  for(var k in data){
    var str=k+'='+data[k]
    arr.push(str)
  }
  return arr.join('&')
}

封装ajax

function ajax(option){
  var xhr=new XMLHttpRequest()

  var qs=resolveData(option.data)

  if(option.method.toUpperCase()==='GET'){
    xhr.open(option.method,option.url+'?'+qs)
    xhr.send()
  }else if(option.method.toUpperCase()==='POST'){
    // console.log(option.data);
    xhr.open(option.method,option.url)
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xhr.send(qs)
  }

  xhr.onreadystatechange=function(){
    if(xhr.readyState===4&&xhr.status===200){
      var result=JSON.parse(xhr.responseText)
      option.success(result)
    }
  }
}

调用

<!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>
  <script src="./js/02.ajax.js"></script>
</head>
<body>
  <script>
    // ajax({
    //   method:'GET',
    //   url:'http://www.liulongbin.top:3006/api/getbooks',
    //   success:function(res){
    //     console.log(res);
    //   }
    // })
    ajax({
      method:'POST',
      url:'http://www.liulongbin.top:3006/api/addbook',
      data:{
        bookname:'石头记',
        author:'曹雪芹',
        publisher:'上海译文出版社'
      },
      success:function(res){
        console.log(res);
      }
    })
  </script>
</body>
</html>