AJAX开发简略(含续一)[1]

AJAX 开发简略
文档说明 参与人员： 作者 柯自聪 网名 eamoi educhina 联络 eamoi@https://www.wendangku.net/doc/ca1635779.html,（技术） zcke0728@https://www.wendangku.net/doc/ca1635779.html,（版权）
发布记录： 版本 1.0 1.1 日期 2005-10-28 2005-11-7 作者 柯自聪 柯自聪 说明 创建，第一版 增加 7.4、7.5 关于 DOM 和 XML 的内容
链接： 类别 Blog MSN-Space 网址 https://www.wendangku.net/doc/ca1635779.html,/eamoi/ https://www.wendangku.net/doc/ca1635779.html,/members/eamoi/
OpenDoc 版权说明： 本文档版权归原作者所有。 在免费、且无任何附加条件的前提下，可在网络媒体中自由传播。 如需部分或者全文引用，请事先征求作者意见。 如果本文对您有些许帮助， 表达谢意的最好方式， 是将您发现的问题和文档改进意见及时反 馈给作者。当然，倘若有时间和能力，能为技术群体无偿贡献自己的所学为最好的回馈。 网络转载请务必保留原作者的署名和 Blog 地址。

AJAX开发简略...................................................................................................................................1 一、AJAX定义...........................................................................................................................3 二、现状与需要解决的问题...................................................................................................3 三、为什么使用AJAX...............................................................................................................5 四、谁在使用AJAX...................................................................................................................6 五、用AJAX改进你的设计.......................................................................................................7 例子 1：数据校验............................................................................................................7 例子 2：按需取数据—级联菜单....................................................................................7 例子 3：读取外部数据....................................................................................................8 六、AJAX的缺陷.......................................................................................................................8 七、AJAX开发...........................................................................................................................8 7.1、AJAX应用到的技术.................................................................................................8 A、XMLHttpRequest对象.................................................................................................8 B、Javascript.................................................................................................................9 C、DOM.............................................................................................................................10 D、XML.............................................................................................................................10 7.2、AJAX开发框架.......................................................................................................10 A、初始化对象并发出XMLHttpRequest请求 ...............................................................10 B、指定响应处理函数...................................................................................................10 C、发出HTTP请求...........................................................................................................11 D、处理服务器返回的信息...........................................................................................11 E、一个初步的开发框架...............................................................................................12 7.3、简单的示例...........................................................................................................14 A、数据校验...................................................................................................................14 B、级联菜单...................................................................................................................15 7.4、文档对象模型（DOM）.........................................................................................17 7.4.1、DOM眼中的HTML文档：树.................................................................................17 7.4.2、HTML文档的节点...............................................................................................17 7.4.3、使用DOM操作HTML文档.....................................................................................18 7.5、处理XML文档.........................................................................................................28 7.5.1、处理返回的XML.................................................................................................28 7.5.2、选择合适的XML生成方式.................................................................................29 7.5.3、如何在使用XML还是普通文本间权衡 .............................................................31 参考文章：.....................................................................................................................31

在使用浏览器浏览网页的时候， 当页面刷新很慢的时候， 你的浏览器在干什么？你的屏 幕内容是什么？是的，你的浏览器在等待刷新，而你的屏幕内容是一片空白，而你在屏幕前 苦苦的等待浏览器的响应。 开发人员为了克服这种尴尬的局面， 不得不在每一个可能需要长 时间等待响应的页面上增加一个 DIV，告诉用户“系统正在处理您的请求，请稍候……” 。 现在，有一种越来越流行越热的“老”技术，可以彻底改变这种窘迫的局面。那就是 AJAX。如今，随着 Gmail、Google-maps 的应用和各种浏览器的支持，AJAX 正逐渐吸引全 世界的眼球。
一、AJAX 定义
AJAX（Asynchronous JavaScript and XML）其实是多种技术的综合，包括 Javascript、 XHTML 和 CSS、DOM、XML 和 XSTL、XMLHttpRequest。其中： 使用 XHTML 和 CSS 标准化呈现，使用 DOM 实现动态显示和交互，使用 XML 和 XSTL 进 行数据交换与处理，使用 XMLHttpRequest 对象进行异步数据读取，使用 Javascript 绑定和 处理所有数据。 在 AJAX 提出之前，业界对于上述技术都只是单独的使用，没有综合使用，也是由于 之前的技术需求所决定的。随着应用的广泛，AJAX 也成为香饽饽了。
二、现状与需要解决的问题
传统的 Web 应用采用同步交互过程，这种情况下，用户首先向 HTTP 服务器触发一个 行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个 HTML 页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状 态，屏幕内容也是一片空白。如下图：

