文档章节

《Ajax基础教程》学习笔记(一)

小微
 小微
发布于 2013/01/16 17:04
字数 1741
阅读 806
收藏 8

这篇笔记的主要内容:ajax简介,XMLHttpRequest对象使用。

1. Ajax不只是一个特定的技术,更应算是一种技巧。Adaptive Path的Jesse James Garrett最早创造了这个词。在他的文章《Ajax: A New Approach to Web Applications》中,Garrett分析了Ajax这种方法。Ajax是Asynchronous JavaScript+XML的缩写。

2. 使用Ajax时的几个常犯的错误

  1. 有变化时如何向用户提供可视化的提示?黄褪技术(Yellow Fade Technique, YFT)?Loading加载记号?
  2. 不同于IFRAME和隐藏框架,通过XHR做出请求不会修改浏览器的历史栈。因此后退按钮未能按预想的效果进行。
  3. 与其他基于浏览器的方法不同,Ajax不会修改地址栏中显示的链接。因此不能建书签或发链接。 使用Ajax不要过度。

3. Ajax是一个客户端技术,它并不限制服务器端使用何种技术。使用Ajax需要了解的相关技术包括:

  1. JavaScript
  2. HTML
  3. DOM
  4. CSS
  5. 测试驱动(JsUnit,Selenium)

4. Ajax的设计模式www.ajaxpatterns.org

5. XMLHttpRequest在不同浏览器中实现方法不同。IE把它实现为一个ActiveX对象,其他浏览器把它实现为一个本地JavaScript对象。

代码示例如下:

var xmlHttp; //创建一个全局变量保存对XMLHttpRequest对象的引用

function createXMLHttpRequest(){
    if(window.ActiveXObject){ //IE浏览器
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){ //非IE浏览器
        xmlHttp = new XMLHttpRequest();
    }
}
6. XMLHttpRequest的方法
  1. abort():停止当前请求。
  2. getAllResponseHeaders():返回一个串,其中包含HTTP请求的所有响应首部,首部包括Content-Length、Date和URI。
  3. getResponseHeader("header"):与getAllResponseHeaders()类似,不过它有一个参数表示希望得到的指定首部值,并把这个值作为串返回。
  4. open("method", "url", "asynch", "username", "password"):建立对服务器的调用,前两个是必选参数,后三个是可选参数。第一个参数提供调用的特定方法(GET、POST、PUT),第二个参数提供调用资源的URL,第三个参数指示这个调用是异步(默认,true)还是同步(false),最后两个参数分别设置用户名和密码。
  5. send(content):向服务器发送请求,如果请求声明是异步的,该方法立即返回,否则会等待到接收到响应为止。可选参数可以是DOM对象的实例、输入流或者串。传入这个方法的内容会作为请求体的一部分发送。
  6. setRequestHeader("header", "value"):为HTTP请求中一个给定的首部设置值,第一个参数表示要设置的首部,第二个参数表示要在首部中放置的值,该方法在调用open()之后才能使用。

7. XMLHttpRequest的属性

  1. onreadystatechange:每个状态改变时会触发这个事件处理器,通常会调用一个js函数
  2. readyState:请求的状态(0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成)
  3. responseText:服务器的响应,表示为一个串
  4. responseXML:服务器的响应,表示为XML,这个对象可以解析为DOM对象
  5. status:服务器的HTTP状态码(200对应OK,404对应Not Found)
  6. statusText:HTTP状态码的相应文本

8. 标准ajax交互示意图

1. 一个客户端事件触发一个Ajax事件。例如可以有如下的代码:

<input type="text"d="email" name="email" onblur="validateEmail()";>
2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用,并设置URL以及所希望的HTTP方法(通常是GET或POST)。请求实际上通过一个send()方法调用触发。可能的代码如下所示:

