JavaScript中淺講ajax圖文詳解

更新時(shí)間：2016年11月11日 14:30:28 作者：剽悍一小兔

ajax對(duì)于各位來說，應(yīng)該都不陌生，正因?yàn)閍jax的產(chǎn)生，導(dǎo)致前臺(tái)頁面和服務(wù)器之間的數(shù)據(jù)傳輸變得非常容易，同時(shí)還可以實(shí)現(xiàn)頁面的局部刷新。本文圖文并茂給大家介紹了js中ajax知識(shí)，需要的朋友一起學(xué)習(xí)吧

1.ajax入門案例

1.1 搭建Web環(huán)境

ajax對(duì)于各位來說，應(yīng)該都不陌生，正因?yàn)閍jax的產(chǎn)生，導(dǎo)致前臺(tái)頁面和服務(wù)器之間的數(shù)據(jù)傳輸變得非常容易，同時(shí)還可以實(shí)現(xiàn)頁面的局部刷新。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

對(duì)于JavaWeb項(xiàng)目而言，ajax主要用于瀏覽器和服務(wù)器之間數(shù)據(jù)的傳輸。

如果是單單地堆砌知識(shí)點(diǎn)，會(huì)顯得比較無聊，那么根據(jù)慣例，我先不繼續(xù)介紹ajax，而是來寫一個(gè)案例吧。

打開eclipse，新建一個(gè)web項(xiàng)目。

如果對(duì)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>

啟動(dòng)tomcat，把這個(gè)項(xiàng)目跑起來。

沒報(bào)錯(cuò)。

打開瀏覽器，輸入訪問地址，我這里的tomcat端口號(hào)是80 ,默認(rèn)可以不寫。

http://localhost/ajax/index.jsp

來了，沒問題。

好的，這說明我們的web項(xiàng)目搭建沒有問題。

1.2 編寫服務(wù)器程序Servlet

個(gè)人感悟，精粹整理

web環(huán)境已經(jīng)搭好，接下來，讓我們來編寫一個(gè)簡(jiǎn)單的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í)就是對(duì)Servlet做了一個(gè)封裝，本質(zhì)上還是一樣一樣的。

我們寫一個(gè)Servlet，都需要去web.xml里面注冊(cè)一下，否則就用不了。你安裝一個(gè)QQ，注冊(cè)表里面是不是肯定也需要注冊(cè)一下啊，這不還是一樣一樣的嗎？

好了，閑話不多說。我們來寫一個(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{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("111");
}
}

里面我們先什么也不寫。

接下來，我們要在web.xml里面把這個(gè)Servlet注冊(cè)一下。

<?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注冊(cè)完畢，我們先來訪問一下這個(gè)功能。

重啟tomcat。

訪問：http://localhost/ajax/MyServlet

1.3 前臺(tái)頁面設(shè)計(jì)

服務(wù)器小程序已經(jīng)差不多了，現(xiàn)在我們?yōu)榱撕头?wù)器進(jìn)行交互，就需要編寫前臺(tái)頁面。這個(gè)頁面也就是給用戶看的。換言之，用戶只能通過前臺(tái)頁面來訪問我們的Servlet。

我們來寫一個(gè)小案例，在頁面上發(fā)送一句話到服務(wù)器，然后服務(wù)器給出一個(gè)回應(yīng)就行了。

就是這么一個(gè)簡(jiǎn)單的案例，主要用來熟悉一下流程。

為了簡(jiǎn)單起見，我就不自己調(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ù)請(qǐng)求

當(dāng)我們點(diǎn)擊提交按鈕，就alert（）一下，如果成功的話，那么說明點(diǎn)擊事件沒有問題。然后，繼續(xù)往下寫代碼。

如果是以往，我們都是通過form表單來進(jìn)行提交的，可是這樣的話，就會(huì)有一個(gè)問題，就是頁面會(huì)刷新，而且代碼也相對(duì)比較難懂。

自從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

@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)試界面就出來了。然后，找到一個(gè)network，以谷歌瀏覽器為例

network視圖會(huì)把所有的數(shù)據(jù)交互顯示出來，包括引入的 js ， css文件，還有各種請(qǐng)求和回應(yīng)，都會(huì)在這里顯示出來。

比如，現(xiàn)在我刷新一下頁面

我這么一刷新，首先服務(wù)器接收到的是這么一個(gè) URL： http://localhost/ajax/index.jsp

這就是一個(gè)請(qǐng)求，服務(wù)器收到這個(gè)請(qǐng)求后，返回給我 index.jsp頁面和bootstrap.min.css這個(gè)文件。

因?yàn)槲以趇ndex.jsp的確引入過bootstrap.min.css，所以他也就一起加載進(jìn)來了。

現(xiàn)在，我輸入一句話，點(diǎn)擊提交，看看會(huì)發(fā)生什么？

我們把input框里面的內(nèi)容提交到服務(wù)器程序 MyServlet

控制臺(tái)已經(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了。

接下來，看一下請(qǐng)求的具體信息

在比對(duì)一下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: 請(qǐng)求未初始化

1: 服務(wù)器連接已建立，還沒發(fā)送

2: 請(qǐng)求已接收

3: 請(qǐng)求處理中

4: 請(qǐng)求已完成，且響應(yīng)已就緒

當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒.

請(qǐng)求方式是get，并且只有當(dāng)返回的狀態(tài)碼為200的時(shí)候，才會(huì)打印出responseText，這個(gè)就是對(duì)應(yīng)的

out.println("你好，這是服務(wù)器返回的信息！");

這句話。

1.5 基于post方式的數(shù)據(jù)請(qǐng)求

get方法會(huì)在URL地址欄里顯示你提交所帶的值，post方法不會(huì)。所以，相對(duì)來說，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圖文詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: