AJAX初学知识

AJAX
异步链接服务器对象XMLHttpRequest，
Ajax的一些实例，
并对Ajax技术进行简单的分析。
1. 认识Ajax
Ajax（Asynchronous JavaScript and XML，异步JavaScript与XML）是相对较新的名字，通常被人们亲切的称作“阿贾克斯”
异步交互 VS 同步交互
- Ajax的组成部分
　 - JavaScript 用此写
　 - CSS 用此表现 present
　 - DOM 用此局部控制
　 - XMLHttpRequest 对象 异步链接服务器对象
2. XMLHttpRequest对象
- 异步对象链接服务器
　 - 创建
var xmlHttp
function creatXMLHttpRquest()
{ if(window.ActiveXObject)
xmlHttp=new window.ActiveXObject(“Microsoft.XMLHTTP ”);
else if(window.XMLHttpRuquest)
xmlHttp=new window.XMLHttpRuquest;
}
　 - 建立请求
xmlHttp.Open(“GET 方式”，“*.php 地址”，true 异步交互 （false 同步）);
xmlHttp.responseText
- 异步对象链接服务器
　 - onreadystatechange事件（发生请求之后）
判断异步对象和服务器之间交互状态的
xmlHttp.onreadystatechange=function() 当服务器状态发生变化时调用该函数
{if(xmlHttp.readystate==4&&xmlHttp.status==200) //do something}
xmlHttp.readystate==4 与服务器交互的状态 是否成功
xmlHttp.s tatus==200 服务器的准备状态
　 - send()发送
xmlHttp.send(null---GET);
- GET VS. POST
l GET
var queryString = “firstName=issac&birthday=0624”;
var url=”9-3.aspx?” +queryString+”&timestamp=” + new Date().getTime();
xmlHttp.open(“GET” ,url) ; //防止ie缓存，欺骗浏览器强制刷新
xmlHttp.send(null); //该语句负责发送数据 GET方式用null，参数都再url中
l POST
var queryString = “firstName=issac&birthday=0624”;
var url=”9-3.aspx?timestamp=” + new Date().getTime();
xmlHttp.open(“POST” ,url) ;
xmlHttp.setRuequestHeader(“Content-Type”, ”application/x-www-form-urlencoded”);//POST必须重置头部，------表单提交的形式
xmlHttp.send(querString); //该语句负责发送数据
encodeURI(encodeURI(queryString)); 编码适应中文需求 两次编码解决中文乱码
serverResponse
decodeURI -----解码
例如：responseDiv.innerHTML= decodeURI(xmlHTTP.responseText); 服务器返回放于innerHTML；

优点：

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

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

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

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

缺点：

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

一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。

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

一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax;

用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事;

Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;

对串流媒体的支持没有FLASH、Java Applet好;

原文地址：http://blog.sina.cn/dpool/blog/s/blog_5b4b7ab10100bq1g.html?md=gd