解决方案到5个常见的ajax问题

WebDesignerDepot员工 By WDD员工  |  2009年12月14日

没有考虑的现代Web开发人员 ajax. 在规划或构建网站时,可能会在强大的工具上遗漏以提高可用性。

但是,在网页上实现AJAX功能的挑战。

在这篇文章中我们’ll discuss 解决方案到最常见的五个挑战 开发人员在使用AJAX时面临增强其网站上的内容。

虽然对所有五个主题讨论和研究有很多更多的讨论和研究,但这篇文章应该给初学者和中级球彩开发人员一些关于实现球彩功能的统一提示 用户友好和可访问的方式.

 

问题#1:内容不向后兼容

当设计者将JavaScript和球彩增强功能纳入其网站时,会发生此问题’S架构而不为已禁用JavaScript的浏览器进行规定。

规划一个网站与JavaScript和球彩的网站没有错;事实上,在今天’S市场,JavaScript注意事项应该是规划过程的一体化。但是,您仍然应该确保在发布后向后兼容(或者它优雅地降级)。

解决方案:将AJAX实现为已运行网站的增强

虽然球彩可能是您对网站规划的一体化’S架构,确保通过传统的服务器端方法可以访问所有内容。

让’s say you have an “Employee Information” 为每个员工提供单独链接的页面。使用服务器端技术,您可以根据通过查询字符串传递的值显示特定员工的内容,如下所示:

<a href="employees?view=CEO">John Doe - CEO</a>
<a href="employees?view=VP">Frank Smith - Vice President</a>
<a href="employees?view=Accountant">Jim Williams - Accountant</a>

上面的所有链接点到同一页面, “Employees” 页面,根据查询字符串中的变量进行更改。每个员工’S信息将从服务器加载,可以通过多种方式完成:通过服务器端包括;通过数据库;甚至使用XML。

只要单击任何员工链接,整页将必须加载以进行要传递的请求的信息。

因此,在顶部分层任何球彩增强功能之前,内容都可以完全访问。然后,使用JavaScript,可以中断完整页面刷新并通过球彩加载的内容。可以通过id或通过检查锚点中的href属性的值来标识单击链接。

虽然禁用JavaScript的内容是完全访问的,但大多数用户将看到增强的球彩驱动版本。

ajax. 的逐渐增强原则是众所周知的,因为它通常用于不引人注目的JavaScript技术,并且是CSS中固有的,如下面的图形所示:

ajax作为群体层

因此,在没有JavaScript的情况下建立您的网站上班,然后将JavaScript添加为增强,就像您在HTML中标记您的内容然后 “enhance” it with CSS.

 

问题#2:浏览器’S加载指示符ISN’T由球彩请求触发

几乎每个浏览器都有一种方法可以在视觉上向用户提供内容加载。在当前浏览器中,指示符显示在选项卡上’加载内容。

下面的图像显示了来自一些流行浏览器的此动画指示器。

即浏览器加载
IE浏览器’S加载指示器是一个坚固的圆圈,梯度旋转,而内容负载。


Firefox浏览器加载
Firefox在不同的灰色阴影中显示一个类似的小旋转圆圈的图标。


Chrome浏览器加载
谷歌镀铬旋转半圆。

问题是球彩请求不会触发此问题“loading”浏览器内置的指示符。


解决方案:在内容附近插入类似的加载指示灯’s Loading

常见解决方案是将自定义进度指示符合并到AJAX请求中。许多网站提供免费“球彩 loading” graphics.

 preloader.net.
preloaders.net. 有许多花式,可自定义的动画图形可供选择。

将此自定义加载图形或进度指示符实现到您的网站中’S 球彩功能只是通过JavaScript在适当的时间显示和隐藏它的问题。

您的AJAX代码将包括代码行,告诉您请求是否正在进行或完成。使用JavaScript,您可以在处理请求时显示动画图形,然后在操作完成时隐藏它。

 

问题#3:用户没有’知道AJAX请求已完成

这与前一个问题有关,但经常被忽视,因为开发人员可能会假设的消失 “loading” 指示符足以通知用户内容已完全加载。但在大多数情况下,明确地表明内容已经更好或刷新更好。

解决方案:使用一个不同的“Request Completed” Message

这可以类似于如何确认表单提交的方式。提交了链接后 掘客 ,该页面让您清楚地知道您的提交已收到:

 掘客 的表格提交了指标

