1. 程式人生 > >jquery中ajax 從前端到後端 完整過程解析

jquery中ajax 從前端到後端 完整過程解析

幾個原則:

1.get方式訪問瀏覽器時,常加引數緣由:

GET訪問瀏覽器是等冪的,就是一個相同的URL只有一個結果[相同是指整個URL字串完全匹配],所以第二次訪問的時候如果 URL字串沒變化,瀏覽器是 直接拿出了第一次訪問的結果。POST則認為是一個變動性訪問 (瀏覽器認為POST的提交必定是有改變的)防止GET的等冪訪問就在URL後面加上?+new Date();[總之就是使每次訪問的URL字串不一樣的]。設計WEB頁面的時候也應該遵守這個原則。

2.ajax方式中的get和post的區別:

Get方式:
用get方式可傳送簡單資料,但大小一般限制在1KB下,資料追加到url中傳送(http的header傳送),也就是說,瀏覽器 將各個表單欄位元素及其資料按照URL引數的格式附加在請求行中的資源路徑後面。另外最重要的一點是,它會被客戶端的瀏覽器快取起來,那麼,別人就可以從瀏覽器的歷史記錄中,讀取到此客戶的資料,比如帳號和密碼等。因此,在某些情況下,get方法會帶來嚴重的安全性問題。總之,GET方式傳送資料量小,處理效率高,安全性低,會被快取,而POST反之。

Post方式:
當使用POST方式時,瀏覽器把各表單欄位元素及其資料作為HTTP訊息的實體內容傳送給Web伺服器,而不是作為URL地址的引數進行傳遞,使用POST方式傳遞的資料量要比使用GET方式傳送的資料量大的多。

接下來,看程式碼中我們的前臺:

我們看到前臺的程式碼中有:

當後臺收到前端的$.ajax( )中的路徑時(url: "/report/loadAssetsTransactionsByRegionTime"),我們在web.xml中配置了攔截器,這部分是由Struts2的核心控制器:StrutsPrepareAndExecuteFilter來完成的,它包括兩個部分StrutsPrepareFilter和StrutsExecuteFilter。

<filter>
    <filter-name>struts-prepare</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareFilter</filter-class>
  </filter>
  <filter>
    <filter-name>struts</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsExecuteFilter</filter-class>
  </filter>

如上所示,是struts2核心控制器程式碼在web.xml中的配置檔案,對映路徑一般對映到"/*",再來看下面具體的攔截動作

