ajax的介紹和使用

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

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

1.1 什么是ajax:

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

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

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

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

ajax的介紹和使用

1.2.2 省市級(jí)聯(lián)下拉框聯(lián)動(dòng)：

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

ajax的介紹和使用

1.2.3 內(nèi)容自動(dòng)補(bǔ)全：

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

百度的搜索補(bǔ)全功能：

ajax的介紹和使用

淘寶的搜索補(bǔ)全功能：

ajax的介紹和使用

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

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

ajax的介紹和使用

1.4 Ajax的原理分析：

ajax的介紹和使用

AJAX引擎會(huì)在不刷新瀏覽器地址欄的情況下，發(fā)送異步請求：
使用JavaScript獲取瀏覽器內(nèi)置的AJAX引擎（XMLHttpRequest對象）
使用js確定請求路徑和請求參數(shù)
AJAX引擎對象根據(jù)請求路徑和請求參數(shù)進(jìn)行發(fā)送請求
服務(wù)器接收到Ajax引擎的請求進(jìn)行處理：
服務(wù)器獲得請求參數(shù)數(shù)據(jù)
服務(wù)器處理請求業(yè)務(wù)（調(diào)用業(yè)務(wù)層代碼）
服務(wù)器響應(yīng)數(shù)據(jù)給Ajax引擎
Ajax引擎獲得服務(wù)器響應(yīng)的數(shù)據(jù)，通過執(zhí)行JavaScript的回調(diào)函數(shù)將數(shù)據(jù)更新到瀏覽器頁面的具體位置：
通過設(shè)置給Ajax引擎的回調(diào)函數(shù)獲取服務(wù)器響應(yīng)的數(shù)據(jù)
使用JavaScript在指定的位置，顯示響應(yīng)的數(shù)據(jù)，從而局部修改頁面的數(shù)據(jù)，達(dá)到局部刷新的目的。

2.1js原生的Ajax：

js原生的Ajax開發(fā)步驟：
創(chuàng)建Ajax引擎對象
為Ajax引擎對象綁定監(jiān)聽（監(jiān)聽服務(wù)器已將數(shù)據(jù)響應(yīng)給引擎）
綁定提交地址
發(fā)送請求
監(jiān)聽里面處理響應(yīng)數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //同步請求點(diǎn)擊事件
        function sendRequest() {
            //js刷地址欄請求服務(wù)器端
            location.href = "Ajax1Servlet?name=admin&password=123abc";
        }
        
        //異步請求點(diǎn)擊事件
        function sendAsynRequest() {
            //1.創(chuàng)建ajax引擎對象
            var xmlHttp = new XMLHttpRequest();
            //2.設(shè)置回調(diào)函數(shù)，目的是處理服務(wù)器完全返回的數(shù)據(jù)
            xmlHttp.onreadystatechange = function () {
                /**
                 * 這個(gè)回調(diào)函數(shù)什么調(diào)用呢？是ajax引擎對象與服務(wù)器通信狀態(tài)碼改變的時(shí)候調(diào)用
                 * ajax引擎對象與服務(wù)器通信狀態(tài)碼xmlHttp.readystate，范圍0~4
                 * 0：請求未初始化
                 * 1：服務(wù)器連接已建立
                 * 2：請求已接收
                 * 3：請求處理中
                 * 4：請求已完成，且響應(yīng)已就緒
                 * 這個(gè)回調(diào)函數(shù)一共被調(diào)用4次，但只有狀態(tài)碼4的時(shí)候才代表服務(wù)器響應(yīng)完成數(shù)據(jù)完成。
                 * ajax引擎通信轉(zhuǎn)態(tài)碼為4和http通信轉(zhuǎn)態(tài)碼為200
                 */
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    //獲取響應(yīng)數(shù)據(jù)
                    var content = xmlHttp.responseText;
                    alert(content);
                }
            }
            //3.設(shè)置請求路徑和請求參數(shù)
            /**
             * xmlHttp.open(method,url)
             * method,請求方法，get或post請求
             * url：請求路徑
             */
            xmlHttp.open("get","Ajax1Servlet?name=admin&psw=abc123");
            //4.發(fā)送請求
            xmlHttp.send();
        }
    </script>
</head>
<body>
<input type="button" value="發(fā)送同步請求" onclick="sendRequest();"/>
<input type="button" value="發(fā)送異步請求" onclick="sendAsynRequest();"/>
</body>
</html>

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變化過程：

ajax的介紹和使用

存有 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兩個(gè)條件就可以說明正確的獲取了服務(wù)器響應(yīng)。只有這兩個(gè)條件滿足，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)缺點(diǎn)：

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

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

以上就是ajax的介紹和使用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：ajax的介紹和使用
網(wǎng)頁網(wǎng)址：http://muchs.cn/article10/gjsido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站排名、網(wǎng)站導(dǎo)航、、微信公眾號(hào)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容