调用ajax_[WEB篇]-AJAX-02-AJAX应用案例
生活随笔
收集整理的這篇文章主要介紹了
调用ajax_[WEB篇]-AJAX-02-AJAX应用案例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Ajax
Ajax完整案例
案例1：Ajax的基本使用--測試服務(wù)器
代碼分析：
ajax.js：
/*** Ajax的工作原理：Ajax的核心即JavaScript與XMLHttpRequst* 該對象在瀏覽器中是一種支持異步請求的計數(shù)* Ajax是基于JavaScript的操作，數(shù)據(jù)通過js傳到服務(wù)器，需要考慮如下問題：* 1.如何把用戶請求的數(shù)據(jù)發(fā)送到服務(wù)器* 2.服務(wù)器接收到如何處理* 3.服務(wù)器處理完成后返回的數(shù)據(jù)格式是什么？* xml、json數(shù)據(jù) -- 客戶端如何解析這種數(shù)據(jù)格式* 4.如何把解析的數(shù)據(jù)通過JavaScript顯示到客戶端*/ /*** 利用Ajax完成與服務(wù)器進行交互的步驟 開發(fā)步驟： * a.創(chuàng)建XMLHttpRequest對象 * b.打開與服務(wù)器的鏈接 * c.發(fā)送數(shù)據(jù)* d.接收服務(wù)器的響應(yīng)數(shù)據(jù)*/function createXMLHttpRequest(){var XMLHttpReq;//針對不同的瀏覽器創(chuàng)建XMLHttpRequest對象if(window.XMLHttpRequest){ //火狐等瀏覽器XMLHttpReq =new XMLHttpRequest();}else if(window.ActiveXObject){//IE瀏覽器try{XMLHttpReq =new ActiveXObject("Msxml2.XMLHTTP");}catch(e){XMLHttpReq =new ActiveXObject("Microsoft.XMLHTTP");}}return XMLHttpReq; }// 在頁面加載的時候這個函數(shù)自動執(zhí)行 window.onload=function(){document.getElementById("test").onclick=function(){// 測試：alert("hello ajax...");// a.創(chuàng)建XMLHttpRequest對象var xmlReq=createXMLHttpRequest();// b.打開與服務(wù)器的鏈接/*** 參數(shù)1：請求方式* 參數(shù)2：請求路徑* 參數(shù)3：是否是同步的* xmlReq.open("GET","AjaxServlet",true);*/xmlReq.open("GET","AjaxServlet",true);// c.發(fā)送數(shù)據(jù)/*** 如果請求方式是get,則不需要向服務(wù)器傳遞數(shù)據(jù)：send(null)* 如果請求方式是post,則傳遞指定的數(shù)據(jù)send(data)*/xmlReq.send(null);// d.接收服務(wù)器的響應(yīng)數(shù)據(jù)/*** onreadystatechange是服務(wù)器觸發(fā),會通知客戶端當前服務(wù)的狀態(tài)* 0 -- 未初始化：還沒有調(diào)用open方法* 1 -- 正在加載：open方法已被調(diào)用，但send方法還沒被調(diào)用* 2 -- 已加載完畢：send方法已被調(diào)用，請求已開始處理* 3 -- 交互中：服務(wù)器正在發(fā)送響應(yīng)* 4 -- 完成：響應(yīng)發(fā)送完畢* status 判斷數(shù)據(jù)是否由服務(wù)器成功返回到客戶端 狀態(tài)碼分為如下情況: * 404 沒找到頁面(not found)* 403 禁止訪問(forbidden)* 500 內(nèi)部服務(wù)器出錯(internal service error)* 200 一切正常(ok)* 304 沒有被修改(not modified)(服務(wù)器返回304狀態(tài)，表示源文件沒有被修改 )* 在測試的時候如果始終無法出現(xiàn)預期的效果有可能是響應(yīng)的jsp文件放置位置有誤* 將其方在WebContent目錄下直接進行測試，無須多加一級目錄*/xmlReq.onreadystatechange=function(){if(xmlReq.readyState==4){//4 代表 響應(yīng)發(fā)送完畢 交互完成 if(xmlReq.status==200){//2000 代表數(shù)據(jù)由服務(wù)端 成功傳遞到客戶端//5.處理數(shù)據(jù) 客戶端返回的數(shù)據(jù) 是文本類型 可以使用responseText 獲取數(shù)據(jù)var textDoc =xmlReq.responseText;alert("服務(wù)器返回的數(shù)據(jù)是:"+textDoc);}}}} }AjaxServlet.java：
/*** AjaxServlet基本測試*/ @WebServlet("/AjaxServlet") public class AjaxServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8");PrintWriter pw = response.getWriter();pw.write("hello...");pw.write("ajax...");pw.write("test...");pw.flush();pw.close();}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);} }測試jsp：base.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>1.Ajax的基本使用</title> </head><script type="text/javascript" src="${pageContext.request.contextPath }/js/ajax.js"></script> <body><form action="" method="post"><input type="button" value="測試服務(wù)器" name="test" id="test"/></form> </body> </html>結(jié)果展示：
訪問資源http://localhost:8080/JavaWeb_Ajax/base.jsp，點擊“測試服務(wù)器”結(jié)果顯示如下內(nèi)容
案例2：郵箱注冊
代碼分析：模擬數(shù)據(jù)庫實現(xiàn)用戶數(shù)據(jù)的保存
User.java：
public class User {private String username;private String password;public User() {super();}public User(String username, String password) {super();this.username = username;this.password = password;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User [username=" + username + ", password=" + password + "]";} }DBUser.java：
public class DBUser {// 模擬數(shù)據(jù)庫保存User數(shù)據(jù)private static List<User> list = new ArrayList<>();static {list.add(new User("haha","haha"));list.add(new User("xixi","xixi"));list.add(new User("bibi","bibi"));}// 驗證用戶是否存在public static boolean checkUserName(String name) {boolean flag = false;for(int i=0;i<list.size();i++) {User user = list.get(i);if(user.getUsername().equals(name)) {flag=true;}}return flag;} }CheckUsernameServlet.java：
@WebServlet("/CheckUserNameServlet") public class CheckUserNameServlet extends HttpServlet {/*** 此處需要注意xml的書寫規(guī)范，如果出錯則打印數(shù)據(jù)進行分析* 查看是否是xml的編輯有誤*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/xml;charset=UTF-8");PrintWriter pw=response.getWriter();String username=request.getParameter("username");boolean flag =DBUser.checkUserName(username);//把結(jié)果拼接為xml 然后響應(yīng)到客戶端 StringBuilder sb =new StringBuilder();sb.append("<result>");sb.append("<res>");if(flag) {sb.append("1");}else {sb.append("0");}sb.append("</res>");sb.append("</result>");//<result><res>1</res></result>System.out.println(sb.toString());pw.println(sb.toString());pw.flush();pw.close();}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);} }測試jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ajax案例1：用戶名驗證</title> </head><script type="text/javascript">var XMLHttpReq;function createXMLHttpRequest() {//針對不同的瀏覽器創(chuàng)建XMLHttpRequest對象if (window.XMLHttpRequest) { //火狐等瀏覽器XMLHttpReq = new XMLHttpRequest();} else if (window.ActiveXObject) {//IE瀏覽器try {XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");}}}function back() {if (XMLHttpReq.readyState == 4) {if (XMLHttpReq.status == 200) {//得到服務(wù)器相應(yīng)的數(shù)據(jù) 是xml數(shù)據(jù)格式的類型var xmlDoc = XMLHttpReq.responseXML;var info = document.getElementById("info");var flag = xmlDoc.getElementsByTagName("res")[0].firstChild.nodeValue;if (flag == 1) {var error = "該郵箱已經(jīng)被注冊,請重新輸入..";info.innerHTML = error;} else {info.innerHTML = "恭喜你，此郵箱可以使用!!";}}}}function checkUserName() {var name = document.getElementById("username").value;// a.創(chuàng)建XMLHTTPRequest對象createXMLHttpRequest();// b.打開鏈接var url = "CheckUserNameServlet?username=" + name;XMLHttpReq.open("GET", url, true);// c.發(fā)送數(shù)據(jù)XMLHttpReq.send(null);// d.接收服務(wù)器的響應(yīng)數(shù)據(jù)XMLHttpReq.onreadystatechange = back;} </script> <body><form action="reg">用戶名: <input type="text" name="username" id="username" onblur="checkUserName()" /><span id="info"></span><br/>密碼:<input type="text" name="pwd"><br/><input type="submit" value="注冊"></form> </body> </html>結(jié)果展示：
訪問資源http://localhost:8080/JavaWeb_Ajax/reg.jsp，輸入數(shù)據(jù)分別進行測試，顯示結(jié)果如下所示
案例3：下拉列表的二級聯(lián)動
代碼分析：
LinkerServlet.java：
/*** 二級聯(lián)動測試*/ @WebServlet("/LinkerServlet") public class LinkerServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/xml;charset=UTF-8");;// 獲取用戶選擇的省份idString targetId = request.getParameter("id");String xml_start="<selects>";String xml_end="</selects>";String xml="";if(targetId.equals("0")) {xml = "<select><value>0</value><text>未選擇</text></select>";}else if(targetId.equals("1")) {xml = "<select><value>1</value><text>杭州市</text></select>";xml += "<select><value>2</value><text>溫州市</text></select>";xml += "<select><value>3</value><text>寧波市</text></select>";xml += "<select><value>4</value><text>嘉興市</text></select>";}else if(targetId.equals("2")) {xml = "<select><value>1</value><text>濟南市</text></select>";xml += "<select><value>2</value><text>青島市</text></select>";xml += "<select><value>3</value><text>濰坊市</text></select>";xml += "<select><value>4</value><text>濟寧市</text></select>";}else if(targetId.equals("3")) {xml = "<select><value>1</value><text>南京市</text></select>";xml += "<select><value>2</value><text>蘇州市</text></select>";xml += "<select><value>3</value><text>南通市</text></select>";xml += "<select><value>4</value><text>常州市</text></select>";}else if(targetId.equals("4")) {xml = "<select><value>1</value><text>廈門市</text></select>";xml += "<select><value>2</value><text>福州市</text></select>";xml += "<select><value>3</value><text>龍巖市</text></select>";xml += "<select><value>4</value><text>福安市</text></select>";}else if(targetId.equals("5")) {xml = "<select><value>1</value><text>蘭州市</text></select>";xml += "<select><value>2</value><text>敦煌市</text></select>";xml += "<select><value>3</value><text>定西市</text></select>";xml += "<select><value>4</value><text>白銀市</text></select>";}else if(targetId.equals("6")) {xml = "<select><value>1</value><text>廣州市</text></select>";xml += "<select><value>2</value><text>潮陽市</text></select>";xml += "<select><value>3</value><text>珠海市</text></select>";xml += "<select><value>4</value><text>澄海市</text></select>";}String res = xml_start+xml+xml_end;response.getWriter().write(res);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);} }測試jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ajax案例1：用戶名驗證</title> </head> <script type="text/javascript"> var XMLHttpReq;function createXMLHttpRequest() {//針對不同的瀏覽器創(chuàng)建XMLHttpRequest對象if (window.XMLHttpRequest) { //火狐等瀏覽器XMLHttpReq = new XMLHttpRequest();} else if (window.ActiveXObject) {//IE瀏覽器try {XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");}}}function back() {if (XMLHttpReq.readyState == 4) {if (XMLHttpReq.status == 200) {//得到服務(wù)器相應(yīng)的數(shù)據(jù) 是xml數(shù)據(jù)格式的類型var xmlDoc = XMLHttpReq.responseXML;var info = document.getElementById("info");var flag = xmlDoc.getElementsByTagName("res")[0].firstChild.nodeValue;if (flag == 1) {var error = "該郵箱已經(jīng)被注冊,請重新輸入..";info.innerHTML = error;} else {info.innerHTML = "恭喜你，此郵箱可以使用!!";}}}}function checkUserName() {var name = document.getElementById("username").value;// a.創(chuàng)建XMLHTTPRequest對象createXMLHttpRequest();// b.打開鏈接var url = "CheckUserNameServlet?username=" + name;XMLHttpReq.open("GET", url, true);// c.發(fā)送數(shù)據(jù)XMLHttpReq.send(null);// d.接收服務(wù)器的響應(yīng)數(shù)據(jù)XMLHttpReq.onreadystatechange = back;} </script> <body><form action="reg">用戶名: <input type="text" name="username" id="username" onblur="checkUserName()" /><span id="info"></span><br/>密碼:<input type="text" name="pwd"><br/><input type="submit" value="注冊"></form> </body> </html>結(jié)果展示：
訪問資源http://localhost:8080/JavaWeb_Ajax/linker.jsp，結(jié)果顯示如下
PS：此處需要注意的一點是，此處所有的測試jsp文件均是直接放置在WebContent的當前一級的目錄下，如果是放置在其他的文件夾內(nèi)有可能導致測試時失效，在測試的時候需要注意這一點
其余案例分析
a.分頁
1.刷新分頁：每次獲得頁面信息 需要刷新當前的頁面信息
2.無刷新分頁：使用ajax實現(xiàn)
mysql: select * from table limit begin,個數(shù)
oracle：select * from (select a.*,rownum rn from books a) where rn between begin and end;
rownum說明：
rownum是個偽列，是隨著結(jié)果集生成的，返回的第一行分配的是1，第二行是2等等，生成的結(jié)果是依次遞加的，沒有1就不會有2。
注意，不返回的就不算，第一條返回的結(jié)果的rownum為1。
b.圖文驗證碼
LogIn.jsp
<body><form action="" method="get">用戶名：<input type="text" name="name"><br /> 密碼：<inputtype="password" name="pass"><br /> 驗證碼：<input type="text"name="picture"> <imgsrc="${pageContext.request.contextPath }/imgServlet"onclick="change();" id="imge"></form> </body> <script type="text/javascript">function change() {var time = new Date().toString();var imge = document.getElementById("imge");imge.src = "/web2/imgServlet?time=" + time;} </script>imgServlet：
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//構(gòu)建一個數(shù)組char[] chars = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9","A", "B", "C", "D", "E", "F", "G", "H", "I","J", "K", "L", "M", "N", "O", "P", "Q", "R","S", "T", "U", "V", "W", "X", "Y", "Z" };//設(shè)置響應(yīng)的類型response.setContentType("image/jpeg");BufferedImage image = new BufferedImage(100 , 25, BufferedImage.TYPE_INT_RGB);//獲得一個畫筆Graphics graphics = image.getGraphics();graphics.setColor(Color.blue);//設(shè)置畫筆的顏色//畫一個長方形graphics.fillRect(0, 0, 100, 25);Random ran = new Random();StringBuffer sbf = new StringBuffer();for(int i = 0;i<4;i++){int index = ran.nextInt(chars..length);sbf.append(chars[index]);}//重新設(shè)置畫筆的顏色graphics.setColor(Color.red);graphics.setFont(new Font("微軟雅黑", Font.ITALIC, 20));graphics.drawString(sbf.toString(), 10, 18);//將圖片輸出OutputStream out = response.getOutputStream();ImageIO.write(image, "jpeg", out);}圖文驗證碼如何進行存儲呢？-- 使用session對象進行存儲
c.文件上傳
Upload.jsp：
<!-- 表單的提交方式必須為post方式 類型必須為：multipart/form-data -->
<form action="" method="post" enctype="multipart/form-data">用戶名：<input type="text" name="name"><br /><br /> 文件：<input type="file" name="file"><br /><br /> <input type="submit" value="提交"></form>UploadServlet:
// 創(chuàng)建存儲文件的路徑String path = this.getServletContext().getRealPath("/upload");File upload = new File(path);if (!upload.exists()) {// 如果不存在此目錄，則創(chuàng)建出來upload.mkdirs();}// 創(chuàng)建一個文件處理工廠，創(chuàng)建FileItem對象FileItemFactory sif = new DiskFileItemFactory();// 創(chuàng)建解析器 ，將request中的內(nèi)容存放在FileItem中ServletFileUpload sfu = new ServletFileUpload(sif);// 設(shè)置編碼方式sfu.setHeaderEncoding("UTF-8");//設(shè)置上傳文件的大小//sfu.setFileSizeMax(1024*1024*1024*4);try {// 進行解析List<FileItem> list = sfu.parseRequest(request);for (FileItem fileItem : list) {//判斷提交的是否 不是一個文件boolean isFile = fileItem.isFormField();//獲得表單域中name屬性的值String name = fileItem.getFieldName();//獲得表單域中value屬性的值String value = fileItem.getString("UTF-8");//獲得文件的名字String fileName = fileItem.getName();if(!isFile){//如果是一個文件File file = new File(path+"/"+fileName);fileItem.write(file);//將文件的內(nèi)容寫進去}//刪除臨時目錄文件fileItem.delete();}} catch (Exception e) {e.printStackTrace();}d.文件下載
//獲得下載的文件的名字String fileName = request.getParameter("fileName");//如果是中文需要進行設(shè)置fileName = new String(fileName.getBytes("ISO8859-1"),"UTF-8");//設(shè)置響應(yīng)的頭部response.addHeader("Content-Disposition", "inline;filename="+fileName);//獲得文件的輸入流以及輸出流String path = getServletContext().getRealPath("/upload")+"/"+fileName;InputStream in = new FileInputStream(path);//獲得輸出流OutputStream out = response.getOutputStream();byte[] buffer = new byte[1024];int hasRead = 0;while(-1!=(hasRead = in.read(buffer))){out.write(buffer, 0, hasRead);}out.flush();Content-Disposition設(shè)置：
Content-Disposition的值有兩個，分別是：”inline”、”attachment”
當為“inline”時，為在線打開，不進行保存。
當“attachment”時，為進行文件保存。
e.三級聯(lián)動：ajax+json
1. HTML代碼
<select id="pro" name="province" onchange="getRegion('city');"><option>選擇省</option></select><select id="city" onchange="getRegion('county');"><option>選擇市</option></select><select id="county" ><option>選擇縣</option></select>2. JAVASCRIPT代碼
function getRegion(type){var id ;if(type=="pro"){id=1;}else if(type=="city"){id=document.getElementById("pro").value;}else if(type=="county"){id=document.getElementById("city").value;}request = getXMLHttpRequest();request.open("GET","getSelect?id="+id);request.onreadystatechange=_handleSelect(type);request.send();}function _handleSelect(type){return function(){if(request.readyState==4){if(request.status==200){var xmlObj = request.responseXML;var regions = xmlObj.getElementsByTagName("region");var region = document.getElementById(type);region.length=1;for(var i=0;i<regions.length;i++){var id=regions[i].firstChild.innerHTML;var name=regions[i].lastChild.innerHTML;createSelect(region,id,name);}}}}}function createSelect(region,id,name){var option = new Option(name,id);region[region.length]=option;3.SERVLET代碼
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/xml;charset-8");String id = request.getParameter("id");RegionDao regionDao = new RegionDao();List<Region> list = regionDao.getRegionByParentId(Integer.parseInt(id));Document doc = listToDocument(list);XMLWriter out = new XMLWriter(response.getOutputStream());out.write(doc);out.flush();out.close();}private Document listToDocument(List<Region> list){Document document = DocumentHelper.createDocument();Element regions = document.addElement("regions");for(Region r : list){Element region = regions.addElement("region");region.addElement("id").setText(r.getId()+"");region.addElement("name").setText(r.getRegionName());}return document;}總結(jié)
以上是生活随笔為你收集整理的调用ajax_[WEB篇]-AJAX-02-AJAX应用案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： A股智能交通龙头股 全是让机构非常看好的
- 下一篇： android 关闭多点触控_Cocos