文章詳情頁

Spring mvc AJAX技術(shù)實(shí)現(xiàn)原理解析

瀏覽：38日期：2023-09-15 14:24:01

簡介

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。

Ajax 不是一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。

在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。Google Suggest能夠自動(dòng)幫你完成搜索單詞。Google Suggest 使用 AJAX 創(chuàng)造出動(dòng)態(tài)性極強(qiáng)的 web 界面：當(dāng)您在谷歌的搜索框輸入關(guān)鍵字時(shí)，JavaScript 會(huì)把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會(huì)返回一個(gè)搜索建議的列表。

傳統(tǒng)的網(wǎng)頁(即不用ajax技術(shù)的網(wǎng)頁)，想要更新內(nèi)容或者提交一個(gè)表單，都需要重新加載整個(gè)網(wǎng)頁。

使用ajax技術(shù)的網(wǎng)頁，通過在后臺(tái)服務(wù)器進(jìn)行少量的數(shù)據(jù)交換，就可以實(shí)現(xiàn)異步局部更新。

使用Ajax，用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動(dòng)態(tài)的Web用戶界面。

偽造Ajax

我們可以使用前端的一個(gè)標(biāo)簽來偽造一個(gè)ajax的樣子。 iframe標(biāo)簽

編寫一個(gè) ajax-frame.html 使用 iframe 測試

<!DOCTYPE html><html><head lang='en'><meta charset='UTF-8'><title>xiaohua</title></head><body><script type='text/javascript'>window.onload = function(){ var myDate = new Date(); document.getElementById(’currentTime’).innerText = myDate.getTime();};function LoadPage(){ var targetUrl = document.getElementById(’url’).value; console.log(targetUrl); document.getElementById('iframePosition').src = targetUrl;}</script><div><p>請(qǐng)輸入要加載的地址：<span id='currentTime'></span></p><p> <input type='text' value='https://www.baidu.com/'/> <input type='button' value='提交' onclick='LoadPage()'></p></div><div><h3>加載頁面位置：</h3><iframe style='width: 100%;height: 500px;'></iframe></div></body></html>

使用IDEA開瀏覽器測試一下！

利用AJAX可以做：

注冊(cè)時(shí)，輸入用戶名自動(dòng)檢測用戶是否已經(jīng)存在。登陸時(shí)，提示用戶名密碼錯(cuò)誤刪除數(shù)據(jù)行時(shí)，將行ID發(fā)送到后臺(tái)，后臺(tái)在數(shù)據(jù)庫中刪除，數(shù)據(jù)庫刪除成功后，在頁面DOM中將數(shù)據(jù)行也刪除。

....等等

jQuery.ajax

Ajax的核心是XMLHttpRequest對(duì)象(XHR)。XHR為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了接口。能夠以異步方式從服務(wù)器獲取新數(shù)據(jù)。

jQuery 提供多個(gè)與 AJAX 有關(guān)的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請(qǐng)求文本、HTML、XML 或 JSON ? 同時(shí)您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。

jQuery 不是生產(chǎn)者，而是大自然搬運(yùn)工。 jQuery Ajax本質(zhì)就是 XMLHttpRequest，對(duì)他進(jìn)行了封裝，方便調(diào)用！ jQuery.ajax(...)

部分參數(shù)：

url：請(qǐng)求地址type：請(qǐng)求方式，GET、POST（1.9.0之后用method）headers：請(qǐng)求頭data：要發(fā)送的數(shù)據(jù)contentType：即將發(fā)送信息至服務(wù)器的內(nèi)容編碼類型(默認(rèn): 'application/x-www-form-urlencoded; charset=UTF-8')async：是否異步timeout：設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）beforeSend：發(fā)送請(qǐng)求前執(zhí)行的函數(shù)(全局)complete：完成之后執(zhí)行的回調(diào)函數(shù)(全局)success：成功之后執(zhí)行的回調(diào)函數(shù)(全局)error：失敗之后執(zhí)行的回調(diào)函數(shù)(全局)accepts：通過請(qǐng)求頭發(fā)送給服務(wù)器，告訴服務(wù)器當(dāng)前客戶端課接受的數(shù)據(jù)類型dataType：將服務(wù)器端返回的數(shù)據(jù)轉(zhuǎn)換成指定類型'xml': 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成xml格式'text': 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式'html': 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式，在插入DOM中時(shí)，如果包含JavaScript標(biāo)簽，則會(huì)嘗試去執(zhí)行。'script': 嘗試將返回值當(dāng)作JavaScript去執(zhí)行，然后再將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式'json': 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成相應(yīng)的JavaScript對(duì)象'jsonp': JSONP 格式使用 JSONP 形式調(diào)用函數(shù)時(shí)，如 'myurl?callback=?' jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)

