What's Ajax?_sajax是谁的-CSDN博客

本文链接：https://blog.csdn.net/dickwin/article/details/570596

最近网上提的很多的一个新概念就是 AJAX 了, 那么, AJAX 是什么呢? 以下内容引用网上资料:

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术：

Ajax（Asynchronous JavaScript + XML）的定义

基于 web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

与传统的web应用比较

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

AJAX 是一个新出现的名词, 但是引用的这几项技术都是老的存在了很久的技术, 甚至, 最大为推崇的 XMLHttpRequest 也不是 W3C 规范的一部分, 而是浏览器很早就内置的一个 JavaScript 对象. 这里的这几个概念中, 目前所见到的最多的应用就是异步更新页面内容这个所说的亮点了. 其他的几个概念: XHTML + CSS, DOM, XML + XSLT, 都是做 WEB 表示层用的很熟很熟的几个技术了(当然, 用 JavaScript 解析 XML 可能用的人不多).

那么, 我就直奔主题: 怎么来用 AJAX 来解决实际的问题了. 现在依然不行, 因为关键的东西还不够. 如前所述, 异步操作的魔法就是 XMLHttpRequest 对象了, 这个对象怎样实现异步?? 那么首先让我们了解一下 XMLHttpRequest(see also The XMLHttpRequest Object).

首先 XMLHttpRequest 对象并非一个 W3C 标准, 它只是主要浏览器都支持的可以通过 JavaScript 在客户端访问其他 URL 内容的一个对象. 所以很不幸的您创建它的时候必须根据不同的浏览器来创建它(所谓的跨平台脚本编写):

在 Mozilla, Firefox, Safari, 和 Netscape 中:

var xmlhttp=new XMLHttpRequest()

在 Internet Explorer 中:

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

那么接下来最常用到的代码就像下面这样:

<script >
if (xmlhttp)
    {
    xmlhttp.onreadystatechange=xmlhttpChange;
    xmlhttp.open("GET","http://www.somehost.com/test.htm",true);
    xmlhttp.send();
    }
}

function xmlhttpChange()
{
  // if xmlhttp shows "loaded"
  if (xmlhttp.readyState==4)
  {
  // if "OK"
  if (xmlhttp.status==200)
    {
    // ...some code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

注意: 上面例子中一个很重要的属性就是 onreadystatechange, 可以讲这个就是异步处理的关键. 这个属性是一个事件处理器, 当网络请求的每次状态改变时这个方法都被触发. 状态码从 0 (uninitialized, 未初始化) 到 4 (complete, 完成). 通过在方法 xmlhttpChange() 中我们检查状态改变, 我们可以告诉什么时候连接完成并且只在 HTTP 操作成功(返回代码为 200)的时候来进行必要的处理.

为什么我们要在例子中使用异步操作?

所有的例子中我们都使用异步(async)模式 (open() 的第三个参数设置为 true). 异步模式参数指定请求时被异步处理与否. true 表示脚本将会在 send() 方法被调用后继续执行, 不需要等待服务器的返回; false 则表示脚本必须等到服务器返回一个请求后才能继续执行, 这时候将会有问题发生, 因为如果此时有网络或者服务器故障发生, 或者请求需要花费很长时间完成, 这时候浏览器窗口将会没有任何反应(常说的界面死掉), 甚至会出现"服务器没有返回"这样的错误, 所以为了更好的用户体验, 尽量使用异步模式来设计您的代码. open() 方法的第二个参数是 URL 地址,