Servlet3.0與純javascript通過(guò)Ajax交互的實(shí)例詳解
對(duì)于很多人來(lái)說(shuō)應(yīng)該很簡(jiǎn)單。不過(guò)還是寫(xiě)寫(xiě)，方便Ajax學(xué)習(xí)的后來(lái)者。
雖然js.html是一個(gè)純靜態(tài)的頁(yè)面，但是以下的程序必須掛在Tomcat服務(wù)器上，才能做到Ajax交互，否則看不出效果的。
Eclipse for javaee注意把做好的工程掛在Tomcat上，才運(yùn)行Tomcat。
本工程除了JSP必須的Servlet包以外，無(wú)須引入其它東西。其實(shí)想直接用一個(gè)JSP頁(yè)面完成這個(gè)工程的，但是現(xiàn)在搞JSP的，基本上沒(méi)有人直接在.jsp文件中寫(xiě)東西了吧？后臺(tái)動(dòng)作都扔到.java里面了。
一、基本目標(biāo)
把前臺(tái)js.html輸入框輸入的東西，傳遞到后臺(tái)名稱為ajaxRequest，地址/ajaxRequest的Servlet.java。Servlet.java后臺(tái)再返回相應(yīng)的信息給前臺(tái)js.html，js.html不刷新無(wú)跳轉(zhuǎn)，即時(shí)響應(yīng)。
二、基本思想
由于是Servlet3.0，可以采用注解的方式寫(xiě)Servlet，web.xml不用寫(xiě)任何東西，直接讓Eclipse生成
里面只需留下如下內(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>
三、制作過(guò)程
1、首先寫(xiě)Servlet.java與js.html哪個(gè)都沒(méi)所謂，反正Ajax交互中，這兩個(gè)是一體的，不可以割裂。
先看js.html，HTML布局部分很簡(jiǎn)單，甚至表單都沒(méi)有，僅有兩個(gè)輸入框。
然后創(chuàng)建Ajax對(duì)象XMLHttpRequest的時(shí)候，注意不要使用XMLHttpRequest這個(gè)關(guān)鍵字，作為Ajax對(duì)象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對(duì)象，不同瀏覽器有不同的創(chuàng)建方法，其實(shí)本函數(shù)就是一個(gè)簡(jiǎn)單的new語(yǔ)句而已。
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就是用戶在輸入框的兩個(gè)參數(shù)
var param1=document.getElementById("param1").value;
var param2=document.getElementById("param2").value;
var XMLHttpRequest1 = createXMLHttpRequest();
//指明相應(yīng)頁(yè)面
var url = "./ajaxRequest";
XMLHttpRequest1.open("POST", url, true);
//這里沒(méi)法解釋，你所有JavaScript的請(qǐng)求頭都這樣寫(xiě)就對(duì)了，不會(huì)亂碼
XMLHttpRequest1.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//對(duì)于ajaxRequest，本js.html將會(huì)傳遞param1與param2給你。
XMLHttpRequest1.send("param1=" + param1 + "¶m2=" + param2);
//對(duì)于返回結(jié)果怎么處理的問(wèn)題
XMLHttpRequest1.onreadystatechange = function() {
//這個(gè)4代表已經(jīng)發(fā)送完畢之后
if (XMLHttpRequest1.readyState == 4) {
//200代表正確收到了返回結(jié)果
if (XMLHttpRequest1.status == 200) {
//彈出返回結(jié)果
alert(XMLHttpRequest1.responseText);
} else {
//如果不能正常接受結(jié)果，你肯定是斷網(wǎng)，或者我的服務(wù)器關(guān)掉了。
alert("網(wǎng)絡(luò)連接中斷！");
}
}
};
}
</script>
2、之后是Servlet.java，其實(shí)doGet與doPost都是在頁(yè)面上打印東西，但是采取了這種不同的形式。PrintStream是以前JDK的輸出流，PrintWriter貌似是JDK1.4之后的輸出流。不過(guò)這部分太簡(jiǎn)單了，輸入輸出流，都是Java的必修課吧？
js.html傳param1與param2給此Servlet.java之后，等待這個(gè)Servlet.java打印出相應(yīng)的東西，然后在前臺(tái)直接通過(guò)XMLHttpRequest1.responseText變量讀取出來(lái)。
package jsServletAjax;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
//說(shuō)明這個(gè)Servlet是沒(méi)有序列號(hào)的
@SuppressWarnings("serial")
//說(shuō)明這個(gè)Servlet的名稱是ajaxRequest，其地址是/ajaxRequest
//這與在web.xml中設(shè)置是一樣的
@WebServlet(name = "ajaxRequest", urlPatterns = { "/ajaxRequest" })
public class Servlet extends HttpServlet {
//放置用戶之間通過(guò)直接在瀏覽器輸入地址訪問(wèn)這個(gè)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("請(qǐng)正常打開(kāi)此頁(yè)");
}
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("前臺(tái)傳來(lái)了參數(shù)：param1="+param1+"，param2="+param2);
pw.flush();
pw.close();
}
}
四、總結(jié)
以上，采取了純粹的javascript完成Ajax。Servlet.java僅僅是傳遞了一個(gè)字符串給js.html而已！
其實(shí)可以利用jQuery使前臺(tái)的代碼變得更加簡(jiǎn)短的。
相關(guān)文章
lodash內(nèi)部方法getFuncName及setToString剖析詳解
本篇章我們主要是通過(guò)了解lodash里的兩個(gè)內(nèi)部方法getFuncName方法和setToString方法，在實(shí)際開(kāi)發(fā)中我們也可以借鑒方法的實(shí)現(xiàn)思路，在需要的時(shí)候簡(jiǎn)單封裝一下，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
JavaScript中Map與Object應(yīng)用場(chǎng)景
這篇文章主要為大家介紹了JavaScript中Map與Object應(yīng)用場(chǎng)景的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue框架通用化解決個(gè)性化文字換行問(wèn)題實(shí)例詳解
這篇文章主要為大家介紹了通用化解決個(gè)性化文字換行問(wèn)題實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Electron?網(wǎng)絡(luò)攔截實(shí)戰(zhàn)示例詳解
這篇文章主要為大家介紹了Electron?網(wǎng)絡(luò)攔截實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
微信小程序 數(shù)據(jù)綁定及運(yùn)算的簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 數(shù)據(jù)綁定的簡(jiǎn)單實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了微信小程序icon組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
fs-extra實(shí)現(xiàn)yarn?create?tlist創(chuàng)建示例詳解
這篇文章主要為大家介紹了fs-extra實(shí)現(xiàn)yarn?create?tlist創(chuàng)建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
requestAnimationFrame定時(shí)動(dòng)畫(huà)屏幕刷新率節(jié)流示例淺析
umi插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)頁(yè)面布局詳解