向伺服器傳送請求的四種方法Ajax，Fetch，Axios，JQurey中的（$.ajax）

new 前端發表於2019-08-07
伺服器iOS

三種傳送請求的方式

Ajax傳送請求

  • get請求
  		//建立XMLHttpRequest
      　　let xhr = new XMLHttpRequest();
          //監聽響應
      　　xhr.onreadystatechange = function () {
      　　　　if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
      　　　　　　console.log(xhr.responseText);
      　　　　}
      　　};
		//建立連結
      　　xhr.open("GET","你要訪問的url地址",true);
      　　結束連線
      　　xhr.send();
  • post請求
         //請求引數、url、建立XMLHttpRequest
      　　let data = 'name=tom&age=18',
      　　　　url = '你的連結地址',
      　　　　xhr = new XMLHttpRequest();

      　　xhr.open('post', url);
          //設定header
      　　xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      　　xhr.send(data);
      　　xhr.onreadystatechange = function () {
      　　　　if (xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304 )){
      　　　　　　console.log(xhr.responseText);
      　　　　}
      　　}
  • 用函式封裝的思想實現配置傳送請求
/*
    實現從客戶端請求伺服器
    @parm  method    POST  GET
    @url  伺服器地址
    @parms  請求引數
    @fn     回撥函式
    接收一個物件，帶引數。
*/
function ajax(obj){
    var xhr=new XMLHttpRequest();
    obj.method=obj.method.toUpperCase();//轉換為大寫
    //GET並且有引數
    if(obj.method==="GET"&& obj.parms){//如果沒有值，就是undefined，所以為false
        // xhr.open(method,url,true);
        obj.url=obj.url+"?"+obj.parms;
        obj.parms=null;//這樣就可以最後send data即可
    }
    xhr.open(obj.method,obj.url);
    if(obj.method=="POST" && obj.parms){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
        
    }

    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status ==200){
            // console.log(xhr.responseText);
            obj.fn(xhr.responseText);
        }
    };
    xhr.send(obj.parms);
}

Fetch傳送請求

  • GET請求
 //傳送請求，獲取是否有賬號
        var url = 'http://localhost:8888'
        fetch(`${url}/log?name=${name}&pwd=${pwd}`)
        .then(
            data => {
            return data.json()
        })
        .then(
            res=>{
                console.log(res);
            }
        )
  • post傳送請求
 fetch(`${url}/reg`, {
            method: "POST",
            body: objs,//這是要傳送到資料庫的資料
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(data => {
            return data.json()
        }).then(
            res => {
                console.log(res.mes);
            }
        )

Axios傳送請求

  • 使用之前需要先安裝
    • npm install axios
  • 或者使用遠端連結
    • <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  • get請求
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  • post 請求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  • 用配置的方式傳送請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

JQuery中的傳送請求

  $.ajax({
                    url:"https://sp0.baidu.com/9_Q4sjW91Qh3otqbppnN2DJv/pae/channel/data/asyncqury?cb=?",
                    type:"get",//請求方式
                    data:{c :$company,nu:$value,appid:4001},//請求引數
                    dataType:"json",//是用json 還是jsonp還是別的請求
                    success:function(msg){
                        // 清空歷史訊息
                        $("#show").empty();

                        // 獲取介面返回的資料
                        console.log(msg);
                        var $info = msg.data.info.context;

                        // 迴圈遍歷資料
                        for(var i = 0; i <$info.length;i++){
                            // 獲取每一筆的時間資訊
                            var $time = $info[i].time;
                            $time = getTimeStr($time);

                            // 獲取每一筆的快遞資訊
                            var $desc = $info[i].desc;

                            // 建立標籤，新增到頁面中
                            var $msg = $("<p>").text($time + ":" + $desc);
                            var $i = $("<i>");

                            var $kd = $("<li>");
                            $kd.append($i).append($msg);
                            // 新增到頁面中
                            $("#show").append($kd);
                        } 


                    },
                    error:function(){
                        console.log("系統繁忙，查詢失敗");
                    }
                });
            });

跨域的解決辦法

  1. 使用JsonP ，實際的原理為在頁面新增script 中src屬性實現跨域。請求連結中要有callback，才能拿到資料。而且這種智慧傳送get請求，。

  2. 使用代理伺服器 ，也叫作反向代理；
    廢話不多說直接上程式碼
    客戶端程式碼

    var src = 'http://cache.video.iqiyi.com/jp/avlist/202861101/1/'
         fetch(`http://localhost:9000/?src=${src}`)
        .then(
            data => {
            return data.json()
        })
        .then(
            res=>{
                console.log(res);
            }
        )

自己伺服器程式碼

 //向第三方伺服器發起請求
                getInfoFromServer(data => {
                   
                    console.log(data);
                    res.send(data);
                });

                // res.end('接收到響應了')

            })
            //向第三方伺服器發起請求
            function getInfoFromServer(fn) {
                let msg = ""; //儲存資料
                http.get(rep.query.src, res => {
                    //接收資料
                    res.on('data', chuck => {
                        msg += chuck;
                    });
                    res.on('end', () => {
                        // console.log(msg);
                        fn(msg);
                    }).on('error',(err)=>{
                        console.log(err);
                        
                    });
                });
            }
            app.listen(9000, err => {
                if (!err) {
                    console.log("伺服器啟動成功");

                }
            })

相關文章