虽然这个特殊的指标没有指出完成的AJAX请求,但原则是一样的: “Success” 在提交表单的页面后出现框,该表单已完成加载,并且盒子是色彩缤纷的,截然不同。

在球彩请求结束时可以使用类似的图形或指示器告诉用户内容已更新。除了以前问题提出的进度指标之外,这将实现这一点。

一种类似但subtler的方式,表明已经更新了内容区域是 黄色褪色技术。此方法对用户熟悉,不引人注目,与球彩加载的内容良好。

 

问题#4:球彩请求无法访问第三方Web服务

The XMLHttpRequest object, which is at the root of all 球彩 requests, is restricted to making requests on the same domain as the page making the request. But there are instances when you would want to access third-party data via an 球彩 request. Many web services make their data accessible via an API.

解决方案:使用您的服务器作为代理

此问题的解决方案是将您的服务器用作第三方服务和浏览器之间的代理。虽然这种解决方案的细节远远超出了本文的范围,但我们’LL覆盖工作的基本原则。

因为球彩请求源于客户端’s浏览器,它必须在另一个位置引用文件,但在与请求的源相同的域中。

但是,您的服务器不像客户端’浏览器,不受这种方式受到限制。因此,当调用服务器上的页面时,它将在后台运行,因为它通常才能访问任何域。

这一点’T对用户展示了任何安全风险,因为您的服务器上的第三方服务的请求。因此,一旦在服务器级别获得了信息,球彩调用中的下一步就是将响应发送回客户端,在这种情况下包括从第三方Web服务获得的数据。

使用您的服务器作为访问Web服务的代理

如果您希望有关使用自定义球彩的Web-Service访问权限的这种强大方法的详细信息,请肯定检查其他资源,其中一些资源如下所示。

进一步阅读:

 

问题#5:无法使用深度链接

这是一个棘手的问题,但根据您的网站或应用程序,可能不需要。通过ajax加载内容时,会出现此问题“state”在网站的内容中没有将指向受影响的页面的URL更改。

如果用户通过书签返回页面或与朋友共享链接,则不会自动显示更新的内容。该网站将恢复到原始状态。 Flash网站用于具有相同的问题:它们不允许用户链接到初始屏幕之外的任何内容。

解决方案:使用内部页面锚点

确保特定的“state”在球彩驱动的网页上是可链接和书签的,您可以使用内部页面链接,该链接修改URL但DON’T刷新页面或影响其垂直位置。

这个简单的代码演示了如何完成:

var currentAnchor = document.location;
currentAnchor = String(currentAnchor);
currentAnchor = currentAnchor.split("#");

if (currentAnchor.length > 1) {
	currentAnchor = currentAnchor[1];
} else {
	currentAnchor = currentAnchor[0];
}

switch(currentAnchor) {
	case "section1":
	// load content for section 1
	break;

	case "section2":
	// load content for section 2
	break;

	case "section3":
	// load content for section 3
	break;

	default:
	// load content for section 1
	break;
}

以上不是一个功能的代码,而是一个理论示例,以演示所涉及的主要步骤。

前两行代码将当前页面位置(URL)放在变量中。然后将位置转换为字符串,以便我们可以操纵它。

接下来,我们“split”通过锚符号(#)将字符串分为两部分,然后检查从拆分创建的数组是否大于一个项目。大于一个项目意味着URL有一个锚。

如果URL只有一个部分,则表示没有锚点。随后“switch”语句根据锚的值加载内容。交换机语句有一个“default”如果没有锚点的情况下,则选项将与其原始状态加载页面相同。

此外,我们将应用代码来处理通过内部锚点直接指向特定内容的链接。指出的链接“content2”会加载内容“content2,” and the string “#content2”将附加到当前的URL。

这将通过添加内部锚来更改URL,而无需更改页面的视图,但保留指示页面所需状态的标识符。

这种解释只是理论。这个概念有效,它很好。但我没有’T以这种方式解释了构建网站或页面的所有可能性,缺点和其他微妙之处。

请按照以下链接进行更全面的讨论该主题,或自行实验。此外,请注意,可以使用单独使用JavaScript的内容进行测试,并不是测试’T需要利用球彩。

 

进一步阅读:


这篇文章是由Louis Lazaris,自由作家和Web开发人员提供的WebDesigner仓库。路易斯跑了 令人印象深刻的网球,他在网页设计上发布文章和教程。你可以关注路易斯 在推特上 或与他联系 通过他的网站.

您是否知道这些或其他球彩挑战的任何解决方案?请在下面分享你的评论…