? ? ? 一年前，從不知道Ajax是什么，伴隨著不斷的積累，到如今常常使用，逐漸有了深入的認識。

今天，假設想開發一個更加人性化，友好，無刷新，交互性更強的網頁，那您的目標一定是Ajax。

?

介紹

?

? ? ? 在具體討論Ajax是什么之前，先讓我們花一分鐘了解一下Ajax做什么。如圖所看到的：

?

? ? ?

? ? ??

? ? ? ?如上圖展示給我們的就是使用Ajax技術實現的效果。伴隨著web應用的越來越強大而出現的是等待。等待server響應，等待瀏覽器刷新。等待請求返回和生成新的頁面成為了程序猿們的最最頭疼的難題。隨著Ajax的出現使web應用程序變得更完好，更友好。

? ? ? 好。還等什么呢？讓我們來一起看看Ajax的強大功能。

1、什么是Ajax

?

? ? ? Ajax的全稱是：Asynchronous ?JavaScript ?+ ?XML=異步?JavaScript + XML

? ? ?從Ajax的全稱我們能夠看出，Ajax不是一個技術。它是幾種技術的結合體，每種技術都有其獨特之處，合在一起就成為了功能強大的新技術，用于創建高速動態網頁的技術。因此，Ajax也有一個時髦的術語“舊貌換新顏”。

2、Ajax包含：

? ? ?1、HTML，用于建立web表單

? ? ?2、DOM，用于動態顯示和交互

? ? ?3、XML，使用XML做數據交互和操作

? ? ?4、XmlHttpRequest，進行異步數據接收

? ? ?5、JavaScript，將它們緊密的結合在一起

? ? ? ?相信您對上面的技術都非常熟悉，最難是創建XMLHttpRequest對象，大家看我的一篇博文就好。里面具體介紹了它是什么，以及五步創建法，猛戳這里。

? ? ?

Ajax工作原理

? ? ? ?我們通過兩張圖以往傳統的Web應用程序和使用Ajax應用程序的原理圖，來解釋一下Ajax的工作原理，例如以下圖所看到的：

? ? ? ?圖1是以往傳統的Web應用程序的原理圖，由client向server提交頁面請求，再由server通過HTTP傳給client生成瀏覽頁面。server端承擔大量的工作，client僅僅負責顯示。

? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1.傳統的Web應用程序的原理圖

?

? ? ? 圖2使用Ajax應用程序的工作原理例如以下圖，可見通過Ajax在瀏覽器與用戶交互方面有了非常大改進。用戶不用為提交Form表單而長時間等待server響應，提高用戶體驗度，并且通過Ajax也能夠開發出更加華麗的Web交互頁面。client界面和Ajax引擎都是在client執行，這樣大量的server工作能夠在Ajax引擎處實現，減輕了server端的負擔。

? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? 圖2.使用Ajax應用程序的原理圖

?

Ajax的優缺點：

Ajax給我們帶來的優點，大家都有切身體會，在這里我僅僅是簡單的講幾點：

?

長處：

?

? ? ? ?1.最大的一點是頁面無刷新，用戶的體驗度更好。

? ? ? ?2.異步與server交互，不須要打斷用戶操作，具有更快的響應能力。

? ? ? ?3.減輕server和帶寬的負擔，節約空間和成本，ajax是“按需取數據”。能夠最大程度的減輕對server造成的負擔。

? ? ? ?4.基于標準化的并被廣泛應用的技術，不須要下載插件或者小程序。

? ? ? ? ? ? ?

Ajax具有非常多的長處，正是這些長處也反應了它的缺點（當然這里缺點能夠克服）。

缺點：

? ? ? ?1.安全問題

? ? ? ?2.對搜索引擎的支持比較弱。

? ? ? ?3.破壞了程序的異常處理機制。

? ? ? ?4.違背了url和資源定位的初衷。

實戰

一個簡單，但很有用的樣例：java版異步驗證username是否存在

先給大家看一下實現的效果，以下給大家用代碼實現：

? ? ? ? ? ??

? ? ? ? ??

JS部分的代碼：

<script type="text/javascript">var xmlHttp;function createXMLHttpRequest() {//表示當前瀏覽器不是ie,如ns,firefoxif(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}function validate(field) {if (trim(field.value).length != 0) {//創建Ajax核心對象XMLHttpRequestcreateXMLHttpRequest();var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();//設置請求方式為GET。設置請求的URL。設置為異步提交xmlHttp.open("GET", url, true);//將方法地址復制給onreadystatechange屬性//相似于電話號碼xmlHttp.onreadystatechange=callback;//將設置信息發送到Ajax引擎xmlHttp.send(null);} else {document.getElementById("spanUserId").innerHTML = "";} }//回調函數function callback() {//Ajax引擎狀態為成功if (xmlHttp.readyState == 4) {//HTTP協議狀態為成功if (xmlHttp.status == 200) {if (trim(xmlHttp.responseText) != "") {document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"}else {document.getElementById("spanUserId").innerHTML = "";}}else {alert("請求失敗，錯誤碼=" + xmlHttp.status);}}} </script>

提交到user_validate.jsp頁面的代碼：

<%@ page language="java" contentType="text/html; charset=GB18030"pageEncoding="GB18030"%> <%@ page import="sysmgr.manager.*" %><%String userId = request.getParameter("userId");if (UserManager.getInstance().findUserById(userId) != null) {out.println("用戶代碼[" + userId + "]已經存在!");} %>

訪問數據庫部分的代碼，我們就不再這里展示了，大家能夠到查看源代碼。

總結

? ? ? ?Web開發一直在追求界面友好，人性化，較高的用戶體驗度以及更加美觀等等。我相信僅僅要從點點滴滴做起。不論什么問題都不是問題。

轉載于:https://www.cnblogs.com/claireyuancy/p/6866317.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。