Ajax異步數據交互----(JavaScript原生版和jQuery封裝版)
Ajax(Asynchronous JavaScript and XML)不是一門獨立的技術，它是由HTML、JavaScript、CSS和DOM等技術組成。javascript
傳統的Web應用容許用戶填寫表單，當提交表單時就向服務器發送一個請求，服務器接收並處理用戶提交過來的表單數據，並返回一個新的網頁給用戶，這樣的作法會浪費許多帶寬，因爲每次的應用交互都要向服務器發送請求，應用的響應時間依賴於服務器的響應時間，致使了用戶界面的響應時間慢，給予用戶不佳的體驗。html
Ajax頗有用的地方就在於不刷新頁面而且訪問數據庫處理數據(如在註冊情景下，檢測用戶名是否已經存在，並返回結果的過程)，並按照數據的處理結果按你想要的方式對界面作出即時的更改。整體上，使用Ajax具備以下優點:前端
- 減輕客戶端的內存消耗。
- 無刷新更新頁面，給用戶一種連續的體驗。
- 將傳統的服務器工做轉嫁到客戶端，從而減輕服務器和帶寬的負擔，節約空間和帶寬的租用成本。
- 基於標準化技術。
使用 JavaScript 向服務器提出請求並處理響應而不阻塞用戶！核心對象XMLHTTPRequest。經過這個對象，您的 JavaScript 可在不重載頁面的狀況與 Web 服務器交換數據，即在不須要刷新頁面的狀況下，就能夠產生局部刷新的效果，理念爲「按需取數據」。java
JS版本的Ajax使用jquery
在JS中使用XMLHTTPRequest對象時須要注意不一樣瀏覽器之間對它的實現，在IE中把XMLHTTPRequest實現爲ActiveX控件對象，二其餘瀏覽器把它實現爲一個本地的javascript對象。因此建立時爲了兼容需在代碼中添加判斷邏輯建立相應的服務器所需的XMLHTTPRequest對象,下表是它的方法。ajax
| 方 法 | 描 述 |
| abort() | 中止當前請求 |
| getAllResponseHeaders() | 把HTTP請求的全部響應首部做爲鍵/值對返回 |
| getResponseHeader("header") | 返回指定首部的串值 |
| open("method","URL",[asyncFlag],["userName"],["password"]) | 創建對服務器的調用。method參數能夠是GET、POST或PUT。url參數能夠是相對URL或絕對URL。這個方法還包括3個可選的參數，是否異步，用戶名，密碼 |
| send(content) | 向服務器發送請求 |
| setRequestHeader("header", "value") | 把指定首部設置爲所提供的值。在設置任何首部以前必須先調用open()。設置header並和請求一塊兒發送 ('post'方法必定要 ) |
注意:open()方法中三個參數分別爲發送數據的方式(get/post)、發送數據的目標URL、是否異步發送(true/false;若是不填默認爲true，異步發送)。sql
get和post發送數據方式的區別:get方式發送數據，在第二個參數URL後面追加?xxx=xxx(鍵值對結構發送)，若是多個數據則以&鏈接，便是?xxx=xxx&yyy=yyy數據庫
post方式發送數據，需在open()方法以後和send()方法以前設置請求的響應頭xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded")，而且在send()方法中以鍵值對的形式發送數據,如send("username="+username);json
五步使用法:後端
1.建立XMLHTTPRequest對象
2.使用open方法設置和服務器的交互信息
3.設置發送的數據，開始和服務器端交互
4.註冊事件
5.更新界面
下面用一個小案例實現Ajax的數據交互:
需求:在用戶輸入完用戶名後返回用戶名是否存在，顯示在輸入框旁。
實現:1.頁面顯示只須要一個輸入框和span來顯示用戶名在數據庫中的狀態,以post方式進行ajax的數據交互
2.頁面的js代碼部分須要建立Ajax進行異步通訊的核心對象XMLHTTPRequest對象、獲取用戶輸入的用戶名、將用戶名以Ajax以GET/POST的方式發送給指定的URL(負責邏輯判斷的servlet部分)、對XMLHTTPRequest對象的進行監聽readyState和status，若是readyState==4而且status==200那麼表示服務器響應成功，依據服務器返回的數據對前端頁面進行更改或者提示，個人這個案例就是在span中提示用戶名的狀態
3.後端servlet部分是負責接收前臺發送過來的數據，使用C3P0數據源鏈接池和DBUtils對數據庫進行鏈接和查詢用戶名，並返回JavaBean實體類，即時User類，若是不爲null表示數據庫中已經存在，不能使用，response.getWriter().write("0"),往前端返回0，前端根據返回值進行span提示；反之可使用,response.getWriter().write("1")。
代碼部分:
index.jsp(頁面顯示部分)：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用戶註冊</title> <script> //全局變量聲明XMLHTTPRequsert對象，方便各方法使用 var xmlHTTP; //建立XMLHTTPRequest對象 function createXMLHTTPRequest() { if(window.ActiveXObject){ //IE五、6對XMLHTTPRequest的實現 xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP"); }else{ // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlHTTP=new XMLHttpRequest(); } } //獲取用戶輸入的用戶名 function checkName() { var name=document.getElementById("username"); if(name.value.length==0){ alert("請輸入用戶名"); }else{ doAjax(name.value); } } //進行Ajax操做，將用戶名異步發送到服務器 function doAjax(username) { //建立XMLHTTPRequest對象 createXMLHTTPRequest(); //創建鏈接（方式、URL、是否異步） xmlHTTP.open("post","AcceptAjax",true); //POST傳送數據到後臺服務器，須要設置請求頭，這是與GET不一樣的地方 xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //對該對象進行監聽 xmlHTTP.onreadystatechange=function () { //對readyState和status進行判斷，若是響應成功則獲取後臺返回的數據 if(xmlHTTP.readyState==4&&xmlHTTP.status==200){ //獲取響應數據 var value=xmlHTTP.responseText; var messageshow=document.getElementById("messageshow"); if(value=="0"){ messageshow.style.color="red"; messageshow.innerText="用戶名存在"; }else{ messageshow.style.color="green"; messageshow.innerText="用戶名可用"; } } } //post方式在send中以鍵值對的方式發送數據，後臺則以getParameter()方法獲取用戶發送過去的數據 xmlHTTP.send("username="+username); } </script> </head> <body> <form action="" method="post"> 用戶名:<input type="text" name="username" id="username" onblur="checkName()"> <span id="messageshow"></span> </form> </body> </html>
AcceptAjax(servlet邏輯判斷部分):
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //設置響應的類型和編碼格式 resp.setContentType("html/text;charset=UTF-8"); //獲取前臺發來的數據 String username = req.getParameter("username"); //獲取C3P0數據源鏈接池中的數據源 DataSource dataSource=new ComboPooledDataSource(); //用DBUtils工具類對數據庫進行查找操做 QueryRunner qr=new QueryRunner(dataSource); //查找用戶輸入的用戶名在數據庫中是否存在，sql查詢語句返回一個User對象，若是存在即不爲空，給前臺返回"0"反之不存在返回"1" try { //new BeanHandler<>(User.class)以反射爲基礎new對象，設定返回對象的類 User query = qr.query("select * from user where username=?", new BeanHandler<>(User.class), username); if(query!=null){ resp.getWriter().write("0"); }else{ resp.getWriter().write("1"); } } catch (SQLException e) { e.printStackTrace(); }finally { return; } }
User(JavaBean實體類)
public class User { private String username; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } }
簡單數據庫部分（MYSQL）:
2018.01.31 記
補充:
JQuery版本的Ajax使用
JQuery的Ajax操做，對JavaScript底層Ajax操做進行了封裝，提供了兩種方法進行操做,能夠用IDEA的模板工具作成模板，智能提示快捷使用。
特別地，------>jQuery有一個吸引人的功能就是它所提供的Ajax支持，提供了大量的工具方法:
jQuery.param(obj)：將obj參數轉換爲查詢字符串。
serialize()：將該jQuery對象包含的表單或表單控件轉換爲查詢字符串，如username=alice&age=20的格式，極大地方便了咱們進行數據發送。
serializeArray()：序列化表單元素（相似 .serialize() 方法），返回 JSON 數據結構數據，返回的 JSON 對象是由一個對象數組組成的。
對於json，有個快捷的工具類Gson的toJson（object o）方法能夠將java的對象轉換爲json返回前端，截取片斷。
User轉換爲json:
Gson gson=new Gson(); String s = gson.toJson(user); resp.getWriter().write(s);
第一種是底層的$.ajax()操做（參數爲經常使用的幾種，後有詳細參數大全和回調函數）：
$.ajax({ url:"url", //指定的URL type:"get", //發送的方式 dataType:"json", //發送的數據類型,json能夠將javascript對象中表示的一組數據轉換爲字符串，格式爲{"xxx":"yyy"}形式出現 data:{ userID:"1" //發送的json數據 }, success:function(response){ //Ajax響應成功的回調函數 }, error:function() { //指定服務器響應出錯的回調函數 } });
第二種是快捷操做$.get()..$.post()...:
$.get( "url", {userID:"123"}, function(response) { } )
$.post( "url", {userID:"123"}, function(response) { } )
補充:
$ajax（）中的參數大全:
- options
類型：Object
可選。AJAX 請求設置。全部選項都是可選的。
- async
類型：Boolean
默認值: true。默認設置下，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲 false。
注意，同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成才能夠執行。
- beforeSend(XHR)
類型：Function
發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。
XMLHttpRequest 對象是惟一的參數。
這是一個 Ajax 事件。若是返回 false 能夠取消本次 ajax 請求。
- cache
類型：Boolean
默認值: true，dataType 爲 script 和 jsonp 時默認爲 false。設置爲 false 將不緩存此頁面。
jQuery 1.2 新功能。
- complete(XHR, TS)
類型：Function
請求完成後回調函數 (請求成功或失敗以後均調用)。
參數： XMLHttpRequest 對象和一個描述請求類型的字符串。
這是一個 Ajax 事件。
- contentType
類型：String
默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。
默認值適合大多數狀況。若是你明確地傳遞了一個 content-type 給 $.ajax() 那麼它一定會發送給服務器（即便沒有數據要發送）。
- context
類型：Object
這個對象用於設置 Ajax 相關回調函數的上下文。也就是說，讓回調函數內 this 指向這個對象（若是不設定這個參數，那麼 this 就指向調用本次 AJAX 請求時傳遞的 options 參數）。好比指定一個 DOM 元素做爲 context 參數，這樣就設置了 success 回調函數的上下文爲這個 DOM 元素。
就像這樣：
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});- data
類型：String
發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。
- dataFilter
類型：Function
給 Ajax 返回的原始數據的進行預處理的函數。提供 data 和 type 兩個參數：data 是 Ajax 返回的原始數據，type 是調用 jQuery.ajax 時提供的 dataType 參數。函數返回的值將由 jQuery 進一步處理。
- dataType
類型：String
預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，好比 XML MIME 類型就被識別爲 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執行這個腳本。隨後服務器端返回的數據會根據這個值解析後，傳遞給回調函數。可用值:
- "xml": 返回 XML 文檔，可用 jQuery 處理。
- "html": 返回純文本 HTML 信息；包含的 script 標籤會在插入 dom 時執行。
- "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，全部 POST 請求都將轉爲 GET 請求。（由於將使用 DOM 的 script標籤來加載）
- "json": 返回 JSON 數據 。
- "jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。
- "text": 返回純文本字符串
- error
類型：Function
默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。
有如下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。
若是發生了錯誤，錯誤信息（第二個參數）除了獲得 null 以外，還多是 "timeout", "error", "notmodified" 和 "parsererror"。
這是一個 Ajax 事件。
- global
類型：Boolean
是否觸發全局 AJAX 事件。默認值: true。設置爲 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用於控制不一樣的 Ajax 事件。
- ifModified
類型：Boolean
僅在服務器數據改變時獲取新數據。默認值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中，它也會檢查服務器指定的 'etag' 來肯定數據沒有被修改過。
- jsonp
類型：String
在一個 jsonp 請求中重寫回調函數的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數裏的 "callback" 部分，好比 {jsonp:'onJsonPLoad'} 會致使將 "onJsonPLoad=?" 傳給服務器。
- jsonpCallback
類型：String
爲 jsonp 請求指定一個回調函數名。這個值將用來取代 jQuery 自動生成的隨機函數名。這主要用來讓 jQuery 生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也能夠在想讓瀏覽器緩存 GET 請求的時候，指定這個回調函數名。
- password
類型：String
用於響應 HTTP 訪問認證請求的密碼
- processData
類型：Boolean
默認值: true。默認狀況下，經過data選項傳遞進來的數據，若是是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM 樹信息或其它不但願轉換的信息，請設置爲 false。
- scriptCharset
類型：String
只有當請求時 dataType 爲 "jsonp" 或 "script"，而且 type 是 "GET" 纔會用於強制修改 charset。一般只在本地和遠程的內容編碼不一樣時使用。
- success
類型：Function
請求成功後的回調函數。
參數：由服務器返回，並根據 dataType 參數進行處理後的數據；描述狀態的字符串。
這是一個 Ajax 事件。
- traditional
類型：Boolean
若是你想要用傳統的方式來序列化數據，那麼就設置爲 true。請參考工具分類下面的 jQuery.param 方法。
- timeout
類型：Number
設置請求超時時間（毫秒）。此設置將覆蓋全局設置。
- type
類型：String
默認值: "GET")。請求方式 ("POST" 或 "GET")， 默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可使用，但僅部分瀏覽器支持。
- url
類型：String
默認值: 當前頁地址。發送請求的地址。
- username
類型：String
用於響應 HTTP 訪問認證請求的用戶名。
- xhr
類型：Function
須要返回一個 XMLHttpRequest 對象。默認在 IE 下是 ActiveXObject 而其餘狀況下是 XMLHttpRequest 。用於重寫或者提供一個加強的 XMLHttpRequest 對象。這個參數在 jQuery 1.3 之前不可用。
回調函數
若是要處理 $.ajax() 獲得的數據，則須要使用回調函數：beforeSend、error、dataFilter、success、complete。
beforeSend
在發送請求以前調用，而且傳入一個 XMLHttpRequest 做爲參數。
error
在請求出錯時調用。傳入 XMLHttpRequest 對象，描述錯誤類型的字符串以及一個異常對象（若是有的話）
dataFilter
在請求成功以後調用。傳入返回的數據以及 "dataType" 參數的值。而且必須返回新的數據（多是處理過的）傳遞給 success 回調函數。
success
當請求以後調用。傳入返回後的數據，以及包含成功代碼的字符串。
complete
當請求完成以後調用這個函數，不管成功或失敗。傳入 XMLHttpRequest 對象，以及一個包含成功或錯誤代碼的字符串。
- 1. Ajax 數據異步交互
- 2. 原生的ajax 異步交互過程
- 3. 原生Ajax實現異步交互
- 4. ajax（原生JavaScript）異步提交表單數據
- 5. 封裝原生JavaScript的ajax
- 6. 原生JavaScript封裝Ajax
- 7. jquery ajax異步提交表單數據
- 8. Ajax異步交互原理，Jquery寫法和js寫法
- 9. Ajax 異步交互
- 10. ajax+json 作數據異步交互
- 更多相關文章...
- • Eclipse 安裝(Neon 版本) - Eclipse 教程
- • C# 封裝 - C#教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • Flink 數據傳輸及反壓詳解
-
每一个你不满意的现在，都有一个你没有努力的曾经。