ajax 导致 css 延迟_AJAX远离404

Ajax简单认识

Ajax简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax

Part 01

应该具备哪些知识

在继续学习之前，您需要对下面的知识有基本的了解：

HTML / XHTML

CSS

JavaScript / DOM

Part 02

什么是ajax

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容，必须重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等

图丨Ajax仿造

Part 03

Ajax优缺点

Ajax

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

对应用Ajax最主要的批评就是，它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，HTML5之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态)。

关于无法将状态加入收藏或书签的问题，HTML5之前的一种方式是使用URL片断标识符(通常被称为锚点，即URL中#后面的部分)来保持追踪，允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)HTML5以后可以直接操作浏览历史，并以字符串形式存储网页状态，将网页加入网页收藏夹或书签时状态会被隐形地保留。上述两个方法也可以同时解决无法后退的问题。

进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。如果不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到厌烦。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

过程原理

Part 04

发送Ajax请求的五个步骤

其实也就是 使用 XMLHttpRequest 对象的五个步骤。

请求的网址、请求方法get/post。

提交请求的内容数据、请求主体等。

接收响应回来的内容。

发送 Ajax 请求的五个步骤：

(1)创建异步对象。即 XMLHttpRequest 对象。

(2)设置请求的参数。包括：请求的方法、请求的url。

(3)发送请求。

(4)注册事件。onreadystatechange事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

(5)获取返回的数据

图2发送Ajax请求的五个步骤

Part 05

Ajax是基于现有的Internet标准

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)

JavaScript/DOM (信息显示/交互)

CSS (给数据定义样式)

XML (作为转换数据的格式)

AJAX应用程序与浏览器和平台无关的！

Part 06

Ajax的应用

     1.用户上传头像的预览功能；

　　2.注册，验证登录操作，比如用户名是否重复、登录密码是否错误等等；

　　3.主机管理系统中的编辑功能，例如删除某一行主机信息，会偷偷执行删除数据库相关操作，并删除该页上的数据Dom；

　　4.热点新闻的刷新、鼠标滚动刷新等；

　　5.等等；

图3原生Ajax

图4jquery的Ajax