如果您的書籤甚至包含一個網絡開發博客，您無疑會知道，遠程腳本被吹捧為新的“網絡未來”。
儘管我感到一些人可能對此有些過分興奮，但最近發布了眾多使用遠程腳本的眾多備受矚目的Web應用程序，表明在創建無縫網絡應用程序中使用這些技術有一定的優勢，以及增強網頁功能。
>本文旨在為您介紹遠程腳本的基礎，尤其是新興的XMLHTTTPREQUEST協議。然後，我們將瀏覽一個示例應用程序，該應用程序演示瞭如何在創建可用界面時實現該協議。開始，下載代碼存檔，其中包含您需要創建工作示例所需的所有文件。
鑰匙要點
>但是，除了創建新的Web體驗的能力外，遠程腳本還使我們能夠創造新的無法使用的網絡體驗。遠程腳本和無縫應用程序帶來了桌面應用程序設計領域的許多問題，使網絡上的相同問題成為可能。您有責任確保您的遠程腳本接口解決這些問題，並為您的用戶提供最佳的體驗。
遠程腳本和可訪問性>這是一種公認的最佳實踐，JavaScript交互和遠程腳本功能增加了基於Web的內容的基本功能：如果沒有這些技術，則必須訪問和可用。在完全露面的Web應用程序的情況下，為沒有JavaScript或遠程腳本功能的用戶提供完全不同的系統可能是可以接受的。 Gmail的團隊最近實施了服務的非在置，替代接口。
>使用xmlhttprequest遠程腳本
儘管XMLHTTPREQUEST是Internet Explorer XMLHTTPRequest API可供下載。 您也可以下載Mozilla文檔。
如果您需要對比這些年齡較大的瀏覽器的支持，則使用IFRAME的方法提供可行的解決方案；但是，為這些瀏覽器編碼還將限制您使用標準JavaScript DOM方法的能力。本文將重點介紹更現代的XMLHTTPREQUEST方法。
>創建xmlhttprequest對象
除了Internet Explorer之外，對於任何瀏覽器，我們都可以創建一個這樣的XMLHTTPREQUEST對象：但是，在Internet Explorer中，XMLHTTPREQUEST被實現為ActiveX對象。對於IE，創建一個對象：
>注意：這也意味著，如果用戶在Internet Explorer中禁用ActiveX對象，即使啟用了JavaScript，它們也將無法使用XMLHTTPRequest。 為了應對這些瀏覽器使用的對象創建語法的差異，最好使用try/catch結構自動為您提供正確的對象，或者如果沒有XMLHTTTPRequest對象，則返回錯誤
var requester = new XMLHttpRequest();
使用xmlhttprequest對像傳輸數據
> URL可以是相對的或絕對的，但是由於跨域安全問題，目標必須與請求該的頁面相同的域名。
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
>
>一旦開放（）已用於初始化連接，send（）方法會激活連接並提出請求。 send（）採用一個參數，允許我們與呼叫一起發送額外的數據，例如CGI變量。 Internet Explorer將其視為可選的，但是Mozilla將返回錯誤，如果沒有值任何值，因此使用以下方式調用它是最安全的：
>要使用GET Request方法發送CGI變量，我們必須將變量編碼為open（）url：
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
requester.open("GET", "/feed.xml");requester.send(null);
0 - 非初始化
1個 - 加載
var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
> 在xmlhttprequest對象
中解析數據
responsexml存儲一個由對象檢索的任何XML數據的圓頂結構化對象。使用標準JavaScript DOM訪問方法和屬性，例如getElementsBytagName（），childnodes []和parentnode。
>
為了演示如何在遠程腳本應用程序中使用xmlhttprequest協議，我創建了一個簡單的一頁示例。它假設可以使用JavaScript和XMLHTTPRequest，以使代碼更可讀，但是在任何現實世界中，您應該始終檢查XMLHTTPRequest是否可用，並具有後備（即正常表單提交），而不是。 >示例應用程序將允許用戶將免費的ecard發送到朋友的電子郵件地址。為此，用戶首先要輸入收據號碼，他們之前購買了商品時收到的收據，此後已存儲在Exippleco數據庫中。然後，用戶必須在發送eCARD之前完成剩餘字段，並輸入收件人的電子郵件地址，消息和將用於卡的圖形圖像： >
>該示例是在兩個單獨的版本中創建的。這些版本中的第一個證明了在應用程序內實現XMLHTTPRequest協議，但它包含了幾個不可避免的可用性問題。這些問題在第二個示例中解決了，該示例旨在突出一些從基於頁面的應用程序模型轉向更具動態和交互式環境時可能遇到的一些問題。 >示例1：實現xmlhttprequest >您可以從本文第一部分中識別一些該語法，即分叉的嘗試/捕獲結構，以及OPEN（）和SEND（）和SEND（）控制XMLHTTPRequest對象的方法。 >第一個if語句檢查檢查是否已經存在XMLHTTPREQUEST對象並且當前正在運行；如果是這樣，它將中止該連接。這確保了許多相互衝突的XMLHTTPRequest調用不會同時運行，這會阻塞網絡。然後，該功能繼續繼續，創建一個新的XMLHTTPRequest對象，並打開與服務器端驗證腳本的連接，Receipt.php。
在此示例中，已經使用了硬編碼的值和數據來簡化代碼，但是在現實世界中，此PHP腳本將對數據庫檢查收據號碼，並返回該數字的適當數據。
函數onreadystatatechangereceipt（）
/ *如果XMLHR對像已經完成了數據 */ >
{ 此功能首先檢查XMLHTTPREQUEST對象的ResponseText屬性，以查看收據號碼是否有效。如果有效，則數據將以XML格式進行，其第一個字符將是一個開頭的角度支架（> WitterEtails（）的執行標記了遠程腳本過程的結束，以進行收據號碼驗證。在現場設置的擴展有效屬性後，瀏覽器知道數據是否還可以，並且在用戶嘗試提交表單時可以提醒任何錯誤：
當此應用程序重寫幾乎整個頁面時，很容易看到如何使用遠程腳本更改DOM的特定部分，這將使應用程序接口的單獨部分獨立於網頁本身更新。
>示例2：創建一個可用的遠程腳本接口 遠程腳本模型與滲透到大多數網絡的標準互動量完全不同，並且隨之而來的是新的可用性陷阱，很容易將其引入您的項目中。這些陷阱通常是由於用戶訪問該界面的動態操縱而引起的，或者是訪問網頁外部數據的需要。
遠程腳本不是瞬時的。無論您的網絡連接速度如何，與外部源的通信時間都會有所不同。因此，當與服務器的通信發生時，必須告訴用戶他們為什麼等待。 （示例PHP腳本使用Sleep（）調用來突出網絡流量或其他因素可能引起的等待時間。
>在驗證收據號碼時，標籤顯示收據編號字段以解釋等待。
>遠程腳本操作完成後，消息將更新以告訴用戶收據號碼是否有效： >在上面的兩個代碼示例中，消息函數是一個自定義函數，該函數動態創建表單元素的狀態標籤，並在視覺上定位與相關元素相鄰。它還接受狀態標籤的類，該類允許使用CSS樣式以不同的方式應用，錯誤和完成消息： >
提示＃2：不要干擾用戶的交互 用戶對乾擾其任務完成的接口感到沮喪。在示例1中，此類干擾可能會在用戶輸入收據號碼之後發生：如果他們在驗證收據號碼之前開始填寫其姓名和電子郵件地址，則一旦從服務器收到用戶數據後，這些詳細信息將被覆蓋。 > 為了糾正這一點，示例2檢查用戶是否已更改腳本輸入任何數據之前的文本字段的值。頁面加載時可以檢測到文本字段的默認值，並使用自定義域錄製：
>其他一些常見的干擾案例，您應該避免在用戶填寫另一個字段時將光標移至字段，並將用戶鎖定在接口中（這就是為什麼XMLHTTPRequest不應使用XMLHTTPREQUEST使用）。
提示＃3：早點捕獲錯誤，但不是太早 >
>最好在發生時立即捕獲錯誤。當前在Web上出現的許多表格都取決於用戶在使用服務器端腳本或Inelegant JavaScript警報顯示任何表單錯誤之前提交表單（如示例1）。這些方法對用戶有幾個缺點：
提交表單的過程佔用用戶的時間。 事件觸發的函數可以檢查字段，並確保其包含的數據對該數據類型有效： 提示＃4：讓用戶知道何時修復了錯誤 >一旦發現字段是不正確的，並且已經警告了該錯誤，同樣重要的是要讓用戶知道他或她將其更改為正確的情況，否則用戶將再次被困在表單提交週期中。
在這種情況下，等待瀏覽器的Onchange事件要觸發的不足，因為通常只有在用戶轉化表單元素時才會發生這種情況。因此，最好使用onkeyup事件檢查已知不正確的字段的正確性：
這些方案無法捕獲跳過強制性字段的情況，因此，最好允許用戶提交不完整的表格，因為這允許該程序準確地強調需要完成的內容，而不是搜索尚未填寫的詳細信息。
創建無縫的Web應用程序可以讓您探索在瀏覽器中尚未看到的新功能，但是這樣做，我們仍然必須記住可用界面設計的基礎。這樣的基礎之一就是提供接口反饋：讓用戶知道他們可以做什麼以及他們做了什麼。 >
在示例1中，尚不完全清楚用戶可以單擊Ecard圖形的縮略圖。如果我們對光標在任何給定時間放置的圖像給出灰色輪廓，則很容易抵消。
>儘管本文主要關注遠程腳本及其可用性問題的過程，但在創建無縫的Web應用程序時，也應考慮到可訪問性點。示例3是ECARD應用程序的更複雜的版本，它使用更強大的腳本和降級為沒有JavaScript或沒有XMLHTTPRequest的用戶訪問。掌握了上述技術後，您可能想看看這個最後的示例，並開始使您的應用程序確實很健壯。 經常詢問有關遠程腳本和Ajax 使用遠程腳本的安全含義是什麼？因此，至關重要的是要採取適當的安全措施，例如輸入驗證和輸出編碼，以防止這些威脅。 使用AJAX比傳統的遠程腳本相比，使用AJAX有哪些好處？ 可以將遠程腳本用於移動應用程序嗎？ > > 由於其異步性質而調試遠程拼寫代碼可能會具有挑戰性。但是，現代網絡瀏覽器提供可以提供幫助的開發人員工具。這些工具允許您檢查網絡請求，查看控制台日誌並逐步瀏覽代碼以識別和修復問題。 >根據數據的複雜性，將數據簡單地作為純文本字符串返回可能會更容易，從而使XML在XMLHTTPRequest中冗餘。但是，對於更複雜的數據類型，您可能需要使用XML格式，例如：
>
我們能夠使用標準DOM訪問方法訪問數據的不同部分。請記住，標籤之間包含的數據被認為表示父母的子文本節點，因此，當我們檢索數據時，我們必須考慮到額外的結構層：
我們還必須謹慎對待空格：XML文件中的縮進值可能會在該值中產生不必要的whitespace，或添加其他文本節點。
>一旦我們從xmlhttprequest對像中解析了數據後，我們可以隨意更改，刪除並將其寫入我們的網頁上，因為我們看到了合適的！
在此示例中，>最小化收據號碼驗證的等待時間
>遠程檢查數據的第一步是知道何時將值輸入收據編號字段。可以使用該字段的Onchange事件處理程序檢測到這。每當用戶修改文本字段的值，然後“模糊”遠離該字段時，就會註冊文本字段上的“更改”（即它們選項卡或單擊它）。通常，這很好地表明用戶已經完成了該字段，並且可以處理其中包含的數據。通過捕獲此Onchange事件，我們可以告訴我們的腳本開始驗證該字段的內容：
var requester = new XMLHttpRequest();
/ *如果成功檢索數據 */
if（requester.status == 200）
>
{
writedetails（）;
}
/ * IE在某些情況
否則if（requester.status！= 0）
{
（“檢索URL時出現錯誤：” requester.statustext）;
}
}
返回true;
}
返回成功的狀態代碼時，請調用WritedEtails（）。正是此功能解析返回的數據並確定該如何在網頁上做什麼：var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");
try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
requester.open("GET", "/feed.xml");
標籤更改以指示完成後完成後完成的。 
在XMLHTTPREQUEST連接之前初始化狀態消息，當觸發收據號碼字段的OnChange事件時
var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");> JavaScript警報不會永久標記所有需要校正的字段。
var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
然後，這些事件處理程序可以更改每個圖像的類，並允許我們使用CSS提供視覺反饋：requester.open("GET", "/feed.xml");var requester = new XMLHttpRequest();
結論
在將所有這些更改進行示例1之後，示例2變成了一個更有幫助和可用的應用程序。 
>這裡提供的技巧中的共同主題始終是使用戶感到舒適和控制。如果用戶不具備所需的信息來了解發生了什麼，他們將以逮捕的方式查看您的應用程序，其性能會受到影響。 > ajax和遠程腳本之間的主要區別是什麼？
ajax（異步JavaScript和XML）和遠程腳本都是用於創建交互式Web應用程序的技術。主要區別在於它們如何處理數據。 Ajax使用XML發送和接收數據，而遠程腳本可以使用任何數據格式，包括XML，JSON或純文本。 AJAX是遠程腳本的特定實現，這是一個更廣泛的概念。 是的，而JavaScript則可以使用JavaScript，而JavaScript是由於其通用瀏覽器支持的最常用語言，例如，其他語言也可以使用。其他語言也可以使用。但是，語言的選擇取決於用戶瀏覽器的客戶端功能。
>遠程腳本如何使用HTTP請求來處理數據傳輸？它將請求發送到服務器，該請求處理請求並寄迴響應。然後，客戶端腳本處理此響應，以更新網頁而沒有完整頁面重新加載。
ajax ajax提供了比傳統的遠程腳本相比的幾個好處。它允許異步數據交換，這意味著用戶可以在服務器處理請求時繼續與頁面進行交互。 AJAX還支持XML數據格式，該格式比純文本更結構化，更易於處理。
>
有哪些用於遠程腳本的常見用例？ >
>實現遠程腳本的一些最佳實踐是什麼？
>>優雅地處理錯誤；優化腳本以進行性能；實施適當的安全措施；並在各種瀏覽器中測試腳本以確保兼容性。 >
以上是AJAX：與遠程腳本的可用互動性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
