nioffer\'life on web

实体和dom内核

ajax tutorial (Asynchronous javascript and xml)
1. 简要历史
ajax只是以前早已存在的一组工具的名称。
主要部分是XMLHttpRequest,javascript 中一个很有用的类。它应用在internet explorer 4.0 以上版本。
在ajax名称变得普遍使用之前，相同概念的XMLHTTP命名也被使用几次。
google 2005在gmail和googlemaps中使用xmlhttprequest有助于这种这种技术的成功，但是还是ajax本身自己的技术让它自己这么流行。
2. 为什么使用ajax
主要为了建立一个快速，动态的站点，也为了节约资源。
为了改善资源的共享，最好是利用客户机电脑的能力而不是仅仅依靠单独的服务器和网络。ajax 允许客户端使用javascript处理服务器发送过来的数据。从前仅仅是服务端利用web服务或者php scripts处理这种过程，此后通过网络把服务端生成的页面发送到客户机。但是ajax能够有选择性的修改浏览器器中页面的一个部分，更新它而不需要重新装载包含如 图片，菜单等等的整个文档页面。例如：表单的一个项目，用户的选择能够及时的处理并且在同一个页面上无刷新的显示。
3ajax的内涵
ajax是web浏览器支持的一组技术集合，包括以下几个元素“
a：表现层的html和css。
b:客户机使用javascript(ecmascript)处理数据，使用dom对象访问页面的元素或者读取服务器中的xml文件（例如使用getelementbytagname）。
c：使用xmlhttprequest类异步从服务器读取和传递数据。
以下可能被使用
d：domparser类可能被使用。
e：php或者其他在服务器端使用的脚本语言、
f：如果返回一个xml表单，需要使用xml和xslt处理数据。
g：soap可能被用来与服务器会话。
注：异步的含义是在服务器响应的过程中，不需要等待页面或者暂停页面的显示。
3 ajax 的工作机能
ajax使用一种基于显示和事件编程模型，这些事件就是用户的行为动作，它们引发和这些与web页面元素相关联的函数。表单和button按钮帮助实现交互性，dom允许这些动作与页面元素链接起来，当让也能够从服务器提供的xml文件中获取数据。
为了从服务器获取数据，、Xmlhttprequest 对象提供两个方法：
--open：创建与服务器的链接
--send：向服务器发送请求
服务器发回的请求会保存在xmlhttprequest对象的两个属性里
--responseXml 对应于xml格式文档
--responseText 对应于无格式的text文本
。。。在这里注意每处理一个文档要创建一个新的XMLHttpRequest对象。。。
接下来我们必须等待在数据可以使用的时候访问处理它，由此xmlhttprequest对象给出了它的readyState属性来标志数据的状态。readState有5个值
0：还没有初始化。
1：建立链接中
2：请求接收到
3: 结果处理中
4：请求完成
3. ajax与dhtml

Dhtml（动态html） 和 ajax有相似的意图，也是一组关于如下的标准：
--html
--css
--javascript
dhtml允许用户使用输入文本命令改变web页面的显示方式。ajax也允许异步向服务器发送请求和装载数据。
XMLHttpRequest类
属性
readState 0-4
status 200 代表ok 404说明没有找到请求页面。
responseText 返回文本数据
responseXml 返回xml数据类型，可以使用dom方法对它进行解析。
onreadstatechange 接收一个方法作为参数，当readstatechange 改变是自动调用。
方法
open（mode，url，boolean） mode 请求类型，GET或者POST 必须大写。url 请求的页面地址。boolean：true代表异步，false代表同步。后面也可以接收用户名密码参数做为可选择项目。
send（“string”） 如过是GET模式的话 send（null），否则是要向服务器传送的字符串。
一步一步建立一个请求
1.建立实例
if (window.XMLHttpRequest) // window-当前窗口对象
{
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else
if (window.ActiveXObject) // ActiveX 版本
{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
当然可能出现异常，修改获得异常信息
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Trying Internet Explorer
}
catch(e) // Failed
{
xhr = new XMLHttpRequest()
}
第二 等待响应
响应和进一步的处理被包含在与onreadystatechange属性相关联的方法上。如下
xhr.onreadystatechange = function() { // instructions to process the response };

if (xhr.readyState == 4)
{
// Received, OK
} else
{
// Wait...
}
第三步 发送请求 如下
xhr.open('GET', 'http://www.xul.fr/somefile.xml', true);
xhr.send(null）；

实例演示http://www.notebook-batteries.org/demo/ajax-get.html

digg it | del.icio.us