2016-08-20 分類: 解決方案
現(xiàn)代的Web開發(fā)人員不考慮Ajax在規(guī)劃或建設(shè)自己的網(wǎng)站,可能是錯過了一個強大的工具來提高可用性。
在網(wǎng)頁設(shè)計上實現(xiàn)Ajax功能的挑戰(zhàn),5個常見的Ajax問題的解決方案
在這篇文章中我們將討論解決成都網(wǎng)站設(shè)計五個最常見的挑戰(zhàn),使用Ajax增強內(nèi)容在網(wǎng)站上,雖然有很多討論和研究所有五個話題,這個職位應(yīng)該給初學(xué)者和中級Ajax開發(fā)者一些堅實的技巧實現(xiàn)Ajax功能更方便和易于理解的方式。
問題1:#內(nèi)容不向后兼容
出現(xiàn)此問題時,設(shè)計師已經(jīng)將JavaScript和Ajax增強到他們網(wǎng)站的架構(gòu)沒有為已禁用JavaScript的瀏覽器規(guī)定。
什么是JavaScript和Ajax網(wǎng)站的錯誤,JavaScript的考慮應(yīng)該是規(guī)劃過程的組成。但你還是應(yīng)該確保網(wǎng)站是向后兼容。
解決方案:實現(xiàn)Ajax作為增強一個已經(jīng)運作的網(wǎng)站
雖然Ajax可能對你的網(wǎng)站的整體的架構(gòu)規(guī)劃,確保所有內(nèi)容都可以通過常規(guī)的服務(wù)器端方法。
讓我們說你有一個“員工信息”頁面,有一個單獨的鏈路為每個員工。使用服務(wù)器端的技術(shù),你可以顯示一個基于通過查詢字符串的值的特定員工的內(nèi)容,這樣:
所有上面的鏈接指向同一個頁面,在“員工”的網(wǎng)頁,并根據(jù)變化的變量在查詢字符串。每個員工的信息將從服務(wù)器加載,可以做多種途徑:通過服務(wù)器端;通過數(shù)據(jù)庫;甚至使用XML。
無論員工鏈接被點擊時,頁面會加載為請求的信息被傳遞。
因此,在任何Ajax增強層之上的內(nèi)容是完全可以的。然后,使用JavaScript,全頁面刷新可以中斷和內(nèi)容而不是通過AJAX加載。點擊鏈接可以通過ID或通過檢查在錨href屬性的值確定。
雖然內(nèi)容是完全可以禁用javascript,大多數(shù)用戶會看到增強的AJAX驅(qū)動版本。
對Ajax的漸進增強的原則是眾所周知的,因為它是常用的JavaScript技術(shù)和固有的CSS,由下圖所示:
因此,建立你的網(wǎng)站沒有JavaScript,然后添加JavaScript作為一種增強,就像你將你的HTML內(nèi)容,然后“增強”與CSS。
問題2:#瀏覽器加載指示器不通過Ajax請求觸發(fā)
幾乎所有的瀏覽器有一種直觀的顯示給用戶的內(nèi)容是加載。在當(dāng)前的瀏覽器,指示出現(xiàn)在標(biāo)簽的加載內(nèi)容。
下面的圖像顯示,這部動畫的指標(biāo)從幾個流行的瀏覽器。
問題是,Ajax請求不會觸發(fā)這個“加載”指標(biāo),內(nèi)置的瀏覽器。
解決方法:插入一個類似的負(fù)荷指標(biāo)接近的內(nèi)容,加載
這種常見的解決方案是將一個自定義進度指示器為Ajax請求。許多網(wǎng)站提供免費的“加載”的圖形。
實現(xiàn)自定義加載圖形,或進步的指標(biāo),為你的網(wǎng)站的Ajax功能只是一件簡單的顯示和隱藏它在適當(dāng)?shù)臅r候通過JavaScript。
Ajax代碼將包括代碼行,告訴你如果請求是在進步或完成。使用JavaScript,你可以顯示動畫圖形而請求被處理后,把它藏在動作已經(jīng)完成。
問題3:#用戶不知道一個Ajax請求完成
這與以前的問題卻往往被忽視,因為開發(fā)人員可能會認(rèn)為消失的“加載”指標(biāo)可以通知用戶的內(nèi)容已經(jīng)完全加載。但在大多數(shù)情況下,它顯示的內(nèi)容已經(jīng)更新或刷新更好。
解決方案:使用一個獨特的“請求完成”的消息
這可以通過類似于表單提交確認(rèn)。在聯(lián)系已經(jīng)提交掘客的頁面,讓你知道得很清楚,你的提交已收到:
Digg的形式提交指示器
雖然這個指標(biāo)沒有指出完成Ajax請求,原則是一樣的:“成功”的對話框出現(xiàn)后,提交表單的頁面加載完成,和盒子是豐富多彩的,不同的。
一個類似的圖形或指標(biāo)可以用來在一個Ajax請求告訴用戶的內(nèi)容已經(jīng)更新結(jié)束。這是除了實施,而不是以前的問題,提出了進度指示器。
一個類似但微妙的方式表明,一個區(qū)域的內(nèi)容已經(jīng)更新為黃褪技術(shù)。這種方法是為用戶所熟悉,而工程與Ajax加載內(nèi)容。
問題4:# Ajax請求無法訪問第三方網(wǎng)站的服務(wù)
這個對象對象,這是在所有的Ajax請求的根,是限制要求在同一域為發(fā)出請求的頁面。但有時當(dāng)你想通過一個Ajax請求的訪問第三方數(shù)據(jù)。許多Web服務(wù)使他們的數(shù)據(jù)可以通過一個API。
解決方案:使用你的服務(wù)器作為代理
解決這個問題的辦法是使用你的服務(wù)器和瀏覽器之間的第三方服務(wù)代理。雖然該方案的細(xì)節(jié)遠(yuǎn)遠(yuǎn)超出了本文的范圍,我們會去的基本原理在起作用。
因為一個Ajax請求來自客戶端的瀏覽器,它必須參考文件在另一位置,但在同一個域作為請求的源。
您的服務(wù)器,但不同于客戶端的瀏覽器,不是以這種方式限制。所以,當(dāng)你的服務(wù)器上的頁面被調(diào)用,它在后臺運行,因為它通常會同時訪問任何域。
這不存在任何安全隱患的用戶因為第三方服務(wù)的請求是在您的服務(wù)器上。所以,一旦信息被服務(wù)器級的獲得,在Ajax調(diào)用的下一步是把響應(yīng)返回給客戶端,這將包括從第三方的Web服務(wù)中獲得的數(shù)據(jù)。
問題5:#深層鏈接不可用
這是一個棘手的問題,但不可能取決于你的網(wǎng)站或應(yīng)用程序類型的要求。發(fā)生問題時,內(nèi)容是通過AJAX加載,那么“國家”的網(wǎng)站是沒有指向的頁面的URL改變的影響。
如果用戶返回到頁面通過書簽或與朋友分享的鏈接,更新的內(nèi)容將不會自動顯示。該網(wǎng)站將恢復(fù)到原來的狀態(tài)。Flash網(wǎng)站曾經(jīng)有過同樣的問題:他們不允許用戶鏈接到任何但初始屏幕。
解決方案:使用內(nèi)部頁面的錨
確保一個特定的“國家”一個AJAX驅(qū)動網(wǎng)頁鏈接和書簽的,你可以用內(nèi)頁鏈接,修改URL而不刷新頁面或影響其垂直位置。
這個簡單的代碼演示了如何做到這:
無功currentanchor =文件位置;
currentanchor =字符串(currentanchor);
currentanchor = currentanchor。分裂(“#”);
如果(currentanchor.length > 1){
currentanchor = currentanchor [ 1 ];
} {
其他
currentanchor = currentanchor [ 0 ];
}
開關(guān)(currentanchor){
案”第一節(jié)“:
/負(fù)載的內(nèi)容1節(jié)
打破;
案”“”:
/負(fù)載的內(nèi)容2節(jié)
打破;
案例“節(jié)”:
以上是不是一個功能塊代碼,而是一個理論的例子來證明所涉及的主要步驟。
代碼的前兩行把當(dāng)前頁面位置(URL)中的一個變量。然后,位置轉(zhuǎn)換為字符串,我們可以操縱它。
接下來,我們“分裂”串成兩部分通過錨標(biāo)記(#)和隨后查看陣列,從分裂創(chuàng)造大于一項。大于一項意味著URL的錨。
如果URL只有一部分,這意味著沒有錨的存在。隨后的“開關(guān)”聲明載內(nèi)容根據(jù)錨定值。switch語句中有一個“默認(rèn)”選項,如果沒有錨的存在,這將是在其原始狀態(tài)加載頁面相同。
此外,我們將代碼來處理鏈接,直接指向具體內(nèi)容通過內(nèi)部錨。一個鏈接,指向“內(nèi)容”將在“內(nèi)容的內(nèi)容加載,“串”#內(nèi)容”將被附加到當(dāng)前頁面的URL。
這將添加一個內(nèi)部錨改變URL,不改變頁面視圖但保留一個標(biāo)識符,表示該頁所需的狀態(tài)。
這種解釋只是理論。作品的概念,它工作得很好。但我沒有說所有的可能性,缺點和其他微妙的這樣一個網(wǎng)站或網(wǎng)頁建設(shè)。
遵循一個更全面的專題討論,下面的鏈接,或嘗試它自己。另外,請注意,這可以使用的內(nèi)容,改變與JavaScript單獨測試,而不需要利用Ajax。
創(chuàng)新互聯(lián)設(shè)計文章推薦:
晉寧網(wǎng)站制作、晉寧企業(yè)網(wǎng)站制作
本文題目:5個常見的Ajax問題的解決方案
URL鏈接:http://m.rwnh.cn/news25/21025.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有解決方案等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容