如果您的书签甚至包含一个网络开发博客，您无疑会知道，远程脚本被吹捧为新的“网络未来”。
尽管我感到一些人可能对此有些过分兴奋，但最近发布了众多使用远程脚本的众多备受瞩目的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中文网其他相关文章！