簡單的測試，使用最原始的HttpServletResponse處理

配置web.xml 和 springmvc的配置文件

<?xml version='1.0' encoding='UTF-8'?><beans xmlns='http://www.springframework.org/schema/beans' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:context='http://www.springframework.org/schema/context' xmlns:mvc='http://www.springframework.org/schema/mvc' xsi:schemaLocation='http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd'>  <context:component-scan base-package='com.xiaohua.controller'/> <mvc:default-servlet-handler /> <mvc:annotation-driven />  <bean id='internalResourceViewResolver'>  <property name='prefix' value='/WEB-INF/jsp/' />  <property name='suffix' value='.jsp' /> </bean></beans>

編寫一個(gè)AjaxController

@Controllerpublic class AjaxController { @RequestMapping('/a1') public void ajax1(String name , HttpServletResponse response) throws IOException { if ('admin'.equals(name)){ response.getWriter().print('true'); }else{ response.getWriter().print('false'); } }}

導(dǎo)入jquery ，可以使用在線的CDN ，也可以下載導(dǎo)入

編寫index.jsp測試

<%@ page contentType='text/html;charset=UTF-8' language='java' %><html> <head> <title>$Title$</title> <%--<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>--%> <script src='http://www.b3g6.com/bcjs/${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js'></script> <script> function a1(){ $.post({url:'${pageContext.request.contextPath}/a1',data:{’name’:$('#txtName').val()},success:function (data,status) { alert(data); alert(status);} }); } </script> </head> <body> <%--onblur：失去焦點(diǎn)觸發(fā)事件--%> 用戶名:<input type='text' onblur='a1()'/> </body></html>

啟動(dòng)tomcat測試！打開瀏覽器的控制臺(tái)，當(dāng)我們鼠標(biāo)離開輸入框的時(shí)候，可以看到發(fā)出了一個(gè)ajax的請(qǐng)求！是后臺(tái)返回給我們的結(jié)果！測試成功！

SpringMVC實(shí)現(xiàn)

實(shí)體類user

@Data@AllArgsConstructor@NoArgsConstructorpublic class User { private String name; private int age; private String sex;}

我們來獲取一個(gè)集合對(duì)象，展示到前端頁面

