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、幾個推薦部落格:
相關推薦
jquery中ajax 從前端到後端 完整過程解析
幾個原則: 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
jQuery中ajax應用的一個例項(前端+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類型的參數,設置請求超時時
JQuery中ajax使用方法
ces 使用 驗證 validate pos 簡單 方法 valid d+ AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。 傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。 相比於原生AJAX五個步
唇槍舌戰,誰與爭鋒?——前端後端激情辯論賽
開發者辯論賽你是否還在為才華無處施展而苦惱?你是否還在為觀點不被認同而孤立?你是否有顆操著程序猿的心而無人問津?來這裏就對了,51CTO為你量身打造一場神辯論賽,說出你的觀點,表達你那顆用代碼改變世界的決心!辯論賽主題:前端好還是後端好?正方辯友團觀點:後端飽和,前端發展空間大反方辯友團觀點:前端沒前途,後端
jQuery中ajax的4種常用請求方式
ger loaded resource media val als images 詳細 有一個 jQuery中ajax的4種常用請求方式: 1.$.ajax()返回其創建的 XMLHttpRequest 對象。 $.ajax() 只有一個參數:參數 key/va
jquery中ajax處理跨域的三大方式
代碼 new .ajax abs port ole ren make and 一、處理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已經實現了跨域訪問。但ie10以下不支持 只需要在服務端填上響應頭:
jquery中ajax的相關事件匯總
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相關的東西,原
Jquery中AJAX參數詳細(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和
jquery中checkbox選中取消後,不能再被jquery選中的問題!
選中 ttr 希望 後來 多看 我們 https show jquery 糾結了一上午,簡單的問題使用了幾種方法處理,最後還是失敗,後來查閱了羋老頭的資料才看到這麽一篇文章,這裏值得推薦給新手看一下。 https://www.cnblogs.com/Showshare/p/
超多慕課網實戰教程破解自學教程百度雲盤分享-Python/Java/前端後端/小程序/運維測試/人工智能
上線 備註 面試 漏洞 vue ret 服務號 協作平臺 java軟件 以下課程,需要的可以加我微*信:hgh813210,備註你需要的課程 Java企業級電商項目架構演進之路 Tomcat集群與Redis分布式百度雲實戰分享 前端成長必經之路 基於Storm構建實時熱力分