自从采用超文本作为 Web 传输和呈现之后，我们都是采用这么一套传输方式。当负载 比较小的时候，这并不会体现出有什么不妥。可是当负载比较大，响应时间要很长，1 分钟、 2 分钟……数分钟的时候，这种等待就不可忍受了。严重的，超过响应时间，服务器干脆告 诉你页面不可用。另外，某些时候，我只是想改变页面一小部分的数据，那为什么我必须重 新加载整个页面呢？！ 当软件设计越来越讲究人性化的时候， 这么糟糕的用户体验简直与这 种原则背道而驰。 为什么老是要让用户等待服务器取数据呢？至少， 我们应该减少用户等待 的时间。现在，除了程序设计、编码优化和服务器调优之外，还可以采用 AJAX。

三、为什么使用 AJAX
与传统的 Web 应用不同，AJAX 采用异步交互过程。AJAX 在用户与服务器之间引入一 个中间媒介， 从而消除了网络交互过程中的处理—等待—处理—等待缺点。 用户的浏览器在 执行任务时即装载了 AJAX 引擎。AJAX 引擎用 JavaScript 语言编写，通常藏在一个隐藏的 框架中。它负责编译用户界面及与服务器之间的交互。AJAX 引擎允许用户与应用软件之间 的交互过程异步进行， 独立于用户与网络服务器间的交流。 现在， 可以用 Javascript 调用 AJAX 引擎来代替产生一个 HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需 要重新载入整个页面的需求可以交给 AJAX 来执行。

使用 AJAX，可以为 ISP、开发人员、终端用户带来可见的便捷： 减轻服务器的负担。AJAX 的原则是“按需取数据” ，可以最大程度的减少冗余请求， 和响应对服务器造成的负担。 无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读取大量的数据的时 候，不用像 Reload 那样出现白屏的情况，AJAX 使用 XMLHTTP 对象发送请求并得到 服务器响应，在不重新载入整个页面的情况下用 Javascript 操作 DOM 最终更新页面。 所以在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容（也可以加一个 Loading 的提示框让用户知道处于读取数据过程） ，只有当数据接收完毕之后才更新相 应部分的内容。这种更新是瞬间的，用户几乎感觉不到。 带来更好的用户体验。 可以把以前一些服务器负担的工作转嫁到客户端， 利用客户端闲置的能力来处理， 减轻 服务器和带宽的负担，节约空间和宽带租用成本。 可以调用外部数据。 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 进一步促进页面呈现和数据的分离。
四、谁在使用 AJAX
在应用 AJAX 开发上面， Google 当仁不让是表率。 Orkut、 Gmail、 Google Groups、 Google Maps、Google Suggest 都应用了这项技术。Amazon 的 https://www.wendangku.net/doc/ca1635779.html, 搜索引擎也采用了类似的技 术。 微软也在积极开发更为完善的 AJAX 应用： 它即将推出代号为 Atlas 的 AJAX 工具。 Atlas 的功能超越了 AJAX 本身，包括整合 Visual Studio 的调试功能。另外，新的 https://www.wendangku.net/doc/ca1635779.html, 控件 将使客户端控件与服务器端代码的捆绑更为简便。Atlas 客户脚本框架（Atlas Clent Script Framework）也使与网页及相关项目的交互更为便利。但 Visual Studio 2005 中并不包含此项 功能。 微软最近宣布 Atlas 客户脚本框架将包含如下内容（详细资料请访问 Atlas 计划网站） ： * 一个可扩展的核心框架，它添加了 JavaScript 功能：如生命同时期管理、继承管理、