<filter-mapping>
    <filter-name>struts-prepare</filter-name>
    <url-pattern>/main/*</url-pattern>
    <url-pattern>/inspection/*</url-pattern>
    <url-pattern>/report/*</url-pattern>
    <url-pattern>/audit/*</url-pattern>
    <url-pattern>/ajax/*</url-pattern>
    <url-pattern>/location/*</url-pattern>
    <url-pattern>/admin/*</url-pattern>
    <url-pattern>/calculation/*</url-pattern>
    <url-pattern>/conf/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>
<filter-mapping>
    <filter-name>struts</filter-name>
    <url-pattern>/main/*</url-pattern>
    <url-pattern>/inspection/*</url-pattern>
    <url-pattern>/report/*</url-pattern>
    <url-pattern>/audit/*</url-pattern>
    <url-pattern>/ajax/*</url-pattern>
    <url-pattern>/location/*</url-pattern>
    <url-pattern>/admin/*</url-pattern>
    <url-pattern>/calculation/*</url-pattern>
    <url-pattern>/conf/*</url-pattern>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

struts中核心是Action和攔截器,struts2的action必須放在一個指定的包空間下定義。struts.xml檔案中package元素用於定義包配置。struts2框架有兩個核心配置檔案,其中struts.xml檔案主要負責管理應用中的Action對映,及Action處理結果和物理資源之間的對映關係。除此之外,Struts2框架還包含了一個struts.properties檔案,該檔案主義了Struts2框架的大量常量屬性。但通常推薦也是在struts.xml檔案中來配置這些常量屬性。

<!-- 定義處理請求URL為dailyMonitoringAction的Action -->
<action name="loadAssetsTransactionsByRegionTime" class="dailyMonitoringAction" method="loadAssetsTransactionsByRegionTime">          
  <!-- 定義處理結果字串和資源之間的對映關係 ,該action中指定了返回的type為json-->
    <result name="success" type="json">
      <!-- 指定json返回的域 -->
        <param name="includeProperties">*</param>
    </result>
</action>

然後我們再看Action中,可以採用SpringMVC的方式來傳遞引數,也可以使用struts2的方式來傳遞引數,如下是使用SpringMVC的方式來傳遞資料。

@RequestMapping(value="/loadAssetsTransactionsByRegionTime", method=RequestMethod.GET)  
    public String loadAssetsTransactionsByRegionTime(String starttime, String endtime, HttpServletResponse response) {
        String startTime = starttime;
        String endTime = endtime;
        lineVM = new LineChartVM();
        lineVM.setTitle("Assets Transactions By Region");
        lineVM.setyAxisName("Transactions");
        Map<String, Map<String, Double>> assetRegionMap = dailyMonitoringService
                .loadAssetRegionTransactionTime(startTime, endTime);
        lineVM.setCategories(new ArrayList<String>(assetRegionMap.keySet()));
        Map<String, List<Double>> seriesMap = pivotingMap(assetRegionMap, 0D);
        List<ChartSerieVM> seriesList = new ArrayList<ChartSerieVM>();
        for (String key : seriesMap.keySet()) {
            ChartSerieVM chartSerieVM = new ChartSerieVM();
            chartSerieVM.setName(key);
            chartSerieVM.setData(seriesMap.get(key));
            seriesList.add(chartSerieVM);
        }
        lineVM.setSeries(seriesList);
        return SUCCESS;
    }

或者,我們可以使用Struts2來解決這個問題,我們以http://127.0.0.1:8080/demo/index.jsp?name=aty&age=20為例,struts2的action中獲取請求引數值,總的來說有2種方式:第一種在action中定義同名變數,提供get/set方法

public class DemoAction
{
    private String name;
    private int age;
     
    public String getName()
    {
        return this.name;
    }
     
    public void setName(String name)
    {
        this.name = name;
    }
     
    public int getAge()
    {
        return this.age;
    }
     
    public void setName(int age)
    {
        this.age = age;
    }
}

又或者,使用手動獲取HttpServletRequest,然後呼叫request.getParameter()

public class DemoAction
{   
    public String execute()
    {
        HttpServletRequest request = ServletActionContext.getRequest();
        String name = request.getParameter("name");
        String age = request.getParameter("age");
    }
}

這2種方式有什麼差別呢?很顯然是成員變數和區域性變數的區別。我們知道一個action可以定義多個public方法,用來處理不同的前臺請求。如 果同一個請求引數,會被多個方法使用,那麼就適合用第一種方式;如果一個請求引數,僅僅只會被一個方法使用,就適合使用第二種方式。原則就是:保證同一個 引數名稱在action程式碼中只出現一次(避免重複),而且變數的作用範圍要儘可能的小(程式碼內聚)。將http請求引數封裝到實體類的方式,可以參考struts2的模型驅動http://blog.csdn.net/li_tengfei/article/details/6098145。下面我們看下,如何將引數封裝到Map和List中。

public class DemoAction
{   
    private Map<string,string> requestMap = new HashMap<string,string>();
     
    private List<user> requestList = new ArrayList<user>();
     
}</user></user></string,string></string,string>

js將引數封裝到list中

var params = {};
params["requestList[0].id"] = $("#person_id").attr("value");
params["requestList[0].username"] = "aty";
params["requestList[0].password"] = "123";
params["requestList[0].age"] = 25;
params["requestList[0].address"] = "";
 
$.post(url,params);

js將引數封裝到map

var params = {};
params["requestMap.id"] = $("#person_id").attr("value");
params["requestMap.username"] = "aty";
params["requestMap.password"] = "123";
params["requestMap.age"] = 25;
params["requestMap.address"] = "";
 
$.post(url,params);

可以看到使用Map接收http請求引數, 和使用實體類沒有差別,在js和java端的做法也都是相同的。

補充幾個知識點:

  我們採用struts2時採用的傳統的配置檔案的方式,並沒有使用傳說中的零配置。spring3 mvc可以認為已經100%零配置了(除了配置spring mvc-servlet.xml外)。

  第一,機制:spring mvc的入口是servlet,而struts2是filter(這裡要指出,filter和servlet是不同的。以前認為filter是 servlet的一種特殊),這樣就導致了二者的機制不同,這裡就牽涉到servlet和filter的區別了。

  第二,效能:spring會稍微比struts快。spring mvc是基於方法的設計,而sturts是基於類,每次發一次請求都會例項一個action,每個action都會被注入屬性,而spring基於方法, 粒度更細,但要小心把握像在servlet控制資料一樣。spring3 mvc是方法級別的攔截,攔截到方法後根據引數上的註解,把request資料注入進去,在spring3 mvc中,一個方法對應一個request上下文。而struts2框架是類級別的攔截,每次來了請求就建立一個Action,然後呼叫setter getter方法把request中的資料注入;struts2實際上是通過setter getter方法與request打交道的;struts2中,一個Action物件對應一個request上下文。

  第三,引數傳遞:struts是在接受引數的時候,可以用屬性來接受引數,這就說明引數是讓多個方法共享的。

  第四,設計思想上:struts更加符合oop的程式設計思想, spring就比較謹慎,在servlet上擴充套件。

  第五,spring mvc是方法級別的攔截,一個方法對應一個request上下文,而方法同時又跟一個url對應,所以說從架構本身上spring3 mvc就容易實現restful url。struts2是類級別的攔截,一個類對應一個request上下文;實現restful url要費勁,因為struts2 action的一個方法可以對應一個url;而其類屬性卻被所有方法共享,這也就無法用註解或其他方式標識其所屬方法了。spring3 mvc的方法之間基本上獨立的,獨享request response資料,請求資料通過引數獲取,處理結果通過ModelMap交回給框架方法之間不共享變數,而struts2搞的就比較亂,雖然方法之間 也是獨立的,但其所有Action變數是共享的,這不會影響程式執行,卻給我們編碼,讀程式時帶來麻煩。

   故,總結如下:“struts2是類級別的攔截, 一個類對應一個request上下文,springmvc是方法級別的攔截,一個方法對應一個request上下文,而方法同時又跟一個url對應,所以說從架構本身上 spring3 mvc就容易實現restful url 。而struts2的架構實現起來要費勁,因為struts2 action的一個方法可以對應一個url。而其類屬性卻被所有方法共享,這也就無法用註解或其他方式標識其所屬方法了。spring3mvc的方法之間基本上獨立的,獨享request response資料,請求資料通過引數獲取,處理結果通過ModelMap交回給框架。方法之間不共享變數,而struts2搞的就比較亂,雖然方法之間也是獨立的,但其所有Action變數是共享的。這不會影響程式執行,卻給我們編碼 讀程式時帶來麻煩。由於Struts2需要針對每個Request進行封裝,把Request,Session等Servlet生命週期的變數封裝成一個一個Map,供給每個Action使用,並保證執行緒安全。所以在原則上,是比較耗費記憶體的。

2、JSTL在專案中的使用:JSTL(JSP Standard Tag Library,JSP標準標籤庫),是一個不斷完善的開放原始碼的JSP標籤庫。

3、java中Map介面的使用:map介面按照<key,value>的鍵值對方式組合,key是索引,本身也是物件,這點是區別於陣列的。1,2,3,4...(陣列的索引只能是下標)使用的時候,一般選擇的是Map介面的子類,而不直接使用Map介面。(Collection容器中包含Set和List介面,Set中又包含HashSet,List中包含LinkedList和ArrayList;單獨的Map介面中只有HashMap)。

  Java 中某些最常用的類。 最常用的集合類是List 和 介面Map。 List 的具體實現包括 ArrayList 和 Vector,它們是可變大小的列表,比較適合構建、儲存和操作任何型別物件的元素列表。 List 適用於按數值索引訪問元素的情形,其中的資料有順序且可以重複。而Set中資料無順序且不可以重複。

  先來看我們的Object類中的兩個方法在Map介面中的覆蓋實現:equals(obj)方法,用於比較指定物件與此Map的等價性;hascode()方法,返回此Map的雜湊嗎。(那麼問題來了,java中使用hashcode()方法有什麼用呢?使用hascode()方法用於比較兩個物件是否相等,當兩個物件的hascode()值不相等的時候,那麼兩個物件肯定不相等;如果兩個物件的hascode()方法相等,再進一步比較equals()方法,由於hascode()的值是int,比較它們速度回更快,所以可以提升比較的時候的效率);

  每個java物件都有一個唯一的標識,object類中的hash方法就是直接返回物件的這個內部id號,與string的hash方法是不同的,object的hash方法能夠用來區分不同的物件.因為原始的object物件沒有任何有意義的值可用來計算雜湊。唯一的id充分反映了面向物件的程式設計思想。

4、幾個推薦部落格:

相關推薦

jqueryajax 前端 完整過程解析

幾個原則: 1.get方式訪問瀏覽器時,常加引數緣由: GET訪問瀏覽器是等冪的,就是一個相同的URL只有一個結果[相同是指整個URL字串完全匹配],所以第二次訪問的時候如果 URL字串沒變化,瀏覽器是 直接拿出了第一次訪問的結果。POST則認為是一個變動性訪問 (瀏覽器認為POST的提交必定是有改變的)

手機APP頭像上傳 Hbuider前端 PHP完整程式碼(已測試通)

本程式碼是在Hbuider基礎上做得開發, 話不多說直接上程式碼: 前端: HTML程式碼: <div class="users"> <div id='output'>頭像</div> <div id='dcontent' &g

關於工作熔斷新增功能前端++javaagent聯調的流程,以及javaagen聯調應該注意的事項。

本片文章只針對本人工作中的筆記,誤點的同學還請繞行~ 前端傳入javaagent端所需要的引數,傳給後端。 後端將收到的引數存入資料庫。並暴露一個可以給外部訪問的提供前端傳進來的出局的介面。 javaagent端去請求後端暴露的介面,得到相應的引數,然後繼續做自己的工作。

ssm+Jquery+Ajax+pagehelper(

/** *前提條件需要下載 page.jar包然後build Path 到工程中 */ /** *實體類 *新增一個vo類 繼承原有的實體類(當然下面的幾個屬性也可以新增到原有的實體類中) */ public class Uservo extends User{

前端傳遞url引數有中文,傳過來的有亂碼,解決方案

一、問題重現: 原始碼:用get方式傳遞 @ResponseBody @RequestMapping(value = {"/findGroupByGroupName/{batchNo

前端Ajax/JS/HTML+SpringMVC(一)

過程 大致 傳輸 引號 mapping 開發 客戶 con int 1.JSON 1.1. 轉發或重定向的不足 對於發出的請求,最終需要給出“成功/失敗”的結果的話,轉發的方式來處理,給用戶的體驗就非常不好!即使用戶填錯了一項數據不達標,都需要回退至此前的頁面重新填寫,而原

前端Ajax/JS/HTML+SpringMVC(二)

serialize 關於 2個 ets test 得到 return 2.4 提交 1. jQuery AJAX 1.1. jQuery框架中的ajax()函數 在應用了jQuery框架後,調用ajax()函數即可發出AJAX請求,並獲取響應結果,該函數的參數必須是JSON

jQueryajax應用的一個例項(前端+controller)

頁面的程式碼:if(filesArray.length>0) { $.ajax({ type: "post", url: "****/****/sendFiles", //data:JSON.stringify(f

Bootstrapvalidator 前端自定義驗證和ajax遠端訪問驗證

概述 一般的校驗因為demo寫的很詳細了,所以就不多說了下面介紹兩個比較重要的擴充套件 重點 1.前端自定義驗證 "rowkey": { message: 'rowkey驗證失敗', validators: {

JQuery$.ajax()方法參數詳解(轉載)

瀏覽器 object 服務器 字符串 false type: 要求為String類型的參數,請求方式(post或get)默認為get。註意其他http請求方法,例如put和 delete也可以使用,但僅部分瀏覽器支持。timeout: 要求為Number類型的參數,設置請求超時時

JQueryajax使用方法

ces 使用 驗證 validate pos 簡單 方法 valid d+ AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。 傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。 相比於原生AJAX五個步

唇槍舌戰,誰與爭鋒?——前端激情辯論賽

開發者辯論賽你是否還在為才華無處施展而苦惱?你是否還在為觀點不被認同而孤立?你是否有顆操著程序猿的心而無人問津?來這裏就對了,51CTO為你量身打造一場神辯論賽,說出你的觀點,表達你那顆用代碼改變世界的決心!辯論賽主題:前端好還是後端好?正方辯友團觀點:後端飽和,前端發展空間大反方辯友團觀點:前端沒前途,後端

jQueryajax的4種常用請求方式

ger loaded resource media val als images 詳細 有一個 jQuery中ajax的4種常用請求方式: 1.$.ajax()返回其創建的 XMLHttpRequest 對象。 $.ajax() 只有一個參數:參數 key/va

jqueryajax處理跨域的三大方式

代碼 new .ajax abs port ole ren make and 一、處理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已經實現了跨域訪問。但ie10以下不支持 只需要在服務端填上響應頭:

jqueryajax的相關事件匯總

see asc html tty 分類 spl function global 文檔 Jquery ajax事件分類 (一) 局部事件 local events 局部事件:在單個Ajax請求對象中綁定的事件,每個 Ajax 請求對象能夠依據須要綁

Web前端傻傻分不清,

processor sea fix world port submit 文章 word targe 1. Web前端後端傻傻分不清 原創 2016年12月25日 19:50:08 7178 0 2 前言 ??做C開發將近六年,基本上沒有接觸過web相關的東西,原

JqueryAJAX參數詳細(1)-轉

too ber 註意 ajax 編碼 是否 包含 options bob http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX參數詳細列表: 參數名 類型

JQuery$.ajax()方法參數詳解

返回 自動轉換 time err last 需要 可選 修改 方式 url: 要求為String類型的參數,(默認為當前頁地址)發送請求的地址。 type: 要求為String類型的參數,請求方式(post或get)默認為get。註意其他http請求方法,例如put和

jquerycheckbox選中取消,不能再被jquery選中的問題!

選中 ttr 希望 後來 多看 我們 https show jquery 糾結了一上午,簡單的問題使用了幾種方法處理,最後還是失敗,後來查閱了羋老頭的資料才看到這麽一篇文章,這裏值得推薦給新手看一下。 https://www.cnblogs.com/Showshare/p/

超多慕課網實戰教程破解自學教程百度雲盤分享-Python/Java/前端/小程序/運維測試/人工智能

上線 備註 面試 漏洞 vue ret 服務號 協作平臺 java軟件 以下課程,需要的可以加我微*信:hgh813210,備註你需要的課程 Java企業級電商項目架構演進之路 Tomcat集群與Redis分布式百度雲實戰分享 前端成長必經之路 基於Storm構建實時熱力分