1.ajax入門案例
1.1 搭建Web環(huán)境
ajax對于各位來說，應(yīng)該都不陌生，正因?yàn)閍jax的產(chǎn)生，導(dǎo)致前臺頁面和服務(wù)器之間的數(shù)據(jù)傳輸變得非常容易，同時(shí)還可以實(shí)現(xiàn)頁面的局部刷新。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
對于JavaWeb項(xiàng)目而言，ajax主要用于瀏覽器和服務(wù)器之間數(shù)據(jù)的傳輸。
如果是單單地堆砌知識點(diǎn)，會顯得比較無聊，那么根據(jù)慣例，我先不繼續(xù)介紹ajax，而是來寫一個(gè)案例吧。
打開eclipse，新建一個(gè)web項(xiàng)目。
如果對JavaWeb項(xiàng)目還不太清楚的，可以去參考我之前的文章。我
目錄結(jié)構(gòu)：
<?xml version="1.0" encoding="UTF-8"?><web-app></web-app>
這樣就好了，web項(xiàng)目搭建完畢。
暫時(shí)不要往下寫，先確保我們到目前為止的工作是沒問題的。
驗(yàn)證方法就是在WebContent目錄下，新建一個(gè)空的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>Insert title here</title></head><body style="padding:100px"><h1>Hello World</h1></body></html>
啟動tomcat，把這個(gè)項(xiàng)目跑起來。
沒報(bào)錯(cuò)。
打開瀏覽器，輸入訪問地址，我這里的tomcat端口號是80 ,默認(rèn)可以不寫。
http://localhost/ajax/index.jsp
來了，沒問題。
好的，這說明我們的web項(xiàng)目搭建沒有問題。
1.2 編寫服務(wù)器程序Servlet
個(gè)人感悟，精粹整理
web環(huán)境已經(jīng)搭好，接下來，讓我們來編寫一個(gè)簡單的Servlet程序，tomcat是一個(gè)服務(wù)器，現(xiàn)在它里面有一個(gè)名字叫做ajax的web項(xiàng)目，那么這些Servlet就好比是web項(xiàng)目里面的一個(gè)個(gè)小功能。
你的電腦里面有QQ，Word，殺毒軟件等程序。一個(gè)web項(xiàng)目，也就是一個(gè)應(yīng)用程序。本質(zhì)上和你電腦上的QQ概念是一樣一樣的。
你打開QQ，可以聊天，語音，視頻。這些小功能，類比到JavaWeb項(xiàng)目，就是一個(gè)個(gè)Servlet。
很多人都知道框架，比如大名鼎鼎的SpringMVC，里面有一個(gè)個(gè)的Controller，其實(shí)這些Controller到底是什么玩意，不要怕，他們其實(shí)就是對Servlet做了一個(gè)封裝，本質(zhì)上還是一樣一樣的。
我們寫一個(gè)Servlet，都需要去web.xml里面注冊一下，否則就用不了。你安裝一個(gè)QQ，注冊表里面是不是肯定也需要注冊一下啊，這不還是一樣一樣的嗎？
好了，閑話不多說。我們來寫一個(gè)小功能，也就是一個(gè)Servlet。
繼承HttpServlet，同時(shí)改寫doGet方法
import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class MyServlet extends HttpServlet{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("111");}}里面我們先什么也不寫。
接下來，我們要在web.xml里面把這個(gè)Servlet注冊一下。
<?xml version="1.0" encoding="UTF-8"?><web-app><servlet><!-- 這里是servlet的名字 --><servlet-name>MyServlet</servlet-name><servlet-class>MyServlet</servlet-class><!-- 這里寫servlet類在的包路徑 --></servlet><servlet-mapping><!-- 這里是地址映射 --><servlet-name>MyServlet</servlet-name><!-- 這里寫servlet映射地址 --><url-pattern>/MyServlet</url-pattern></servlet-mapping></web-app>
OK，Servlet注冊完畢，我們先來訪問一下這個(gè)功能。
重啟tomcat。
訪問：http://localhost/ajax/MyServlet
1.3 前臺頁面設(shè)計(jì)
服務(wù)器小程序已經(jīng)差不多了，現(xiàn)在我們?yōu)榱撕头?wù)器進(jìn)行交互，就需要編寫前臺頁面。這個(gè)頁面也就是給用戶看的。換言之，用戶只能通過前臺頁面來訪問我們的Servlet。
我們來寫一個(gè)小案例，在頁面上發(fā)送一句話到服務(wù)器，然后服務(wù)器給出一個(gè)回應(yīng)就行了。
就是這么一個(gè)簡單的案例，主要用來熟悉一下流程。
為了簡單起見，我就不自己調(diào)css樣式了，直接用bootstrap吧。
引入bootstrap的核心css文件。?
?
然后，修改index.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"><link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css"><title>Insert title here</title><style type="text/css">.container {margin-top:100px;}</style><script>window.onload = function(){var btn = document.getElementById("submit");btn.onclick = function(){alert();}};</script></head><body><div class="container"><div class="row"><div class="col-lg-8"><div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button id="submit" class="btn btn-default" type="button">提交</button></span></div></div></div></div></body></html>頁面效果：
1.4 基于get方式的數(shù)據(jù)請求
當(dāng)我們點(diǎn)擊提交按鈕，就alert（）一下，如果成功的話，那么說明點(diǎn)擊事件沒有問題。然后，繼續(xù)往下寫代碼。
如果是以往，我們都是通過form表單來進(jìn)行提交的，可是這樣的話，就會有一個(gè)問題，就是頁面會刷新，而且代碼也相對比較難懂。
自從ajax出來了之后，這種情況得到了巨大的改善，局部刷新技術(shù)在當(dāng)時(shí)來看，還是非常不錯(cuò)的。
我先把實(shí)現(xiàn)代碼給出：
btn.onclick = function(){var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");xhr.open("get","MyServlet?message="+document.getElementsByTagName("input")[0].value,true);xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4 && xhr.status==200){alert(xhr.responseText);}};}同時(shí)修改一下MyServlet
@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String msg = req.getParameter("message");System.out.println(msg);}重啟 tomcat ，訪問index.jsp頁面。
現(xiàn)在的瀏覽器一般都有調(diào)試功能，按一下F12，調(diào)試界面就出來了。然后，找到一個(gè)network，以谷歌瀏覽器為例
network視圖會把所有的數(shù)據(jù)交互顯示出來，包括引入的 js ， css文件，還有各種請求和回應(yīng)，都會在這里顯示出來。
比如，現(xiàn)在我刷新一下頁面
我這么一刷新，首先服務(wù)器接收到的是這么一個(gè) URL： http://localhost/ajax/index.jsp
這就是一個(gè)請求，服務(wù)器收到這個(gè)請求后，返回給我 index.jsp頁面和bootstrap.min.css這個(gè)文件。
因?yàn)槲以趇ndex.jsp的確引入過bootstrap.min.css，所以他也就一起加載進(jìn)來了。
現(xiàn)在，我輸入一句話，點(diǎn)擊提交，看看會發(fā)生什么？
我們把input框里面的內(nèi)容提交到服務(wù)器程序 MyServlet
控制臺已經(jīng)接受到了，這里比較幸運(yùn)，沒有遇到中文亂碼的問題，那么先不管亂碼了。
因?yàn)镸yServlet中沒有返回什么東西，所以alert出來的是空。
好的，那我們給瀏覽器也返回一句話吧。
@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String msg = req.getParameter("message");System.out.println(msg);resp.setContentType("text/html;charset=utf-8");PrintWriter out=resp.getWriter();out.println("你好，這是服務(wù)器返回的信息！");out.flush();out.close();}再次點(diǎn)擊提交按鈕
OK了。
?接下來，看一下請求的具體信息
在比對一下js代碼，就一目了然了。
btn.onclick = function(){var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");xhr.open("get","MyServlet?message="+document.getElementsByTagName("input")[0].value,true);xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4 && xhr.status==200){alert(xhr.responseText);}};}readyState:
0: 請求未初始化
1: 服務(wù)器連接已建立，還沒發(fā)送
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應(yīng)已就緒
當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒.
請求方式是get，并且只有當(dāng)返回的狀態(tài)碼為200的時(shí)候，才會打印出responseText，這個(gè)就是對應(yīng)的
?out.println("你好，這是服務(wù)器返回的信息！");
這句話。
1.5 基于post方式的數(shù)據(jù)請求
get方法會在URL地址欄里顯示你提交所帶的值，post方法不會。所以，相對來說，post方法比較安全。
post方法在流程上和get方式差不多，我就直接上代碼了:
window.onload = function(){var btn = document.getElementById("submit");btn.onclick = function(){var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");xhr.open("post","MyServlet",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");var postData = {message : document.getElementsByTagName("input")[0].value};var postDataStr = (function(obj){ // 轉(zhuǎn)成post需要的字符串.var str = "";for(var prop in obj){str += prop + "=" + obj[prop] + "&"}return str;})(postData);alert(postDataStr);xhr.send(postDataStr);xhr.onreadystatechange = function(){if(xhr.readyState==4 && xhr.status==200){alert(xhr.responseText);}};}};MyServlet.java
import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class MyServlet extends HttpServlet{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("UTF-8");String msg = req.getParameter("message");System.out.println(msg);resp.setContentType("text/html;charset=utf-8");PrintWriter out=resp.getWriter();out.println("你好，這是服務(wù)器返回的信息！");out.flush();out.close();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}}以上所述是小編給大家介紹的JavaScript中淺講ajax圖文詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
