ajax相关知识

1. 原生的ajax发送get请求(参数拼接在请求地址的后面)

var xhr = new XMLHttpRequest()
  //创建请求
   xhr.open('GET','http://liulongbin.top:3006/api/getbooks?id=1&bookname=西游记');
//    发送请求
   xhr.send();
   //响应结果
   xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            console.log(xhr.responseText)
}
     }

2. 原生ajax发送post请求(参数放在send()中)

var xhr = new XMLHttpRequest()
xhr.open('POST','http://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)
      }
  }

3. 使用jquery发送Ajax请求

发送get请求
  $.ajax({
                url:'http://www.liulongbin.top:3006/api/getbooks',
                type:'GET',
                data:{bookname:'西游记',author:'吴承恩'},
                success:function(res){
                    if(res.status !== 200){
                        return alert('获取图书数据失败')
                    }
                    })
             
   $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
             console.log(res)
         });          
             
   
  发送post请求
      $.ajax({
            url:'http://liulongbin.top:3006/api/addcmt',
            type:'POST',
            data:obj,
            success:function(ref){
               console.log(ref)
               getCommittee()
            }
        })
        
 $.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'水浒传',author:'施耐庵',publisher:'天津出版社'},function(res){
                console.log(res)
            })   
                    

4. 自己封装一个Ajax

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


// 封装ajax
function myAjax(options){
    var xhr = new XMLHttpRequest();
    var result = getData(options.data)
    if(options.method.toUpperCase() === 'GET'){
        xhr.open(options.method,options.url + '?' + result);
        xhr.send();
    }else{
        xhr.open(options.method,options.url);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(result);
    };
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            const res = xhr.responseText;
            options.success(JSON.parse(res))
        }
    }
}
// 封装get方法
function myGet(url,...options){
    var result = [];
    var xhr = new XMLHttpRequest();
    for(let i of options){
        if(typeof i === 'object'){
            console.log(i)
            result = getData(i)
           
        }
    }
    xhr.open('get',url + '?' + result);
    xhr.send();
    console.log(result)
    console.log(options)
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            const res = xhr.responseText;
            options[options.length - 1](res)
        }
    }
}


// 封装post方法
function myPost(url,data,fn){
    var xhr = new XMLHttpRequest();
    var result = getData(data);
    xhr.open('post',url);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(result);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            const res = xhr.responseText;
            fn(JSON.parse(res))
        
        }
    }
}