Ajax能做什么

Ajax是一種異步請(qǐng)求數(shù)據(jù)的web開發(fā)技術(shù),目前主要用于異步,大家都知道,瀏覽器主線程是單線程的,也就是一次只能干一件事,以Ajax就是讓瀏覽器當(dāng)主線程完成后去干別的事情,比如發(fā)送請(qǐng)求,加載接口數(shù)據(jù)等等.這個(gè)技術(shù)通過XMLHttpRequest對(duì)象實(shí)現(xiàn),具體的機(jī)制大家可以參考瀏覽器的時(shí)間環(huán)機(jī)制.

Ajax的應(yīng)用

以前我們?cè)陂_發(fā)的時(shí)候,沒有ajax,想要看另一個(gè)內(nèi)容,只能讓瀏覽器跳轉(zhuǎn)到另一個(gè)頁面,重新加載.導(dǎo)致用戶體驗(yàn)很不好,并且由于同一個(gè)網(wǎng)站很多內(nèi)容都一樣,導(dǎo)致相同的內(nèi)容被請(qǐng)求了多次,也浪費(fèi)了寶貴的時(shí)間.有了Ajax,就是可以讓數(shù)據(jù)在需要時(shí)候在加載,比如我有一個(gè)展示數(shù)據(jù)的表格和提交數(shù)據(jù)的表單,我們可以在提交的時(shí)候利用Ajax在不刷新頁面的情況下提交到后臺(tái),之后讓后臺(tái)給我們一個(gè)響應(yīng)結(jié)果,我們可以直接替換到原始的標(biāo)簽,這樣用戶就可以看到更新后的數(shù)據(jù),對(duì)用戶的體驗(yàn)頁非常好

Ajax使用

原生Ajax

    // 創(chuàng)建Ajax
    let xhr = new XMLHttpRequest();
    // 配置請(qǐng)求地址和請(qǐng)求方式
    xhr.open("get", "http://localhost:3000/jsonData");
    // 發(fā)送請(qǐng)求
    xhr.send();
    // 監(jiān)聽事件 onload 接收完整的服務(wù)器響應(yīng)數(shù)據(jù)
    xhr.onload = function () {
        console.log(xhr.responseText);
        // document.getElementsByTagName("h1")[0].innerHTML = xhr.responseText;
        // json字符串轉(zhuǎn)json對(duì)象
        let resText=JSON.parse(xhr.responseText);
        document.getElementsByTagName("h1")[0].innerHTML = resText.age;
    }

這個(gè)是原生最簡單的方式,其他的方式大家可以百度

目前因?yàn)槭褂迷腁jax太繁瑣,我們一般使用封裝后的Ajax,目前常用的有Jquery的$.ajax和axios,還有原生的fetch.

Jquery Ajax

  $.ajax({
            type: "post",   //請(qǐng)求類型
            dataType: "json",   //請(qǐng)求數(shù)據(jù)返回類型
            url: "https://aliyun.firehua.top/admin/json_data/sent_data",    //請(qǐng)求地址
            data: $('#form').serialize(),       //表單序列化
            success: function (result) {        //成功
                console.log(result);
                if (result.code === 200) {
                    console.log(result);
                    console.log("成功");
                    $("#name").text(result.data.name);
                    $("#phone").text(result.data.phone);
                    $("#sex").text(result.data.sex);
                } else {
                    console.log(result);
                    console.log("失敗");
                }
            },
            error: function (result) {      //失敗
                console.log(result);
                console.log("異常");
            }
        });

Vue axios

Vue是推薦用axios框架,這個(gè)是基于promise的

//發(fā)送一個(gè)`POST`請(qǐng)求
axios({
    method:"POST",
    url:'/user/12345',
    data:{
        firstName:"Fred",
        lastName:"Flintstone"
    }
});

fetch

fetch是es6提出的一種解決方式,沒有用xmlrequest,使用了原生的js,應(yīng)該是速度最快的,但是兼容性可能有問題

    fetch('http://localhost:3000/data/123',
        {method:'get'}).then(data=>{
           return data.text();
        }).then(ret=>{
            console.log(ret);
        })

這個(gè)大家需要注意需要兩次then才能獲取到響應(yīng)數(shù)據(jù)

Ajax跨域

因?yàn)闉g覽器的同源策略,導(dǎo)致一個(gè)頁面只能訪問自己站點(diǎn)的東西,訪問別的服務(wù)器會(huì)報(bào)錯(cuò)誤,這個(gè)是為了安全,所有我們需要跨域.一般常見的跨域有三種,jsonp,cors還有代理

jsonp跨域

jsonp就是動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽,里面請(qǐng)求想要的文件,一般是json數(shù)據(jù),可以不受限制

這個(gè)是jquery的jsonp

 $.ajax({
                     url: "http://localhost:9090/student",
                     type: "GET",
                     dataType: "jsonp", //指定服務(wù)器返回的數(shù)據(jù)類型
                     success: function (data) {
                         var result = JSON.stringify(data); //json對(duì)象轉(zhuǎn)成字符串
                         $("#text").val(result);
                     }
                 });

但是jsonp只能用于get請(qǐng)求,所有講解下面的cors

cors跨域

cors跨域則是由服務(wù)端進(jìn)行設(shè)置,一般不需要前端負(fù)責(zé)

下面是node的方式

   'Access-Control-Allow-Credentials': true, //允許后端發(fā)送cookie
      'Access-Control-Allow-Origin': req.headers.origin || '*', //任意域名都可以訪問,或者基于我請(qǐng)求頭里面的域
      'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', //設(shè)置請(qǐng)求頭格式和類型
      'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',//允許支持的請(qǐng)求方式
      'Content-Type': 'application/json; charset=utf-8'//默認(rèn)與允許的文本格式j(luò)son和編碼格式

代理跨域

代理跨域就是講瀏覽器的請(qǐng)求讓本站點(diǎn)的服務(wù)器去請(qǐng)求,因?yàn)榉?wù)器沒有跨域概念,所有可以直接拿到

這個(gè)是vue的代碼

  devServer: {
    host: 'localhost',
    port: 8081,
    proxy: {
      '/api': {
        target: 'http://mall-pre.springboot.cn',
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"AJAX教程的內(nèi)容"，希望對(duì)大家有幫助，如有疑問，請(qǐng)?jiān)诰€咨詢，有專業(yè)老師隨時(shí)為您服務(wù)。