本篇文章給大家分享的是有關(guān)ajax的介紹和使用，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比邵原網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式邵原網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋邵原地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

1.1 什么是ajax:

• Ajax（Asynchronous JavaScript and XML），直譯為“異步的JavaScript與XML技術(shù)”，是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，用于創(chuàng)建快速動態(tài)網(wǎng)頁，由杰西·詹姆士·賈瑞特所提出。與傳統(tǒng)的Web應(yīng)用相比，Ajax通過瀏覽器與服務(wù)器進行少量的數(shù)據(jù)交換就可以實現(xiàn)網(wǎng)頁的異步更新，在不重新加載整個網(wǎng)頁的情況下，即可對網(wǎng)頁進行更新。
  

1.2Ajax的應(yīng)用場景：

1.2.1 檢查用戶名是否已被注冊：

很多站點的注冊頁面都具被自動檢測用戶名是否存在的友好提示，該功能整體頁面并沒有刷新，但仍然可以異步與服務(wù)器進行數(shù)據(jù)交換，查詢用戶輸入的用戶名是否存在數(shù)據(jù)庫。

1.2.2 省市級聯(lián)下拉框聯(lián)動：

很多站點都存在輸入用戶地址的操作，在完成地址輸入時，用戶所在的省份是下拉框，當(dāng)選擇不同的省份時會出現(xiàn)不同市區(qū)的選擇，這就是最常見的省市聯(lián)動效果。

1.2.3 內(nèi)容自動補全：

不管時專注于搜索的百度，還是站點內(nèi)商品搜索的淘寶，都有搜索的功能，在i搜索框輸入查詢關(guān)鍵字時，整個頁面沒有刷新，但會根據(jù)關(guān)鍵字顯示相關(guān)查詢字條，這個過程是異步的。

百度的搜索補全功能：

淘寶的搜索補全功能：

1.3 同步方式與異步方式的區(qū)別：

1. 同步方式發(fā)送請求：發(fā)送一個請求，需要等待響應(yīng)返回，然后才能夠發(fā)送下一個請求，如果該請求沒有響應(yīng)，不能發(fā)送下一個請求，客戶端會一直處于等待過程中。
2. 異步方式發(fā)送請求：發(fā)送一個請求，不需要等待響應(yīng)返回，隨時可以再發(fā)送下一個請求，即不需要等待。

1.4 Ajax的原理分析：

• AJAX引擎會在不刷新瀏覽器地址欄的情況下，發(fā)送異步請求：

1. 使用JavaScript獲取瀏覽器內(nèi)置的AJAX引擎（XMLHttpRequest對象）
2. 使用js確定請求路徑和請求參數(shù)
3. AJAX引擎對象根據(jù)請求路徑和請求參數(shù)進行發(fā)送請求

• 服務(wù)器接收到Ajax引擎的請求進行處理：

1. 服務(wù)器獲得請求參數(shù)數(shù)據(jù)
2. 服務(wù)器處理請求業(yè)務(wù)（調(diào)用業(yè)務(wù)層代碼）
3. 服務(wù)器響應(yīng)數(shù)據(jù)給Ajax引擎

• Ajax引擎獲得服務(wù)器響應(yīng)的數(shù)據(jù)，通過執(zhí)行JavaScript的回調(diào)函數(shù)將數(shù)據(jù)更新到瀏覽器頁面的具體位置：

1. 通過設(shè)置給Ajax引擎的回調(diào)函數(shù)獲取服務(wù)器響應(yīng)的數(shù)據(jù)
2. 使用JavaScript在指定的位置，顯示響應(yīng)的數(shù)據(jù)，從而局部修改頁面的數(shù)據(jù)，達到局部刷新的目的。

2.1js原生的Ajax：

• js原生的Ajax開發(fā)步驟：

1. 創(chuàng)建Ajax引擎對象

2. 為Ajax引擎對象綁定監(jiān)聽（監(jiān)聽服務(wù)器已將數(shù)據(jù)響應(yīng)給引擎）

3. 綁定提交地址

4. 發(fā)送請求

5. 監(jiān)聽里面處理響應(yīng)數(shù)據(jù)

package com.sunny.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "Ajax1Servlet", urlPatterns = "/Ajax1Servlet")
public class Ajax1Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //獲取請求參數(shù)
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        //打印出來
        System.out.println("name="+name);
        System.out.println("password="+password);
        //輸出數(shù)據(jù)前端
        response.getWriter().write("hello js ajax");
    }
}

2.2 Ajax引擎連接狀態(tài)readyState值0~4變化過程：

• 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
• 0: 請求未初始化
• 1: 服務(wù)器連接已建立
• 2: 請求已接收
• 3: 請求處理中
• 4: 請求已完成，且響應(yīng)已就緒

這里狀態(tài)值4只能說明接收到了服務(wù)器的響應(yīng)服務(wù)器處理ajax請求結(jié)束，但是不能代表正確的獲取了服務(wù)器的響應(yīng)，需要配合http狀態(tài)碼200兩個條件就可以說明正確的獲取了服務(wù)器響應(yīng)。只有這兩個條件滿足，xmlhttp.responseText才可以獲取到正確的響應(yīng)數(shù)據(jù)。

xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4){
				if(xmlhttp.status == 200){
					alert("響應(yīng)數(shù)據(jù)" + xmlhttp.responseText);
				}
			}
		};

ajax的優(yōu)缺點：

使用Ajax的最大優(yōu)點，就是能在不更新整個頁面的前提下維護數(shù)據(jù)。這使得Web應(yīng)用程序更為迅捷地回應(yīng)用戶動作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變的信息。

關(guān)于無法將狀態(tài)加入收藏或書簽的問題，HTML5之前的一種方式是使用URL片斷標(biāo)識符（通常被稱為錨點，即URL中#后面的部分）來保持追蹤，允許用戶回到指定的某個應(yīng)用程序狀態(tài)。（許多瀏覽器允許JavaScript動態(tài)更新錨點，這使得Ajax應(yīng)用程序能夠在更新顯示內(nèi)容的同時更新錨點。）HTML5以后可以直接操作瀏覽歷史，并以字符串形式存儲網(wǎng)頁狀態(tài)，將網(wǎng)頁加入網(wǎng)頁收藏夾或書簽時狀態(tài)會被隱形地保留。上述兩個方法也可以同時解決無法后退的問題。

以上就是ajax的介紹和使用，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。