多点传送处理器和界面管理。 * 一个常见功能的基本类库，有丰富的字符串处理、计时器和运行任务。 * 为 HTML 附加动态行为的用户界面框架。 * 一组用来简化服务器连通和网络访问的网络堆栈。 * 一组丰富的用户界面开发控件，如：自动完成的文本框、动画和拖放。 * 处理浏览器脚本行为差异的浏览器兼容层面。 典型的，微软将 AJAX 技术应用在 MSN Space 上面。很多人一直都对 MS Space 服务感 到很奇怪，当提交回复评论以后，浏览器会暂时停顿一下，然后在无刷新的情况下把我提交 的评论显示出来。这个就是应用了 AJAX 的效果。试想，如果添加一个评论就要重新刷新 整个页面，那可真费事。 目前， AJAX 应用最普遍的领域是 GIS-Map 方面。 GIS 的区域搜索强调快速响应， AJAX 的特点正好符合这种需求。
五、用 AJAX 改进你的设计
AJAX 虽然可以实现无刷新更新页面内容，但是也不是什么地方都可以用，主要应用在 交互较多、频繁读数据、数据分类良好的 Web 应用中。现在，让我们举两个例子，看看如 何用 AJAX 改进你的设计。 例子 1：数据校验 在输入 form 表单内容的时候，我们通常需要确保数据的唯一性。因此，常常在页面上 提供“唯一性校验”按钮，让用户点击，打开一个校验小窗口；或者等 form 提交到服务器 端，由服务器判断后在返回相应的校验信息。前者，window.open 操作本来就是比较耗费资 源的，通常由 window. showModalDialog 代替，即使这样也要弹出一个对话框；后者，需要 把整个页面提交到服务器并由服务器判断校验，这个过程不仅时间长而且加重了服务器负 担。而使用 AJAX，这个校验请求可以由 XMLHttpRequest 对象发出，整个过程不需要弹出 新窗口，也不需要将整个页面提交到服务器，快速又不加重服务器负担。 例子 2：按需取数据—级联菜单 以前，为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是 一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用 JavaScript 来控制它的子集项目的呈现， 这样虽然解决了操作响应速度、 不重载页面以及避免向服务器 频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的 话， 那读取的数据中的一部分就会成为冗余数据而浪费用户的资源， 特别是在菜单结构复杂、 数据量大的情况下（比如菜单有很多级、每一级菜又有上百个项目） ，这种弊端就更为突出。 现在应用 AJAX，在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操 作一级菜单其中一项时，会通过 Ajax 向后台请求当前一级项目所属的二级子菜单的所有数 据， 如果再继续请求已经呈现的二级菜单中的一项时， 再向后面请求所操作二级菜单项对应 的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取多少，就不 会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新 需要更新的那部分即可， 相对于后台处理并重载的方式缩短了用户等待时间， 也把对资源的

