JavaScript中淺講ajax圖文詳解
1.ajax入門案例
1.1 搭建Web環(huán)境
ajax對于各位來說，應(yīng)該都不陌生，正因?yàn)閍jax的產(chǎn)生，導(dǎo)致前臺頁面和服務(wù)器之間的數(shù)據(jù)傳輸變得非常容易，同時還可以實(shí)現(xiàn)頁面的局部刷新。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
對于JavaWeb項(xiàng)目而言，ajax主要用于瀏覽器和服務(wù)器之間數(shù)據(jù)的傳輸。
如果是單單地堆砌知識點(diǎn)，會顯得比較無聊，那么根據(jù)慣例，我先不繼續(xù)介紹ajax，而是來寫一個案例吧。
打開eclipse，新建一個web項(xiàng)目。
如果對JavaWeb項(xiàng)目還不太清楚的，可以去參考我之前的文章。我
目錄結(jié)構(gòu)：
<?xml version="1.0" encoding="UTF-8"?> <web-app> </web-app>
這樣就好了，web項(xiàng)目搭建完畢。
暫時不要往下寫，先確保我們到目前為止的工作是沒問題的。
驗(yàn)證方法就是在WebContent目錄下，新建一個空的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，把這個項(xiàng)目跑起來。
沒報(bào)錯。
打開瀏覽器，輸入訪問地址，我這里的tomcat端口號是80 ,默認(rèn)可以不寫。
http://localhost/ajax/index.jsp
來了，沒問題。
好的，這說明我們的web項(xiàng)目搭建沒有問題。
1.2 編寫服務(wù)器程序Servlet
個人感悟，精粹整理
web環(huán)境已經(jīng)搭好，接下來，讓我們來編寫一個簡單的Servlet程序，tomcat是一個服務(wù)器，現(xiàn)在它里面有一個名字叫做ajax的web項(xiàng)目，那么這些Servlet就好比是web項(xiàng)目里面的一個個小功能。
你的電腦里面有QQ，Word，殺毒軟件等程序。一個web項(xiàng)目，也就是一個應(yīng)用程序。本質(zhì)上和你電腦上的QQ概念是一樣一樣的。
你打開QQ，可以聊天，語音，視頻。這些小功能，類比到JavaWeb項(xiàng)目，就是一個個Servlet。
很多人都知道框架，比如大名鼎鼎的SpringMVC，里面有一個個的Controller，其實(shí)這些Controller到底是什么玩意，不要怕，他們其實(shí)就是對Servlet做了一個封裝，本質(zhì)上還是一樣一樣的。
我們寫一個Servlet，都需要去web.xml里面注冊一下，否則就用不了。你安裝一個QQ，注冊表里面是不是肯定也需要注冊一下啊，這不還是一樣一樣的嗎？
好了，閑話不多說。我們來寫一個小功能，也就是一個Servlet。
繼承HttpServlet，同時改寫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{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("111");
}
}
里面我們先什么也不寫。
接下來，我們要在web.xml里面把這個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注冊完畢，我們先來訪問一下這個功能。
重啟tomcat。
訪問：http://localhost/ajax/MyServlet
1.3 前臺頁面設(shè)計(jì)
服務(wù)器小程序已經(jīng)差不多了，現(xiàn)在我們?yōu)榱撕头?wù)器進(jìn)行交互，就需要編寫前臺頁面。這個頁面也就是給用戶看的。換言之，用戶只能通過前臺頁面來訪問我們的Servlet。
我們來寫一個小案例，在頁面上發(fā)送一句話到服務(wù)器，然后服務(wù)器給出一個回應(yīng)就行了。
就是這么一個簡單的案例，主要用來熟悉一下流程。
為了簡單起見，我就不自己調(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)行提交的，可是這樣的話，就會有一個問題，就是頁面會刷新，而且代碼也相對比較難懂。
自從ajax出來了之后，這種情況得到了巨大的改善，局部刷新技術(shù)在當(dāng)時來看，還是非常不錯的。
我先把實(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);
}
};
}
同時修改一下MyServlet
@Override
protected 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)試界面就出來了。然后，找到一個network，以谷歌瀏覽器為例
network視圖會把所有的數(shù)據(jù)交互顯示出來，包括引入的 js ， css文件，還有各種請求和回應(yīng)，都會在這里顯示出來。
比如，現(xiàn)在我刷新一下頁面
我這么一刷新，首先服務(wù)器接收到的是這么一個 URL： http://localhost/ajax/index.jsp
這就是一個請求，服務(wù)器收到這個請求后，返回給我 index.jsp頁面和bootstrap.min.css這個文件。
因?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出來的是空。
好的，那我們給瀏覽器也返回一句話吧。
@Override
protected 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 時，表示響應(yīng)已就緒.
請求方式是get，并且只有當(dāng)返回的狀態(tài)碼為200的時候，才會打印出responseText，這個就是對應(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{
@Override
protected 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();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
以上所述是小編給大家介紹的JavaScript中淺講ajax圖文詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- 詳解js的延遲對象、跨域、模板引擎、彈出層、AJAX【附實(shí)例下載】
- JavaScript Ajax實(shí)現(xiàn)異步通信
- JS 攔截全局ajax請求實(shí)例解析
- Ajax與用戶交互的JSON數(shù)據(jù)存儲格式
- $.ajax json數(shù)據(jù)傳遞方法
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- 淺析ajax請求json數(shù)據(jù)并用js解析(示例分析)
- javascript實(shí)現(xiàn)原生ajax的幾種方法介紹
- 用ajax動態(tài)加載需要的js文件
- ThinkPHP中使用ajax接收json數(shù)據(jù)的方法
- ThinkPHP通過AJAX返回JSON的兩種實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)Ajax的方法分析
相關(guān)文章
Svelte框架實(shí)現(xiàn)表格協(xié)同文檔的示例
本文主要介紹了Svelte框架實(shí)現(xiàn)表格協(xié)同文檔的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
http頭部字段Origin和Access-Control-Allow-Origin解決請求跨域
這篇文章主要為大家介紹了http頭部字段Origin和Access-Control-Allow-Origin解決請求跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了容易造成JavaScript內(nèi)存泄露幾個方面,本文講解了多個會在Chrome V8中產(chǎn)生內(nèi)存泄漏的示例,需要的朋友可以參考下2014-09-09
Web 開發(fā)中Ajax的Session 超時處理方法
下面小編就為大家?guī)硪黄猈eb 開發(fā)中Ajax的Session 超時處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
javascript實(shí)現(xiàn)將文件保存到本地方法匯總
本文給大家匯總介紹了3中使用javascript實(shí)現(xiàn)將文件保存到本地的方法，非常的簡單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
我們曾經(jīng)講過JS由三部分組成，其中一個部分就是BOM，用于對瀏覽器進(jìn)行操作。這篇文章我們主要來介紹BOM應(yīng)用，感興趣的朋友一起看看吧2018-02-02
回車換Tab 方便，實(shí)現(xiàn)tab功能，屏蔽回車提交2008-12-12
基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳的相關(guān)資料,需要的朋友可以參考下2016-10-10
判斷一個控件是否已加載完成其實(shí)很簡單，就是利用瀏覽器的解析順序。通俗的說，代碼的位置越靠前，就越先加載。2010-02-02
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上傳視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08