Ajax技术深入学习 
2006/12/23 9:23:57
阅读全文(1995) | 回复(0) | 编辑 | 精华
Ajax技术深入学习 一、AJAX 应用到的技术 AJAX 涉及到的7 项技术中，个人认为Javascript、XMLHttpRequest、DOM、XML 比较有用。 1、XMLHttpRequest 对象XMLHttpRequest 是XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。IE5.0 开始，开发人员可以在Web 页面内部使用XMLHTTP ActiveX 组件扩展自身的功能，不用从当前的Web 页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0 以及NetScape7 则是创建继承XML 的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest 对象和XMLHTTP 组件很相似，方法和属性类似，只是部分属性不同。 2、JavascriptJavascript 一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。现在，可以通过Javascript 操作XMLHttpRequest，来跟数据库打交道。 3、DOMDOM（Document Object Model）是提供给HTML 和XML 使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM 才可以跟页面进行交互。Web 开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，document 就代表页面对象本身。 4、XML通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML 表述的数据和文档，可以很容易的让所有程序共享。 二、AJAX 开发框架 这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest 请求的程序框架。AJAX 实质上也是遵循Request/Server 模式，所以这个框架基本的流程也是：对象初始化􀃆发送请求􀃆服务器接收􀃆服务器返回􀃆客户端接收􀃆修改客户端页面内容。只不过这个过程是异步的。 1、初始化对象并发出XMLHttpRequest 请求为了让Javascript 可以向服务器发送HTTP 请求，必须使用XMLHttpRequest 对象。使用之前，要先将XMLHttpRequest 对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE 以ActiveX 控件的形式提供，而Mozilla 等浏览器则直接以XMLHttpRequest 类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写： 代码:if (window.XMLHttpRequest) { // Mozilla, Safari, ...http_request = new XMLHttpRequest();} else if (window.ActiveXObject) { // IEhttp_request = new ActiveXObject("Microsoft.XMLHTTP");} 运行: [Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行] 有些版本的Mozilla 浏览器处理服务器返回的未包含XML mime-type 头部信息的内容时会出错。因此，要确保返回的内容包含text/xml 信息。 --------------------------------------------------------------------------------代码： http_request = new XMLHttpRequest();http_request.overrideMimeType('text/xml'); 运行:[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]-------------------------------------------------------------------------------- 2/指定响应处理函数接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest 对象的onreadystatechange 属性就可以了。比如： --------------------------------------------------------------------------------代码： http_request.onreadystatechange = processRequest; 运行:[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]-------------------------------------------------------------------------------- 需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript 即时定义函数的方式定义响应函数。比如： --------------------------------------------------------------------------------代码： http_request.onreadystatechange = function() {}; 运行: [Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]-------------------------------------------------------------------------------- 3、发出HTTP 请求指定响应处理函数之后， 就可以向服务器发出HTTP 请求了。这一步调用XMLHttpRequest 对象的open 和send 方法。 --------------------------------------------------------------------------------代码： http_request.open('GET', 'http://www.example.org/some.file', true);http_request.send(null); 运行: [Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]-------------------------------------------------------------------------------- open 的第一个参数是HTTP 请求的方法，为Get、Post 或者Head。open 的第二个参数是目标URL。基于安全考虑，这个URL 只能是同网域的，否则会提示“没有权限”的错误。这个URL 可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL 处理请求XMLHttpRequest 请求则跟处理普通的HTTP 请求一样，比如JSP 可以用request.getParameter(“”)或request.getAttribute(“”)来取得URL 参数值。open 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。按照顺序，open 调用完毕之后要调用send 方法。send 的参数如果是以Post 方式发出的话，可以是任何想传给服务器的内容。不过，跟form 一样，如果要传文件或者Post 内容给服务器，必须先调用setRequestHeader 方法，修改MIME 类别。如下： --------------------------------------------------------------------------------代码： http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); 运行: [Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]--------------------------------------------------------------------------------这时资料则以查询字符串的形式列出，作为sned 的参数，例如： --------------------------------------------------------------------------------代码： name=value&anothername=othervalue&so=on 运行:[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]-------------------------------------------------------------------------------- 4、处理服务器返回的信息在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。 首先，它要检查XMLHttpRequest 对象的readyState 值，判断请求目前的状态。参照前文的属性表可以知道，readyState 值为4 的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下： --------------------------------------------------------------------------------代码： if (http_request.readyState == 4) {// 信息已经返回，可以开始处理} else {// 信息还没有返回，等待} 运行: [Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行] 服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200 代表页面正常。 --------------------------------------------------------------------------------代码： if (http_request.status == 200) {// 页面正常，可以开始处理信息} else {// 页面有问题} 运行: [Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]-------------------------------------------------------------------------------- XMLHttpRequest 对成功返回的信息有两种处理方式：responseText：将传回的信息当字符串使用；responseXML：将传回的信息当XML 文档使用，可以用DOM 处理。 五、一个初步的开发框架 总结上面的步骤，我们整理出一个初步的可用的开发框架，供以后调用；这里，将服务器返回的信息用window.alert 以字符串的形式显示出来： --------------------------------------------------------------------------------代码： <script language="javascript">var http_request = false;function send_request(url) {//初始化、指定处理函数、发送请求的函数http_request = false;//开始初始化XMLHttpRequest 对象if(window.XMLHttpRequest) { //Mozilla 浏览器http_request = new XMLHttpRequest();if (http_request.overrideMimeType) {//设置MiME 类别http_request.overrideMimeType("text/xml");}}else if (window.ActiveXObject) { // IE 浏览器try {http_request = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {http_request = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {}}}if (!http_request) { // 异常，创建对象实例失败window.alert("不能创建XMLHttpRequest 对象实例.");return false;}http_request.onreadystatechange = processRequest;// 确定发送请求的方式和URL 以及是否同步执行下段代码http_request.open("GET", url, true);http_request.send(null);}// 处理返回信息的函数function processRequest() {if (http_request.readyState == 4) { // 判断对象状态if (http_request.status == 200) { // 信息已经成功返回，开始处理信息alert(http_request.responseText);} else { //页面不正常alert("您所请求的页面有异常。");}}}</script> 运行: [Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行] -------------------------------------------------------------------------------- 文摘:http://www.itpub.net/598896.html
Posted by Qr on 2006/12/23 9:23:57
| 发表评论： |
|