2. <dfn id="wks9a"><sup id="wks9a"></sup></dfn>
      ?\n???\n???\n??Go!<\/button>?\n<\/body>?\n<\/html>?\n
	







      国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
      
	

      
    

      

	
	
      
		
      
			
      
							
      
					
      
						首頁
						
												web前端
						
												js教程
						
						Servlet3.0+JS進行Ajax交互
					
      
					
					
      
						
      
							
      Servlet3.0+JS進行Ajax交互
      
							
							Jun 15, 2018 pm	 03:21 PM
														
						
      
					
      
					
      
					
      
						
      
						
						
						

					
      這次帶給大家Servlet3.0 JS進行Ajax交互，Servlet3.0 JS進行Ajax交互的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。 
      

      雖然js.html是一個純靜態(tài)的頁面，但是以下的程式必須掛在Tomcat伺服器上，才能做到Ajax交互，否則看不出效果的。 
      

      Eclipse for javaee注意把做好的工程掛在Tomcat上，才執(zhí)行Tomcat。 
      

      本工程除了JSP必須的Servlet套件以外，無須引進其它東西。其實想直接用一??個JSP頁面完成這個工程的，但是現(xiàn)在搞JSP的，基本上沒有人直接在.jsp檔案中寫東西了吧？後臺動作都丟到.java裡面了。 
      

      一、基本目標
      

      把前臺js.html輸入框輸入的東西，傳遞到後臺名稱為ajaxRequest，位址/ajaxRequest的Servlet.java。 Servlet.java後臺再回傳對應的資訊給前臺js.html，js.html不刷新無跳轉(zhuǎn)，即時回應。 
      

      二、基本想法
      

      由於是Servlet3.0，可以用註解的方式寫Servlet，web.xml不用寫任何東西，直接讓Eclipse產(chǎn)生
      

      裡面只需留下如下內(nèi)容：
      

      <?xml version="1.0" encoding="UTF-8"?>?
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://java.sun.com/xml/ns/javaee" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
  version="3.0">?
</web-app>
      

      #三、製作過程
      ##1、首先寫Servlet.java與js.html哪一個都沒所謂，反正Ajax互動中，這兩個是一體的，不可以割裂。 
      先看js.html，HTML佈局部分很簡單，連表單都沒有，只有兩個輸入框。 
      然後建立Ajax物件XMLHttpRequest的時候，注意不要使用XMLHttpRequest這個關鍵字，作為Ajax物件XMLHttpRequest的命名，否則有些瀏覽器處理不了。 
      

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
<html xmlns="http://www.w3.org/1999/xhtml">?
<head>?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />?
<title>Js</title>?
</head>?
?
<body>?
??<input type="text" id="param1" />?
??<input type="text" id="param2" />?
??<button onclick="ajax()">Go!</button>?
</body>?
</html>?
<script>?
??//創(chuàng)建Ajax對象，不同瀏覽器有不同的創(chuàng)建方法，其實本函數(shù)就是一個簡單的new語句而已。??
??function?createXMLHttpRequest()?{?
????var?XMLHttpRequest1;?
????if?(window.XMLHttpRequest)?{?
??????XMLHttpRequest1?=?new?XMLHttpRequest();?
????}?else?if?(window.ActiveXObject)?{?
??????try?{?
????????XMLHttpRequest1?=?new?ActiveXObject("Msxml2.XMLHTTP");?
??????}?catch?(e)?{?
????????XMLHttpRequest1?=?new?ActiveXObject("Microsoft.XMLHTTP");?
??????}?
????}?
????return?XMLHttpRequest1;?
??}?
??function?ajax()?{?
????//param1與param2就是用戶在輸入框的兩個參數(shù)?
????var?param1=document.getElementById("param1").value;?
????var?param2=document.getElementById("param2").value;?
????var?XMLHttpRequest1?=?createXMLHttpRequest();?
????//指明相應頁面??
????var?url?=?"./ajaxRequest";?
????XMLHttpRequest1.open("POST",?url,?true);?
????//這里沒法解釋，你所有JavaScript的請求頭都這樣寫就對了，不會亂碼??
????XMLHttpRequest1.setRequestHeader("Content-Type",?
????????"application/x-www-form-urlencoded");?
????//對于ajaxRequest，本js.html將會傳遞param1與param2給你。??
????XMLHttpRequest1.send("param1="?+?param1?+?"?m2="?+?param2);?
????//對于返回結(jié)果怎么處理的問題??
????XMLHttpRequest1.onreadystatechange?=?function()?{?
??????//這個4代表已經(jīng)發(fā)送完畢之后??
??????if?(XMLHttpRequest1.readyState?==?4)?{?
????????//200代表正確收到了返回結(jié)果??
????????if?(XMLHttpRequest1.status?==?200)?{?
??????????//彈出返回結(jié)果??
??????????alert(XMLHttpRequest1.responseText);?
????????}?else?{?
??????????//如果不能正常接受結(jié)果，你肯定是斷網(wǎng)，或者我的服務器關掉了。??
??????????alert("網(wǎng)絡連接中斷！");?
????????}?
??????}?
????};?
??}?
</script>
      2、之後是Servlet.java，其實doGet與doPost都是在頁面上列印東西，但採取了這種不同的形式。 PrintStream是以前JDK的輸出流，PrintWriter貌似是JDK1.4之後的輸出流。不過這部分太簡單了，輸入輸出流，都是Java的必修課吧？ 
      js.html傳param1與param2給此Servlet.java之後，等待這個Servlet.java列印出對應的東西，然後在前臺直接透過XMLHttpRequest1.responseText變數(shù)讀取出來。 
      

      package?jsServletAjax;?
