這篇文章將為大家詳細講解有關ajax是什么意思及應用場景,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
公司主營業(yè)務:網站建設、成都網站建設、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出清河免費做網站回饋大家。
1.1 什么是ajax:
- Ajax即“Asynchronous Javascript And XML”(異步JavaScript 和XML),是指一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術。Ajax=異步JavaScript和XML(標準通用標記語言的子集)。通過在后臺與服務器進行少量數(shù)據(jù)交換,Ajax可以使用網頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新(無刷新技術)。傳統(tǒng)的網頁(不使用Ajax)如果需要更新內容,必須重載整個網頁頁面。
1.2Ajax的應用場景:
1.2.1 檢查用戶名是否已被注冊:
很多站點的注冊頁面都具被自動檢測用戶名是否存在的友好提示,該功能整體頁面并沒有刷新,但仍然可以異步與服務器進行數(shù)據(jù)交換,查詢用戶輸入的用戶名是否存在數(shù)據(jù)庫。
1.2.2 省市級聯(lián)下拉框聯(lián)動:
很多站點都存在輸入用戶地址的操作,在完成地址輸入時,用戶所在的省份是下拉框,當選擇不同的省份時會出現(xiàn)不同市區(qū)的選擇,這就是最常見的省市聯(lián)動效果。
1.2.3 內容自動補全:
不管時專注于搜索的百度,還是站點內商品搜索的淘寶,都有搜索的功能,在i搜索框輸入查詢關鍵字時,整個頁面沒有刷新,但會根據(jù)關鍵字顯示相關查詢字條,這個過程是異步的。
百度的搜索補全功能:
淘寶的搜索補全功能:
1.3 同步方式與異步方式的區(qū)別:
- 同步方式發(fā)送請求:發(fā)送一個請求,需要等待響應返回,然后才能夠發(fā)送下一個請求,如果該請求沒有響應,不能發(fā)送下一個請求,客戶端會一直處于等待過程中。
- 異步方式發(fā)送請求:發(fā)送一個請求,不需要等待響應返回,隨時可以再發(fā)送下一個請求,即不需要等待。
1.4 Ajax的原理分析:
- AJAX引擎會在不刷新瀏覽器地址欄的情況下,發(fā)送異步請求:
- 使用JavaScript獲取瀏覽器內置的AJAX引擎(XMLHttpRequest對象)
- 使用js確定請求路徑和請求參數(shù)
- AJAX引擎對象根據(jù)請求路徑和請求參數(shù)進行發(fā)送請求
- 服務器接收到Ajax引擎的請求進行處理:
- 服務器獲得請求參數(shù)數(shù)據(jù)
- 服務器處理請求業(yè)務(調用業(yè)務層代碼)
- 服務器響應數(shù)據(jù)給Ajax引擎
- Ajax引擎獲得服務器響應的數(shù)據(jù),通過執(zhí)行JavaScript的回調函數(shù)將數(shù)據(jù)更新到瀏覽器頁面的具體位置:
- 通過設置給Ajax引擎的回調函數(shù)獲取服務器響應的數(shù)據(jù)
- 使用JavaScript在指定的位置,顯示響應的數(shù)據(jù),從而局部修改頁面的數(shù)據(jù),達到局部刷新的目的。
2.1js原生的Ajax:
- js原生的Ajax開發(fā)步驟:
創(chuàng)建Ajax引擎對象
為Ajax引擎對象綁定監(jiān)聽(監(jiān)聽服務器已將數(shù)據(jù)響應給引擎)
綁定提交地址
發(fā)送請求
監(jiān)聽里面處理響應數(shù)據(jù)
Title
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: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成,且響應已就緒
這里狀態(tài)值4只能說明接收到了服務器的響應服務器處理ajax請求結束,但是不能代表正確的獲取了服務器的響應,需要配合http狀態(tài)碼200兩個條件就可以說明正確的獲取了服務器響應。只有這兩個條件滿足,xmlhttp.responseText才可以獲取到正確的響應數(shù)據(jù)。
xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ if(xmlhttp.status == 200){ alert("響應數(shù)據(jù)" + xmlhttp.responseText); } } };
關于ajax是什么意思及應用場景就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。