浪费降到最低。 例子 3：读取外部数据 AJAX 可以调用外部数据，因此，可以对一些开发的数据比如 XML 文档、RSS 文档进 行二次加工，实现数据整合或者开发应用程序。
六、AJAX 的缺陷
AJAX 不是完美的技术。使用 AJAX，它的一些缺陷不得不权衡一下： AJAX 大量使用了 Javascript 和 AJAX 引擎， 而这个取决于浏览器的支持。 IE5.0 及以上、 Mozilla1.0、NetScape7 及以上版本才支持，Mozilla 虽然也支持 AJAX，但是提供 XMLHttpRequest 的方式不一样。所以，使用 AJAX 的程序必须测试针对各个浏览器的 兼容性。 AJAX 更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有 的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。 这个就需要在明显位置提 醒用户“数据已更新” 。 对流媒体的支持没有 FLASH、Java Applet 好。 一些手持设备（如手机、PDA 等）现在还不能很好的支持 Ajax。
七、AJAX 开发
到这里，已经可以清楚的知道 AJAX 是什么，AJAX 能做什么，AJAX 什么地方不好。 如果你觉得 AJAX 真的能给你的开发工作带来改进的话，那么继续看看怎么使用 AJAX 吧。 7.1、AJAX 应用到的技术 AJAX 涉及到的 7 项技术中，个人认为 Javascript、XMLHttpRequest、DOM、XML 比 较有用。 A、XMLHttpRequest 对象 XMLHttpRequest 是 XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用程 序一样只同服务器进行数据层面的交换， 而不用每次都刷新界面， 也不用每次将数据处理的 工作都交给服务器来做； 这样既减轻了服务器负担又加快了响应速度、 缩短了用户等待的时 间。 IE5.0 开始，开发人员可以在 Web 页面内部使用 XMLHTTP ActiveX 组件扩展自身的功 能，不用从当前的 Web 页面导航就可以直接传输数据到服务器或者从服务器接收数 据。,Mozilla1.0 以及 NetScape7 则是创建继承 XML 的代理类 XMLHttpRequest；对于大多数 情况，XMLHttpRequest 对象和 XMLHTTP 组件很相似，方法和属性类似，只是部分属性不 同。

XMLHttpRequest 对象初始化： XMLHttpRequest 对象的方法： 方法 abort() getAllResponseHeaders() getResponseHeader("headerLabel") open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) send(content) setRequestHeader("label", "value") XMLHttpRequest 对象的属性： 属性 onreadystatechange readyState 描述 状态改变的事件触发器 对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 服务器进程返回数据的文本版本 服务器进程返回数据的兼容 DOM 的 XML 文档对象 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功" 服务器返回的状态文本信息 描述 停止当前请求 作为字符串返问完整的 headers 作为字符串返问单个的 header 标签 设置未决的请求的目标 URL，方法，和其他参数 发送请求 设置 header 并和请求一起 发送
responseText responseXML status statusText B、Javascript
Javascript 一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。现在， 可以通过 Javascript 操作 XMLHttpRequest，来跟数据库打交道。

C、DOM DOM（Document Object Model）是提供给 HTML 和 XML 使用的一组 API，提供了文 件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过 DOM 才可以跟页面 进行交互。Web 开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如， document 就代表页面对象本身。 D、XML 通过 XML（Extensible Markup Language） ，可以规范的定义结构化数据，是网上传输的 数据和文档符合统一的标准。用 XML 表述的数据和文档，可以很容易的让所有程序共享。 7.2、AJAX 开发框架 这里，我们通过一步步的解析，来形成一个发送和接收 XMLHttpRequest 请求的程序框 架。AJAX 实质上也是遵循 Request/Server 模式，所以这个框架基本的流程也是：对象初始 化 发送请求 服务器接收 服务器返回 客户端接收 修改客户端页面内容。 只不过这个 过程是异步的。 A、初始化对象并发出 XMLHttpRequest 请求 为了让 Javascript 可以向服务器发送 HTTP 请求，必须使用 XMLHttpRequest 对象。使 用之前，要先将 XMLHttpRequest 对象实例化。之前说过，各个浏览器对这个实例化过程实 现不同。IE 以 ActiveX 控件的形式提供，而 Mozilla 等浏览器则直接以 XMLHttpRequest 类 的形式提供。为了让编写的程序能够跨浏览器运行，要这样写： if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); } 有些版本的 Mozilla 浏览器处理服务器返回的未包含 XML mime-type 头部信息的内容时 会出错。因此，要确保返回的内容包含 text/xml 信息。 http_request = new XMLHttpRequest(); http_request.overrideMimeType('text/xml');
B、指定响应处理函数 接下来要指定当服务器返回信息时客户端的处理方式。 只要将相应的处理函数名称赋给