import?java.io.*;??
import?javax.servlet.*;??
import?javax.servlet.http.*;??
import?javax.servlet.annotation.*;??
??
//說明這個Servlet是沒有序列號的??
@SuppressWarnings("serial")??
//說明這個Servlet的名稱是ajaxRequest，其地址是/ajaxRequest?
//這與在web.xml中設置是一樣的??
@WebServlet(name?=?"ajaxRequest",?urlPatterns?=?{?"/ajaxRequest"?})??
public?class?Servlet?extends?HttpServlet?{??
??//放置用戶之間通過直接在瀏覽器輸入地址訪問這個servlet??
??protected?void?doGet(HttpServletRequest?request,??
??????HttpServletResponse?response)?throws?ServletException,?IOException?{??
????PrintStream?out?=?new?PrintStream(response.getOutputStream());??
????response.setContentType("text/html;charSet=utf-8");??
????out.print("請正常打開此頁");?
??}??
??
??protected?void?doPost(HttpServletRequest?request,??
??????HttpServletResponse?response)?throws?ServletException,?IOException?{?
????response.setContentType("text/html;?charset=utf-8");?
????PrintWriter?pw?=?response.getWriter();?
????request.setCharacterEncoding("utf-8");?
????String?param1=request.getParameter("param1");?
????String?param2=request.getParameter("param2");?????
????pw.print("前臺傳來了參數(shù)：param1="+param1+"，param2="+param2);?
????pw.flush();?
????pw.close();?
??}??
}
      我相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！ 
      推薦閱讀：
      

      使用vue實作樹狀功能表列功能
      

      preload()函數(shù)與圖片上傳使用
      以上是Servlet3.0+JS進行Ajax交互的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！
      


						
      
					
      
					
      
						
      本網(wǎng)站聲明
      
						
      本文內(nèi)容由網(wǎng)友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發(fā)現(xiàn)涉嫌抄襲或侵權的內(nèi)容，請聯(lián)絡admin@php.cn
      
					
      
				
      

				



				
      


				
    


					


											
      
							
      
								
      
									
									
      熱AI工具
      
								
      
								
      
																		
      
											
												Undress AI Tool
											
											
      
												
													
      Undress AI Tool
      
												      
												
      免費脫衣圖片
      
											
      
										
      
																		
      
											
												Undresser.AI Undress
											
											
      
												
													
      Undresser.AI Undress
      
												      
												
      人工智慧驅(qū)動的應用程序，用於創(chuàng)建逼真的裸體照片
      
											
      
										
      
																		
      
											
												AI Clothes Remover
											
											
      
												
													
      AI Clothes Remover
      
												      
												
      用於從照片中去除衣服的線上人工智慧工具。
      
											
      
										
      
																		
      
											
												Clothoff.io
											
											
      
												
													
      Clothoff.io
      
												      
												
      AI脫衣器
      
											
      
										
      
																		
      
											
												Video Face Swap
											
											
      
												
													
      Video Face Swap
      
												      
												
      使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
      
											
      
										
      
																
      
								
							
      
						
      
					


					


											
      
							
      
								
      
									
									
      熱工具
      
								
      
								
      
																		
      
											
												記事本++7.3.1
											
											
      
												
													
      記事本++7.3.1
      
												      
												
      好用且免費的程式碼編輯器
      
											
      
										
      
																			
      
											
												SublimeText3漢化版
											
											
      
												
													
      SublimeText3漢化版
      
												      
												
      中文版，非常好用
      
											
      
										
      
																			
      
											
												禪工作室 13.0.1
											
											
      
												
													
      禪工作室 13.0.1
      
												      
												
      強大的PHP整合開發(fā)環(huán)境
      
											
      
										
      
																			
      
											
												Dreamweaver CS6
											
											
      
												
													
      Dreamweaver CS6
      
												      
												
      視覺化網(wǎng)頁開發(fā)工具
      
											
      
										
      
																			
      
											
												SublimeText3 Mac版
											
											
      
												
													
      SublimeText3 Mac版
      
												      
												
      神級程式碼編輯軟體(SublimeText3)
      
											
      
										
      
																	
      
								
							
      
						
      
										

					
					
				
      
			
      
							
      
					
      
						
						
      

													
      
								
									Java vs. JavaScript：清除混亂
								
								Java vs. JavaScript：清除混亂
								Jun 20, 2025 am	 12:27 AM
								
      Java和JavaScript是不同的編程語言，各自適用於不同的應用場景。 Java用於大型企業(yè)和移動應用開發(fā)，而JavaScript主要用於網(wǎng)頁開發(fā)。
      
							
      
														
      
								
									JavaScript評論：簡短說明
								
								JavaScript評論：簡短說明
								Jun 19, 2025 am	 12:40 AM
								
      JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）
      
							
      
														
      
								
									如何在JS中與日期和時間合作？
								
								如何在JS中與日期和時間合作？
								Jul 01, 2025 am	 01:27 AM
								
      JavaScript中的日期和時間處理需注意以下幾點：1.創(chuàng)建Date對像有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設置時間信息可用get和set方法，注意月份從0開始；3.手動格式化日期需拼接字符串，也可使用第三方庫；4.處理時區(qū)問題建議使用支持時區(qū)的庫，如Luxon。掌握這些要點能有效避免常見錯誤。
      
							
      
														
      
								
									為什麼要將標籤放在的底部？
								
								為什麼要將標籤放在的底部？
								Jul 02, 2025 am	 01:22 AM
								
      PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
      
							
      
														
      
								
									JavaScript與Java：開發(fā)人員的全面比較
								
								JavaScript與Java：開發(fā)人員的全面比較
								Jun 20, 2025 am	 12:21 AM
								
      JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
      
							
      
														
      
								
									JavaScript：探索用於高效編碼的數(shù)據(jù)類型
								
								JavaScript：探索用於高效編碼的數(shù)據(jù)類型
								Jun 20, 2025 am	 12:46 AM
								
      javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
      
							
      
														
      
								
									什麼是在DOM中冒泡和捕獲的事件？
								
								什麼是在DOM中冒泡和捕獲的事件？
								Jul 02, 2025 am	 01:19 AM
								
      事件捕獲和冒泡是DOM中事件傳播的兩個階段，捕獲是從頂層向下到目標元素，冒泡是從目標元素向上傳播到頂層。 1.事件捕獲通過addEventListener的useCapture參數(shù)設為true實現(xiàn)；2.事件冒泡是默認行為，useCapture設為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委託，提高動態(tài)內(nèi)容處理效率；5.捕獲可用於提前攔截事件，如日誌記錄或錯誤處理。了解這兩個階段有助於精確控制JavaScript響應用戶操作的時機和方式。
      
							
      
														
      
								
									Java和JavaScript有什麼區(qū)別？
								
								Java和JavaScript有什麼區(qū)別？
								Jun 17, 2025 am	 09:17 AM
								
      Java和JavaScript是不同的編程語言。 1.Java是靜態(tài)類型、編譯型語言，適用於企業(yè)應用和大型系統(tǒng)。 2.JavaScript是動態(tài)類型、解釋型語言，主要用於網(wǎng)頁交互和前端開發(fā)。
      
							
      
													
      

													
								See all articles