# AJAX ## 什么是 AJAX **AJAX**：Asynchronous JavaScript and XML（異步的 JavaScript 和 XML） AJAX 最大的優點就是在不重新加載整個頁面的情況下面，可以與服務器進行數據交互完成頁面的局部刷新（更新） AJAX 是不需要瀏覽器插件的，只要瀏覽器允許運行 Javascript 腳本就可以。 > 簡單的理解 AJAX 就是：瀏覽器通過 JavaScript 向 WEB 服務器發送（帶參數的）請求，Servlet 獲取請求參數處理業務邏輯，返回處理結果數據（有的時候是處理標志，有的時候是結果集 List）,通過 success 回調函數進行數據解析（DOM 解析） 雖然是異步的 JavaScript 和 XML，但是現在 AJAX 運用 JSON 是個主流。 由于 XM L的結構過于復雜而且同樣的業務數據量，占用的文件也大，不利于網絡的傳輸，所有使用 JSON 越來越多。 ## 什么是 JSON JSON (JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。它基于 ECMAScript (w3c制定的js規范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。 ### JSON 語法 在 JS 語言中，一切都是對象。因此，任何支持的類型都可以通過 JSON 來表示，例如字符串、數字、對象、數組等。但是對象和數組是比較特殊且常用的兩種類型： * 對象表示為鍵值對 * 數據由逗號分隔 * 花括號保存對象 * 方括號保存數組 **JSON 鍵/值對** JSON 鍵值對是用來保存 JS 對象的一種方式，和 JS 對象的寫法也大同小異，鍵/值對組合中的鍵名寫在前面并用雙引號 "" 包裹，使用冒號 : 分隔，然后緊接著值： `{"firstName": "John"}` 這很容易理解，等價于這條 JavaScript 語句： `{firstName : "John"}` **JSON 與 JS 對象的關系** > JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質是一個字符串。 如 ~~~ var obj = {a: 'Hello', b: 'World'}; //這是一個對象，注意鍵名也是可以使用引號包裹的 var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字符串，本質是一個字符串 ~~~ **JSON 和 JS 對象互轉** 要實現從對象轉換為 JSON 字符串，使用 JSON.stringify() 方法： ~~~ var json = JSON.stringify({a: 'Hello', b: 'World'}); //結果是 '{"a": "Hello", "b": "World"}' ~~~ 要實現從 JSON 轉換為對象，使用 JSON.parse() 方法： ~~~ var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'} ~~~ **表示對象** 示例： ~~~ {"firstName": "Brett", "lastName": "McLaughlin"} ~~~ **表示數組** ~~~ { "people":[ { "firstName": "Brett", "lastName":"McLaughlin" }, { "firstName":"Jason", "lastName":"Hunter" } ] } ~~~ 在這個示例中，只有一個名為 people的變量，值是包含兩個條目的數組，每個條目是一個人的記錄，其中包含名和姓。上面的示例演示如何用括號將記錄組合成一個值。當然，可以使用相同的語法表示更過多的值（每個值包含多個記錄）。 ## 如何使用 AJAX 最原始的 AJAX 使用，是需要根據客戶端瀏覽器不同的廠商進行判斷后，定義 AJAX 對象的。 但是，現在一般都會使用第三方的框架去實現 AJAX，比如 jQuery 中的 $.ajax() 方法。 相關參數的解釋：http://www.w3school.com.cn/jquery/ajax_ajax.asp **重要參數包括**：url/async/dataType/data/type/success - **url**： 類型：String 默認值: 當前頁地址。發送請求的地址。 - **contentType** 類型：String 默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。 默認值適合大多數情況。如果你明確地傳遞了一個 content-type 給 $.ajax() 那么它必定會發送給服務器（即使沒有數據要發送）。 - **async**： 類型：Boolean 默認值: true。默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。 注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。 - **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": 返回純文本字符串 - **data**： 類型：String 發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。 - **type**： 類型：String 默認值: "GET")。請求方式 ("POST" 或 "GET")， 默認為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。 - **success**： 類型：Function 請求成功后的回調函數。 參數：由服務器返回，并根據 dataType 參數進行處理后的數據；描述狀態的字符串。 這是一個 Ajax 事件。 示例 ~~~ $.ajax({ url : "/UpdateAjaxServlet", async:false, dataType : "json", data : toData, type:"post", success : function(data) { if (data.result == "success") { alert(data.msg); initData($cp); } } }); ~~~ **使用控制臺觀察AJAX請求** 使用 chrome 瀏覽器，F12 開發人員工具，打開 network 標簽中的 xhr 項。  **使用 Servlet 返回 JSON 格式的請求** 使用 jackson 進行對象到 JSON 的轉換。 導入3個 jar 包：jackson-annotations-2.8.9.jar jackson-core-2.8.9.jar jackson-databind-2.8.9.jar 下載地址：http://www.ntqingniao.com/zc/j96/jackson.rar 對象到JSON字符串的轉換代碼 ~~~ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); String cp = request.getParameter("currentPage"); Pager pager = new Pager(cp); studentService.pageQuery(pager); ObjectMapper mapper = new ObjectMapper(); String rsJson = mapper.writeValueAsString(pager); response.getWriter().print(rsJson); } ~~~ ## 你還需要知道的知識點 ### 同步和異步 同步和異步的概念對于很多人來說是一個模糊的概念，是一種似乎只能意會不能言傳的東西。其實我們的生活中存在著很多同步異步的例子。比如：你叫我去吃飯，我聽到了就立刻和你去吃飯，如果我們有聽到，你就會一直叫我，直到我聽見和你一起去吃飯，這個過程叫同步；異步過程指你叫我去吃飯，然后你就去吃飯了，而不管我是否和你一起去吃飯。而我得到消息后可能立即就走，也可能過段時間再走。 > 在 AJAX 請求中，默認是異步的，就是碰到 AJAX 請求，程序會直接走到下一段代碼，不會等到 AJAX 處理完成后再往下執行，這個在開發中尤其要注意，如果在你的代碼中有需要 AJAX 處理的邏輯結果作為后續代碼執行的條件時，異步就會產生問題，這時候就要做同步處理，即將 async 屬性定義為 false。 > ## 關于 serialize 自學：http://www.w3school.com.cn/jquery/ajax_serialize.asp > 如果表單中的元素過多，我們可以使用 serialize 方法進行全局的處理再傳遞給請求。 ## 項目源碼下載地址 下載地址：http://www.ntqingniao.com/zc/j96/demo1.rar