建站
咨詢
售后
建站咨詢
新聞中心
前言
成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、成都網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)大安市,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792
Ajax是Asynchronous JavaScript and XML的縮寫，是JavaScript、XML、CSS、DOM等多個技術(shù)的組合。Ajax的工作原理是一個頁面的指定位置可以加載另一個頁面所有的輸出內(nèi)容，這樣就實現(xiàn)了一個靜態(tài)頁面也能獲取到數(shù)據(jù)庫中的返回數(shù)據(jù)信息了。所以Ajax技術(shù)實現(xiàn)了一個靜態(tài)網(wǎng)頁在不刷新整個頁面的情況下與服務(wù)器通信，減少了用戶等待時間，同時也降低了網(wǎng)絡(luò)流量，增強了客戶體驗的友好程度。本文將為大家詳細介紹關(guān)于Ajax的工作原理以及實現(xiàn)步驟。
1. Ajax的概念?
「以前瀏覽器如何實現(xiàn)通信呢：」
Jsp頁面發(fā)送請求--->servlet進行接收--->數(shù)據(jù)放到域?qū)ο?-->轉(zhuǎn)發(fā)給jsp頁面
同步的發(fā)送請求：這個請求的特點，我們每一次的轉(zhuǎn)發(fā)，瀏覽器都要重新渲染整個頁面、假設(shè)我的頁面有100k的數(shù)據(jù)，只有1k的數(shù)據(jù)需要刷新，如果使用轉(zhuǎn)發(fā)的方式的話那么每一次渲染的數(shù)據(jù)都是100k，這樣瀏覽器的渲染壓力就變大了
「Ajax技術(shù)實現(xiàn)通信：」
引入Ajax：假設(shè)我們使用了Ajax的技術(shù)的話，那么我們這100k的數(shù)據(jù)我們有99k的數(shù)據(jù)都不需要刷新，只是需要刷新這1k的數(shù)據(jù)，這就是Ajax
在一開始的時候，所有的瀏覽器并不支持所謂的局部刷新技術(shù)，而且一開始大多數(shù)的瀏覽器并不看好這門技術(shù)，這個時候微軟首先就在IE瀏覽器中引入了異步請求的這個概念，到后來看到了Ajax在瀏覽器上的優(yōu)秀表現(xiàn)，于是其他的瀏覽器廠商也就引入了Ajax這個技術(shù)
含義：Ajax是用于網(wǎng)頁上面進行局部刷新的一門技術(shù)
2、Ajax技術(shù)的優(yōu)缺點
「Ajax技術(shù)優(yōu)點：」
- 核心技術(shù)：Ajax的核心技術(shù)是XMLHttpRequest，它是JavaScript中的一個對象
- 減輕了服務(wù)器端負擔，將一部分以前由服務(wù)器負擔的工作轉(zhuǎn)移到客戶端執(zhí)行，利用客戶端閑置的資源進行處理
- 在只局部刷新的情況下更新頁面，增加了頁面反應(yīng)速度，使用戶體驗更友好
「Ajax技術(shù)缺點：」
- Ajax的缺點是不利于SEO推廣優(yōu)化，因為搜索引擎無法直接訪問到Ajax請求的內(nèi)容
3、Ajax技術(shù)能干嘛?
「主要作用：」
- 發(fā)送同步或者異步請求
- 進行網(wǎng)頁的局部刷新
- 下拉列表的數(shù)據(jù)來源于服務(wù)器的這種
- 做前后分離的開發(fā)
- 表單元素的動態(tài)認證
4、Ajax技術(shù)的具體使用
「使用步驟：」
創(chuàng)建獲取Ajax對象的方法
- function getAjax () {
- var ajax;
- try{
- ajax=new ActiveXObject("microsoft.xmlhttp");
- }catch(e){
- try{
- ajax=new XMLHttpRequest();
- }catch(e){
- alert('異步都沒有 換瀏覽器吧....');
- }
- }
- return ajax;
- }
獲取Ajax對象
- var ajax=getAjax();
準備發(fā)送Ajax請求
- ajax.open("GET","${pageContext.request.contextPath}/dates.action");
發(fā)送Ajax請求
- ajax.send(null);
監(jiān)聽Ajax中4種狀態(tài)
- ajax.onreadystatechange=function(){
- if(ajax.readyState==4){ /
- }
- }
判斷服務(wù)器是否成功響應(yīng)
- if(ajax.status==200){//說明服務(wù)器的響應(yīng)是正確的
- var time=ajax.responseText;
- //要將這個數(shù)據(jù)直接賦值給一個一個標簽
- document.getElementsByTagName('span')[0].innerText=time;
- }
Get方法數(shù)據(jù)傳輸（放到url后面）
- ajax.open("GET","${pageContext.request.contextPath}/dates.action?userName=qianyu&password=123");
Post方式發(fā)送請求和數(shù)據(jù)
- //設(shè)置請求頭
- ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- //發(fā)送數(shù)據(jù)
- ajax.send("userName=qianyu&password=123");
結(jié)語
本篇關(guān)于Ajax的介紹就先到這里結(jié)束了，后續(xù)會出更多關(guān)于Ajax系列更多文章，謝謝大家支持!
分享題目：異步編程｜五分鐘讓你學會局部刷新Ajax技術(shù)
分享URL：http://www.dlmjj.cn/article/dhesioe.html