XMLHttpRequest 对象的 onreadystatechange 属性就可以了。比如： http_request.onreadystatechange = processRequest; 需要指出的时，这个函数名称不加括号，不指定参数。也可以用 Javascript 即时定义函 数的方式定义响应函数。比如： http_request.onreadystatechange = function() { };
C、发出 HTTP 请求 指 定 响 应 处 理 函 数 之 后 ， 就 可 以 向 服 务 器 发 出 HTTP 请 求 了 。 这 一 步 调 用 XMLHttpRequest 对象的 open 和 send 方法。 http_request.open('GET', 'https://www.wendangku.net/doc/ca1635779.html,/some.file', true); http_request.send(null); 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”); 这时资料则以查询字符串的形式列出，作为 sned 的参数，例如： name=value&anothername=othervalue&so=on
D、处理服务器返回的信息 在第二步我们已经指定了响应处理函数， 这一步， 来看看这个响应处理函数都应该做什 么。 首先，它要检查 XMLHttpRequest 对象的 readyState 值，判断请求目前的状态。参照前 文的属性表可以知道，readyState 值为 4 的时候，代表服务器已经传回所有的信息，可以开

始处理信息并更新页面内容了。如下： if (http_request.readyState == 4) { // 信息已经返回，可以开始处理 } else { // 信息还没有返回，等待 } 服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有 的状态码都可以在W3C的官方网站上查到。其中，200 代表页面正常。 if (http_request.status == 200) { // 页面正常，可以开始处理信息 } else { // 页面有问题 } XMLHttpRequest 对成功返回的信息有两种处理方式： responseText：将传回的信息当字符串使用； responseXML：将传回的信息当 XML 文档使用，可以用 DOM 处理。 E、一个初步的开发框架 总结上面的步骤，我们整理出一个初步的可用的开发框架，供以后调用；这里，将服务 器返回的信息用 window.alert 以字符串的形式显示出来：

7.3、简单的示例 接下来，我们利用上面的开发框架来做两个简单的应用。 A、数据校验 在用户注册的表单中，经常碰到要检验待注册的用户名是否唯一。传统的做法是采用 window.open 的弹出窗口，或者 window. showModalDialog 的对话框。不过，这两个都需要 打开窗口。采用 AJAX 后，采用异步方式直接将参数提交到服务器，用 window.alert 将服务 器返回的校验信息显示出来。代码如下： 在之间增加一段 form 表单代码：

用户名： 

在开发框架的基础上再增加一个调用函数： function userCheck() { var f = document.form1; var username = https://www.wendangku.net/doc/ca1635779.html,ername.value; if(username=="") { window.alert("用户名不能为空。"); https://www.wendangku.net/doc/ca1635779.html,ername.focus(); return false; } else { send_request('sample1_2.jsp?username='+username); } } 看看 sample1_2.jsp 做了什么： <%@ page contentType="text/html; charset=gb2312" errorPage="" %> <% String username = request.getParameter("username"); if("educhina".equals(username)) out.print("用户名已经被注册，请更换一个用户名。"); else out.print("用户名尚未被使用，您可以继续。"); %> 运行一下，嗯，没有弹出窗口，没有页面刷新，跟预想的效果一样。如果需要的话，可以在

sample1_2.jsp 中实现更复杂的功能。最后，只要将反馈信息打印出来就可以了。
B、级联菜单 我们在第五部分提到利用 AJAX 改进级联菜单的设计。接下来，我们就演示一下如何 “按需取数据” 。 首先，在中间增加如下 HTML 代码：

经理室

开发部

在框架的基础上增加一个响应函数 showRoles(obj)：

//显示部门下的岗位 function showRoles(obj) { document.getElementById(obj).parentNode.style.display = ""; document.getElementById(obj).innerHTML = "正在读取数据..." currentPos = obj; send_request("sample2_2.jsp?playPos="+obj); } 修改框架的 processRequest 函数： // 处理返回信息的函数 function processRequest() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回，开始处理信息 document.getElementById(currentPos).innerHTML = http_request.responseText; } else { //页面不正常 alert("您所请求的页面有异常。"); } } } 最后就是 smaple2_2.jsp 了： <%@ page contentType="text/html; charset=gb2312" errorPage="" %> <% String playPos = request.getParameter("playPos"); if("pos_1".equals(playPos)) out.print("  总经理
  副总经理"); else if("pos_2".equals(playPos)) out.println("  总工程师
  软件工程师"); %>
运行一下看看效果：

7.4、文档对象模型（DOM） 文档对象模型（DOM）是表示文档（比如 HTML 和 XML）和访问、操作构成文档的 各种元素的应用程序接口（API） 。一般的，支持 Javascript 的所有浏览器都支持 DOM。本 文所涉及的 DOM， 是指 W3C 定义的标准的文档对象模型， 它以树形结构表示 HTML 和 XML 文档，定义了遍历这个树和检查、修改树的节点的方法和属性。 7.4.1、DOM 眼中的 HTML 文档：树 在 DOM 眼中，HTML 跟 XML 一样是一种树形结构的文档，是根（root）节点， 、 开始统计 运行效果如下：
例子 2 – sample3_2.htm： 接下来使用 firstChile、lastChild、nextSibling、previousSibling 遍历整个文档树。修改一 下 countTotalElement 函数，其他跟 sample3_1.htm 一样： function countTotalElement(node) { //参数 node 是一个 Node 对象 var total = 0; if(node.nodeType == 1) { //检查 node 是否为 Element 对象 total++; //如果是，计数器加 1 elementName = elementName + node.tagName + "\r\n"; //保存标记名 } var childrens = node.childNodes; //获取 node 的全部子节点 for(var m=node.firstChild; m!=null;m=m.nextSibling) { total += countTotalElement(m); //在每个子节点上进行递归操作 } return total; } B、搜索文档中特定的元素 在使用 DOM 的过程中，有时候需要定位到文档中的某个特定节点，或者具有特定类型 的 节 点 列 表 。 这 种 情 况 下 ， 可 以 调 用 Document 对 象 的 getElementsByTagName() 和

同步传输与异步传输的区别

同步传输与异步传输的区别 数据块与数据块之间的时间间隔是固定的，必须严格地规定它们的时 列，标记一个数据块的开始和结束，一般还要附加一个校验序列，以 同步传输的特点：同步传输的比特分组要大得多。它不是独立地 异步传输是数据传输的一种方式。由于数据一般是一位接一位串行传输的，例如在传送一串字符信息时，每个字符代码由7位二进制位组成。但在一串二进制位中，每个7位又从哪一个二进制位开始算起呢?异步传输时，在传送每个数据字符之前，先发送一个叫做开始位的二进制位。当接收端收到这一信号时，就知道相继送来7位二进制位是一个字符数据。在这以后，接着再给出1位或2位二进制位，称做结束位。接收端收到结束位后，表示一个数据字符传送结束。这样，在异步传输时，每个字符是分别同步的，即字符中的每个二进制位是同步的，但字符与字符之间的间隙长度是不固定的。 异步传输的特点：将比特分成小组进行传送，小组可以是8位的 从不知道它们会在什么时候到达。一个常见的例子是计算机键盘与主

异步传输，英文名AsynchronousTransfer Mode，ATM，是实现B-ISDN的一项技术基础，是建立在电路交换和分组交换的基础上的快速分组交换技术。ATM的主要特点是面向连接;采用小的、固定长度的单元(53字节);取消链路的差错控制和流量控制等，这些措施提高了传输效率。。ATM 的突出优点是可以为每个虚连接提供相应的服务质量(QOS)，可以有效地支持视、音频多媒体传输，包括语音、视频和数据等;另外，ATM可以实现局域网和广域网的平滑无缝连接。 [2] 异步传输一般以字符为单位，不论所采用的字符代码长度为多少位，在发送每一 异步传输 字符代码时，前面均加上一个“起”信号，其长度规定为1个码元，极性为“0”，即空号的极性；字符代码后面均加上一个“止”信号，其长度为1或者2个码元，极性皆为“1”，即与信号极性相同，加上起、止信号的作用就是为了能区分串行传输的“字符”，也就是实现了串行传输收、发双方码组或字符的同步。 综上所述，同步传输与异步传输的简单区别：1、异步传输是面向字符的传输，而同步传输是面向比特的传输。 2,异步传输的单位是字符，而同步传输的单位是帧。

jQuery中的Ajax几种请求方法

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件，例如表单。 示例代码： $(".ajax.load").load("[url]https://www.wendangku.net/doc/ca1635779.html,/QLeelulu/archive/2008/03/30/1130270.html[/url] .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求 参数： url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据，以Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码： $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图

AJAX案例

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为loadXMLDoc() 的函数：

Change Content 接下来，在页面的 head 部分添加一个 AJAX - 创建 XMLHttpRequest 对象?Previous Page ?Next Page XMLHttpRequest 是 AJAX 的基础。 XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。 创建 XMLHttpRequest 对象的语法： variable=new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： variable=new ActiveXObject("Microsoft.XMLHTTP"); 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ： var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 在下一章中，您将学习发送服务器请求的知识。 AJAX - 向服务器发送请求 ?Previous Page ?Next Page XMLHttpRequest 对象用于和服务器交换数据。 向服务器发送请求 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","test1.txt",true); xmlhttp.send();

jQuery Ajax 全解析(.ajax .post .get)

jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件，例如表单。 示例代码： $(".ajax.load").load("https://www.wendangku.net/doc/ca1635779.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求 参数： url (String) : 发送请求的URL地址.

同步复位和异步复位的区别

针对数字系统的设计，我们经常会遇到复位电路的设计，对初学者来说不知道同步复位与异步复位的区别与联系，今天我对这个问题简要的阐述下，希望对初学者有一定的参考意义，若有不正确的地方愿大家明示。 同步复位原理：同步复位只有在时钟沿到来时复位信号才起作用，则复位信号持续的时间应该超过一个时钟周期才能保证系统复位。 异步复位原理：异步复位只要有复位信号系统马上复位，因此异步复位抗干扰能力差，有些噪声也能使系统复位，因此有时候显得不够稳定，要想设计一个好的复位最好使用异步复位同步释放。 同步复位与异步复位的优劣：异步复位消耗的PFGA逻辑资源相对来说要少些，因此触发器自身带有清零端口不需要额外的门电路，这是其自身的优势，通常在要求不高的情况下直接使用异步复位就OK。 下面我用verilog来演示下同步复位与异步复位。 同步复位的verilog程序如下： module D_FF (

//Input ports SYSCLK, RST_B, A, //Output ports B ); //========================================= //Input and output declaration //========================================= input SYSCLK; input RST_B; input A; output B; //========================================= //Wire and reg declaration //=========================================

Javascript基础

表JS基本类型有什么？引用类型有什么？ 基本类型：number,string,boolean,undefined,null 引用类型：基本类型以外的都是引用类型，如object/array/function/date等等 关于基本类型与引用类型的区别可以详细看看@Naraku_的这篇文章： [ JS 进阶] 基本类型引用类型简单赋值对象引用 概况起来有这么几个要点： 1.我们无法给基本类型的对象添加属性和方法； var m1 = 123; https://www.wendangku.net/doc/ca1635779.html, = 'abc'; console.log(https://www.wendangku.net/doc/ca1635779.html,); //输出：undefined 2.基本类型对象的比较是值比较，而引用类型对象的比较是引用比较； var m1 = 123, m2 = 123; console.log(m1 === m2); //输出：true var o1 = {}, o2 = {}; console.log(o1 === o2); //输出：false 3.基本类型对象是存储在栈内存中的，而引用类型对象其实是一个存储在栈内存中的一个堆内存地址。 4.基本类型对象赋值时（执行=号操作），是在栈内存中创建一个新的空间，然后将值复制一份到新的空间里。 5.引用类型对象赋值时（执行=号操作），也是在栈内存中复制一份一样的值，但这个值是一个堆内存地址，所以被赋值的那个对象跟前者其实是一个对象。 var o1 = {}; var o2 = o1; https://www.wendangku.net/doc/ca1635779.html, = 'abc';console.log(https://www.wendangku.net/doc/ca1635779.html,); // --> abc console.log(https://www.wendangku.net/doc/ca1635779.html,); // --> abc o2.age = '123';console.log(o1.age); // --> 123console.log(o2.age); // --> 123 JS中的常见对置对象类

同步传输与异步传输的区别

在网络通信过程中，通信双方要交换数据，需要高度的协同工作。为了正确的解释信号，接收方必须确切地知道信号应当何时接收和处理，因此定时是至关重要的。在计算机网络中，定时的因素称为位同步。同步是要接收方按照发送方发送的每个位的起止时刻和速率来接收数据，否则会产生误差。通常可以采用同步或异步的传输方式对位进行同步处理。 1. 异步传输（Asynchronous Transmission）：异步传输将比特分成小组进行传送，小组可以是8位的1个字符或更长。发送方可以在任何时刻发送这些比特组，而接收方从不知道它们会在什么时候到达。一个常见的例子是计算机键盘与主机的通信。按下一个字母键、数字键或特殊字符键，就发送一个8比特位的ASCII代码。键盘可以在任何时刻发送代码，这取决于用户的输入速度，内部的硬件必须能够在任何时刻接收一个键入的字符。 异步传输存在一个潜在的问题，即接收方并不知道数据会在什么时候到达。在它检测到数据并做出响应之前，第一个比特已经过去了。这就像有人出乎意料地从后面走上来跟你说话，而你没来得及反应过来，漏掉了最前面的几个词。因此，每次异步传输的信息都以一个起始位开头，它通知接收方数据已经到达了，这就给了接收方响应、接收和缓存数据比特的时间；在传输结束时，一个停止位表示该次传输信息的终止。按照惯例，空闲（没有传送数据）的线路实际携带着一个代表二进制1的信号，异步传输的开始位使信号变成0，其他的比特位使信号随传输的数据信息而变化。最后，停止位使信号重新变回1，该信号一直保持到下一个开始位到达。例如在键盘上数字“1”，按照8比特位的扩展ASCII编码，将发送“00110001”，同时需要在8比特位的前面加一个起始位，后面一个停止位。 异步传输的实现比较容易，由于每个信息都加上了“同步”信息，因此计时的漂移不会产生大的积累，但却产生了较多的开销。在上面的例子，每8个比特要多传送两个比特，总的传输负载就增加25%。对于数据传输量很小的低速设备来说问题不大，但对于那些数据传输量很大的高速设备来说，25%的负载增值就相当严重了。因此，异步传输常用于低速设备。 2. 同步传输（Synchronous Transmission）：同步传输的比特分组要大得多。它不是独立地发送每个字符，每个字符都有自己的开始位和停止位，而是把它们组合起来一起发送。我们将这些组合称为数据帧，或简称为帧。 数据帧的第一部分包含一组同步字符，它是一个独特的比特组合，类似于前面提到的起始位，用于通知接收方一个帧已经到达，但它同时还能确保接收方的采样速度和比特的到达速度保持一致，使收发双方进入同步。 帧的最后一部分是一个帧结束标记。与同步字符一样，它也是一个独特的比特串，类似于前面提到的停止位，用于表示在下一帧开始之前没有别的即将到达的数据了。

解决js跨域问题

JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。AJAX和JSONP在jQuery中的调用方式看起来极为相像，千万不要被这种现象迷惑，它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容，而JSONP是动态的添加