@RequestMapping('/a2')public List<User> ajax2(){ List<User> list = new ArrayList<User>(); list.add(new User('黃大姐',25,'女')); list.add(new User('黃小姐',25,'女'));、 return list; //由于@RestController注解，將list轉(zhuǎn)成json格式返回}

前端頁面

<%@ page contentType='text/html;charset=UTF-8' language='java' %><html><head> <title>Title</title></head><body><input type='button' value='獲取數(shù)據(jù)'/><table align='center'> <tr> <td>姓名</td> <td>年齡</td> <td>性別</td> </tr> <tbody id='content'> </tbody></table><script src='http://www.b3g6.com/bcjs/${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js'></script><script> $(function () { $('#btn').click(function () { $.post('${pageContext.request.contextPath}/a2',function (data) {console.log(data)var html='';for (var i = 0; i <data.length ; i++) { html+= '<tr>' + '<td>' + data[i].name + '</td>' + '<td>' + data[i].age + '</td>' + '<td>' + data[i].sex + '</td>' + '</tr>'}$('#content').html(html); }); }) })</script></body></html>

成功實(shí)現(xiàn)了數(shù)據(jù)回顯！

注冊(cè)提示效果

寫一個(gè)Controller

@RequestMapping('/a3')public String ajax3(String name,String pwd){ String msg = ''; //模擬數(shù)據(jù)庫中存在數(shù)據(jù) if (name!=null){ if ('admin'.equals(name)){ msg = 'OK'; }else { msg = '用戶名輸入錯(cuò)誤'; } } if (pwd!=null){ if ('123456'.equals(pwd)){ msg = 'OK'; }else { msg = '密碼輸入有誤'; } } return msg; //由于@RestController注解，將msg轉(zhuǎn)成json格式返回}

前端頁面 login.jsp

<%@ page contentType='text/html;charset=UTF-8' language='java' %><html><head> <title>ajax</title> <script src='http://www.b3g6.com/bcjs/${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js'></script> <script> function a1(){ $.post({url:'${pageContext.request.contextPath}/a3',data:{’name’:$('#name').val()},success:function (data) { if (data.toString()==’OK’){ $('#userInfo').css('color','green'); }else { $('#userInfo').css('color','red'); } $('#userInfo').html(data);} }); } function a2(){ $.post({url:'${pageContext.request.contextPath}/a3',data:{’pwd’:$('#pwd').val()},success:function (data) { if (data.toString()==’OK’){ $('#pwdInfo').css('color','green'); }else { $('#pwdInfo').css('color','red'); } $('#pwdInfo').html(data);} }); } </script></head><body><p> 用戶名:<input type='text' onblur='a1()'/> <span id='userInfo'></span></p><p> 密碼:<input type='text' onblur='a2()'/> <span id='pwdInfo'></span></p></body></html>

【記得處理json亂碼問題】

獲取baidu接口Demo

<!DOCTYPE HTML><html><head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <title>JSONP百度搜索</title> <style> #q{ width: 500px; height: 30px; border:1px solid #ddd; line-height: 30px; display: block; margin: 0 auto; padding: 0 10px; font-size: 14px; } #ul{ width: 520px; list-style: none; margin: 0 auto; padding: 0; border:1px solid #ddd; margin-top: -1px; display: none; } #ul li{ line-height: 30px; padding: 0 10px; } #ul li:hover{ background-color: #f60; color: #fff; } </style> <script> // 2.步驟二 // 定義demo函數(shù) (分析接口、數(shù)據(jù)) function demo(data){ var Ul = document.getElementById(’ul’); var html = ’’; // 如果搜索數(shù)據(jù)存在把內(nèi)容添加進(jìn)去 if (data.s.length) {// 隱藏掉的ul顯示出來Ul.style.display = ’block’;// 搜索到的數(shù)據(jù)循環(huán)追加到li里for(var i = 0;i<data.s.length;i++){ html += ’<li>’+data.s[i]+’</li>’;}// 循環(huán)的li寫入ulUl.innerHTML = html; } } // 1.步驟一 window.onload = function(){ // 獲取輸入框和ul var Q = document.getElementById(’q’); var Ul = document.getElementById(’ul’); // 事件鼠標(biāo)抬起時(shí)候 Q.onkeyup = function(){// 如果輸入框不等于空if (this.value != ’’) { // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重點(diǎn)☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ // 創(chuàng)建標(biāo)簽 var script = document.createElement(’script’); //給定要跨域的地址賦值給src //這里是要請(qǐng)求的跨域的地址我寫的是百度搜索的跨域地址 script.src = ’https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=’+this.value+’&cb=demo’; // 將組合好的帶src的script標(biāo)簽追加到body里 document.body.appendChild(script);} } } </script></head><body><input type='text' /><ul id='ul'></ul></body></html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

Spring

上一條：Spring mvc攔截器實(shí)現(xiàn)原理解析下一條：Spring mvc JSON數(shù)據(jù)交換格式原理解析

相關(guān)文章：

1. idea刪除項(xiàng)目的操作方法2. IntelliJ IDEA配置Tomcat服務(wù)器的方法3. IntelliJ IDEA恢復(fù)刪除文件的方法4. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法5. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程6. docker鏡像完全卸載的操作步驟7. IntelliJ IDEA導(dǎo)入jar包的方法8. Docker 部署 Prometheus的安裝詳細(xì)教程9. idea導(dǎo)入maven項(xiàng)目的方法10. idea重置默認(rèn)配置的方法步驟

排行榜

					
					使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程
IntelliJ IDEA恢復(fù)刪除文件的方法
docker鏡像完全卸載的操作步驟
IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法
IntelliJ IDEA配置Tomcat服務(wù)器的方法
IntelliJ IDEA導(dǎo)入jar包的方法
idea刪除項(xiàng)目的操作方法
Docker 部署 Prometheus的安裝詳細(xì)教程
idea導(dǎo)入maven項(xiàng)目的方法
idea重置默認(rèn)配置的方法步驟
IntelliJ IDEA調(diào)整字體大小的方法
				