var xmlHttp;
function validateEmail() {
   var email = document.getElementById("email");
   var url = "validate?email=" + escape(email.value);
   if (window.ActiveXObject) {
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if (window.XMLHttpRequest) {
     xmlHttp = new XMLHttpRequest();
   }
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
3. 向服务器做出请求。可能调用servlet、CGI脚本,或者任何服务器端技术。

4. 服务器可以做你想做的事情,包括访问数据库,甚至访问另一个系统。

5. 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中,响应可能涉及更广,还包括JavaScript、DOM管理以及其他相关的技术。需要说明,你还需要设置另外一些首部,使浏览器不会在本地缓存结果。为此可以使用下面的代码:

response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
【注】定义Pragma是为了保证向后兼容,它和Cache-Control功能一样。

6. 在这个示例中,XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性,然后查看服务器返回的状态码。如果一切正常,callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法:

function callback() {
   if (xmlHttp.readyState == 4) {
     if (xmlHttp.status == 200) {
          //do something interesting here
     }
   }
}

9. Ajax框架

浏览器端框架

  • Dojo:一个古老的框架,2004年9月开始开发,重点关注可用性。目标是建立充分利用XHR的DHTML工具包,支持向后和向前按钮,解决书签问题。
  • Rico:由Sabre Airline Solutions开发,重点关注拖放动作、数据网格和所谓的电影效果(移动部件、淡入淡出等)。
  • qooxdoo:提供一个基于JavaScript的工具包来弥补HTML的不足。可以模拟标准胖客户应用中的一些特性。
  • TIBET:可能是现存最老的框架,从1997年就开始开发。目标是提供企业级Ajax支持。还拥有一个完全交互式的基于浏览器的IDE。
  • Flash/JavaScript集成包:实现JavaScript和ActionScript之间的相互调用。
  • Google AJAXSLT:基于Google Maps的工作,使用XPath的XSL转化(XSLT)的JavaScript实现。AJAXSLT允许使用JavaScript在浏览器上直接完成XML文档的转换。
  • libXmlrequest:2003年就发布的古老框架,版权归作者Stephen W. Cote所有,相关文档也很少。
  • RSLite:远程脚本的一个实现,由Brent Ashley编写。轻量级的,2000年开始发展。可以用来支持那些不支持XMLHttpRequest对象的浏览器。
  • SACK:简单Ajax代码包。
  • sarrisa:比Ajax多一点功能是它以一种独立于浏览器的方式对XML API提供了包装支持。
  • XHConn:类似于SACK,相当于XMLHttpRequest对象的一个简单包装器。

服务器端框架

  • CPAINT:跨平台异步接口工具包,在服务器端实现Ajax,向客户返回文本或DOM文档对象,只支持PHP和ASP。
  • Sajax:可以直接从JavaScript调用服务器端代码。
  • JSON/JSON-RPC:JavaScript对象注解(JSON)是一种文本格式,可用于交换数据。
  • Direct Web Remoting(DWR):从JavaScript直接调用Java方法。
  • Shift Web Applications TO(SWATO):基于Java的Ajax框架解决方案,相对复杂,但文档完备。
  • Java BluePrints
  • Ajax.Net:与.NET配合使用。
  • Microsoft的Atlas项目
  • Ruby on Rails

© 著作权归作者所有

小微
粉丝 117
博文 78
码字总数 81696
作品 0
海淀
程序员
私信 提问
《JavaEE基础实用教程》笔记说明

“《JavaEE基础实用教程》笔记”分类中的文章是本人学习《JavaEE基础实用教程》时所做的笔记。 该书作者:郑阿奇 著。ISBN:9787121091360。 这里整理出第3、4、5章的笔记,主要内容是Strut...

JerryPan
2016/02/19
1K
1
前端相关大杂烩

前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作者:Samer Buna 译文出自:掘金翻译计划 本文...

掘金官方
2018/01/12
0
0
我的Python3萌新入门笔记

我的Python3萌新入门笔记 Python自动化运维2017-12-128 阅读 Python教程 先来个镇楼图! Python3萌新入门笔记是一系列真实的自学笔记。 当然,它也是比较全面的入门教程。 到上一篇笔记为止,...

Python自动化运维
2017/12/12
0
0
python资料全集

python: 微信公众号开发小记——2.80端口上的服务 python: 微信公众号开发小记——3.接入三方登录 使用python编写一个壁纸网站的简单爬虫 python: python List 用法 Python 中各个时间复杂度...

d_watson
2016/04/15
185
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
182
0

没有更多内容

加载失败,请刷新页面

加载更多

查看线上日志常用命令

cat 命令(文本输出命令) 通常查找出错误日志 cat error.log | grep 'nick' , 这时候我们要输出当前这个日志的前后几行: 显示file文件里匹配nick那行以及上下5行 cat error.log | grep -C ...

xiaolyuh
13分钟前
3
0
六、Java设计模式之工厂方法

工厂方法定义: 定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类,工厂方法让类的实例化推迟到子类中进行 类型:创建型 工厂方法-使用场景: 创建对象需要大量重复的代码 ...

东风破2019
20分钟前
2
0
win服务器管理遇到的一系列问题记录

有些小伙伴在使用iis7远程桌面管理工具的时候总是会遇到一系列的问题,下面就是为大家介绍一下服务器日常管理过程中出现的问题及我的解决办法和心得。希望能帮到大家。   拒绝服务器重新启...

1717197346
27分钟前
2
0
flutter 剪切板 复制粘贴

复制粘贴功能 import 'package:flutter/services.dart'; Clipboard.setData(ClipboardData(text:_text));Clipboard.getData;...

zdglf
30分钟前
3
0
如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题?

面试题 如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题? 面试官心理分析 这个是肯定的,用 MQ 有个基本原则,就是数据不能多一条,也不能少一条,不能多,就是前面说的重复消费...

米兜
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部