前端學習 JQuery Ajax使用經驗

2021-09-06 17:38:06 字數 2036 閱讀 4739

0.前言

在專案推進過程中常常使用ajax,通過jquery提供的函式能夠很方便的使用ajax,可是在實際使用中也遇到一些問題,比如怎樣防止瀏覽器使用快取,怎樣使用同步方式等。通過博文整理總結希望自身有所提高。

在這裡通過乙個加法樣例說明問題.為了突出ajax,前端網頁和後端php程式盡可能的簡單。

【前端】——add.html

圖1 add頁面

【後端】——add.php

<?php 

// 返回json格式

$result = array();

$result["result"] = $_get["a"] + $_get["b"];

echo json_encode($result, json_numeric_check);

?>

【**倉庫】——

test-jquery-ajax

**倉庫位於bitbucket使用hg(而不是git),hg在windows或ubuntu上均有非常好用的gui工具——tortoisehg,本人愚笨沒能熟練掌握git。

【 tortoisehg使用說明】——假設沒有使用過hg請參考博文hg clone部分操作就可以。   

【jquery 中文api】

1.經常使用的getjson

var submit_async = function() , 

function(data) );

};

【http請求和響應】

圖2 完整的http請求和響應

2.防止瀏覽器使用快取

瀏覽器為了加快執行速度,假設重複請求同乙個url,那麼瀏覽器會使用快取中的內容而不在向server又一次請求。為了防止瀏覽器使用快取,能夠在url之後添�一些變化的內容,最經常使用的方法便是添�當前時間的毫秒值,比如添�&now=《當前時間毫秒值》。(即使用這樣的方法也存在一些「頑固派」,比如執行ios6系統的safari瀏覽器)。

var submit_async = function() , 

function(data) );

};

【http請求和響應】

圖3 完整的http請求和響應

3.使用同步方式

getjson方法並沒有同步選項,假設使用同步方式可使用ajax原生方法。同步方式須要設定async選項為false。

var submit_sync = function() ,

datatype: "json",

// cache: false,

success: function(data) // 注意不要在此行新增�逗號

});}

【http請求和響應】

http請求和響應同圖3.

4.再議防止瀏覽器使用快取

在ajax方法中有乙個

cache選項,假設設定為cache:false意為禁止瀏覽器快取。實現的方法和很相似,該引數在url之後添�&_=《當前時間毫秒值》

var submit_sync = function() ,

datatype: "json",

cache: false,

success: function(data) // 注意不要在此行新增�逗號

});}

【http請求和響應】

圖4 完整的http請求和響應

前端學習 JQuery Ajax使用經驗

0.前言 在專案推進過程中經常使用ajax,通過jquery提供的函式可以非常方便的使用ajax,但是在實際使用中也遇到一些問題,例如如何防止瀏覽器使用快取,如何使用同步方式等。通過博文整理總結希望自身有所提高。在這裡通過乙個加法例子說明問題.為了突出ajax,前端網頁和後端php程式盡可能的簡單。...

前端基礎學習 資料請求之axios的基本使用

axios 是專注於網路資料請求的庫。相比於原生的 xmlhttprequest 物件,axios 簡單易用。相比於 jquery,axios 更加輕量化,只專注於網路資料請求。axios.get 位址 then 成功時的處理函式 axios.get then function res axios....

網頁前端效能測試 Lighthouse的使用

lighthouse 幫助 是乙個google開源的自動化工具,它的主要功能就是檢測 的效能,分析網路應用和網頁,收集現代效能指標並提供對開發人員最佳實踐的意見。它能夠針對性能 可訪問性 漸進式 web 應用等進行審核。由於chrome開發著工具中audits面板配置好引數,點選 run audit...