AJAX技术和应用_H5之家 - 中国HTML5教程资源分享第一站

AJAX 技术和应用技术和应用
Ajax 技术的发展过程一． 1. Ajax 的概念是异步 javascript 和 xml 的英文缩写技术核心：使用 XMLHttpRequest 对象发送异步请求. 2. Ajax 的技术原理 1) 技术范围 XHTML 和 CSS DOM 进行动态显示和交互 XML 和 XSLT 进行数据交互和操作 XMLHttpRequ

est 进行异步数据接收使用 Javascript 作为前端代码 2) 应用的因素 1) 2) 3) 4) 5) 减轻服务器的负担。按需提取数据无刷新提取数据用户体验效果。减少用户等待时间将部分负荷转移到客户端，利用客户端闲置的处理资源页面呈现与分离

3) 技术应用的场景 1) 数据验证 2) 按需提取数据 3) 无刷新提交和操作 4) 自动局部刷新 3. 其它二． Ajax 的应用基础的应用基础 1) XMLHttpRequest 和 javascript XMLHttpRequest 的对象方法方法 Abort() getAllResponseHeaders() getResponseHeder(“headerlabel”) Open(“method”,url,”[async]”,username,password) 说明停止当前请求将 HTTP 请求的响应作为键/值返回返回指定首字母的字符串建立对服务器的调用

Send(content) setRequestHeader(“label”,”value”) 属性 onreadystatechange readystate responseText responseXML status statusText

向服务器发送向指定首部设置值说明状态改变的事件触发器，每个状态改变都会触发对象状态服务器的响应，字符串服务器响应的 XML，可以解析为 DOM 服务器返回的 HTTP 状态码 HTTP 状态码的相应的文本 XMLHttpRequest 的对象属性

2) 示例： Var xmlhttp; If( IE) { Xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); }else (window.. XMLHttpRequest) { Xmlhttp = new XMLHttpRequest(); } Xmlhttp.open( ); Xmlhttp.onreadystatechange=callback; Xmlhttp.send(null); Function callback() { } 3) Javascript 面向对象的编程方法 Function ( x1 ,x2 ) { This.A=x1; This.B=x2; } 4) DOM 对象 a. HTML 常用节点类型名称 Element Text Document Comment DocumentFragment Attribute NodeType 1 3 9 8 11 2 b. Document 的常用方法 createAttribute() 用指写名称创建新的 Attribute 说明元素节点文本节点 Document 注 Document 片断节点属性

createComment() createElement() createTextNode() getElementById() getElementByTagName() c. tagName getAttributeNode() getELementsByTabName() has Attribute() removeAttribute() removeAttributeNode() setAttribute() setAttributeNode() d. Node 常用属性和方法 Attributes childNodes firstChild lastChild nextSibling nodeName nodeType

用指写值创建新的 Comment 用指写值创建新的 Element 用指写值创建新的 TextNode 返回 Element 返回 Element

Element 的常用属性和方法返回值返回值返回值返回值返回值返回值返回值返回值 parentNode() previousSibling() appendChild() cloneNode() HasChildNodes() insertBefore() removeChild() replaceChild()

三．

Ajax 的应用模型

客户端―――用户操作--------用户界面--=-------客户端处理----------Ajax 引敬------时间 -----数据传输-------服务器端处理四． 1) 2) 3) 4) 5) 6) 7) 五． .NET 框架上基于 Ajax 技术的实现无刷新数据验证自动执行功能动态树形菜单无刷新搜索与无刷新分页无刷新即时通讯。聊天室等地图。GIS （Google map） MSN 的 WEB 实现 (p2p) 我的项目应用案例的介绍我的项目应用案例的介绍

一．案例介绍在 Expedia.Bugsystem.Web 项目的 Advance Query 功能模块中，用户可以根据需要自由组合 Where 子句，每一个子句包括数据字段，关系表达式，字段值，逻辑表达式四部分。其中数据字段部分与其它三部分有逻辑对应关系。随着数据字段部分的数据类型不同，其它三部分的描述将发生变化. 二．运用技术 1. C#技术：取数据库中的数据，并进行数据整理。 2. JS ：客户端事件。 3. Ajax ：响应客户端请求，调用服务器端的方法与数据，再反馈给客户端进行操作或展示。三．实现原理 1. 介绍 Ajax 前身介绍，AjaxPro 隶属于.net2.0 框架，是在 2.0 框架中回调技术出现后。对 Ajax 技术的一种模拟 2. 配置与应用分三步：第一步：引用 AjaxPro.net 2.0 dll 第二步：在 System.Web 配置节点下。添置 <httpHandlers> <add veb=”Post,Get” path=”ajaxpro/*.ashx” type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> </httpHandlers> 在运行时，引用文件中将会自动在 HTML 文件的头部(head)添加 <link src=” *.ashx”> 第三步： 1. 在 Page Load 事件中，注册运行对象 AjaxPro.Utility.RegisterTypeForAjax(typeof(对象名)); 2. 修改特征 [AjaxPro.AjaxMethod] //修饰方法，必须用 public 3. 运用语法对象名.代理方法(参数，回调函数) 应用说明 1. 此后在客户端语言中，可以直接引用对象名，与修饰的方法,及其返回结果。比如返回结果是一个 DataTable 对象。 JS 中接受返回结果后，在

2. 3. 前台构造 Field Name

可以当作 C#环境来使用 DataTabel 对象. AjaxPro.net 的缺点。是它不可以操作服务器端的控件。

Oprator

Value

And / Or

以上表格示例中，从第二行起，每一行是一个 Where 子句的组成内容。从构造形式上需要特别说明的有两点： 1）在此表格的最右边一列实际上还存在一列，该列已被隐藏。在该列的单元格中，有一个单选框，它的值是表示这个表格行的索引以及选择行的索引。还包括一个 HiddenText 。它用来存放这个 Where 子句中数据字段的数据类型. 2）在以上表格第二行起每一个可见的单元格中，均包含两个 Html 控件，Text 类型和 Hidden 类型。在 Text 控件上触发的客户端事件有： ondblclick ：
FindTxtValueFromDiv ，onKeyup: FindTxtValueFromDiv , onfocus : selectTableRow , onblur: removeDivandIfrme .

4. 重要全局变量定义及意义
text, date, dropdown, etc. By trial and error from comparing values in the UI to the Flds table, I came up with: Type 2 3 4 5 6 8 9 10 11 12 13 14 Description ID Text Date Dropdown Lookups? Box titles Rev Links Environment Parent Heirarchy Example BugID, BetaID Title, Days to fix, CaseID Hotfix date, resolved date… Status, Issue Type, severity ResolvedBy, Assigned to, HowFound, Lang, source, KB Article opened, triaged, project, dev/test/closed naming convention is to prefix with an "X" Opened Rev, FixedRev Links Environment ParentStatus, DependentLinkStatus, ParentResolution RegressCount, LinkCount, MigrationStatus, ChildLinkCount, ParentBugID

Heirarchy Date PendingDate, DependentDate, ParentChangedDate

综合以上。我定义三个全局变量用来保存数据类型。把字符型。整数型。日期型分别用变量来保存。如： intString="a2a,a13a" charString="a5a,a3a,a6a,a12a,a11a,a9a" dateString="a4a,a14a" 下接选择的 DIV 中的全局变量有 1 2
DIV_BG_COLOR DIV_HIGHLIGHT_COLOR

背景色选择项的高亮显示色

3 4 5

queryField lastVal globalDiv

虚拟的输入框最后一次选择的值检查 DIV 是否显示

5. 主要方法及用途 doSubmit() RemoveAllRow() FindTxtValueFromDiv(objTxt, bjtxtTestHidden ,index) CheckFieldInputValue(ArrayList , inputValue) FilterArrayList(ArrayList , inputValue) EmptyValue(objTableRow) GetSelectValue( objHiddenValue ,objFieldName) 组织形成 SQL 的参数。便于在服务器端实例化删除所以子句在 Text 控件中输入时触发的事件。读隐藏域的值。转换成数组检查选择结果是否存在于数组中，div 中）（根据输入的字符串过滤数组在更换字段时，清空第二。三，四列在第一列输入时调用。主要是获取在 DIV 中的选择项的文本。进行分解。然后发送至服务器端，取第二，三，四列的数据。获取当前选择行的索引移除当前选择行新建一行获取当前行某一个 Cell 的 html 文本选择当前行设置当前行的文本框的样式清除当前行的文本框的样式转换操作符获取当前 DIV 对象向当前 DIV 传送数据。主要用数组分解后赋值选择结果选择完结果后，决定在哪一个文本框上设置输入焦点检查当前行的索引选择结果高亮显示清除高亮显示显示 DIV 用 frame 包含 DIV，主要是解决 DIV 总显示在文本框之上的问题在当前文本框上的按键检查与处理

getSelectedRowIndex() RemoveRow() NewInsertClause() getCellHtml(str , iii) SelectRow( objs ) SetTextBoxStyle(obj) ClearTextBoxStyle(obj) ChangeOprator(strValue) getDiv (divID) showQueryDiv(resultArray , objTxt) selectResult() _selectObjSetFocus(Symbol) _CheckcurrentIndex(currentIndex) highlightResult() unhighlightResult() showDiv (show) adjustiFrame() keypressHandler (evt) _Selected(item , Symbol) getSelectedSpanNum(div) setSelectedSpan(div, spanNum)

6. 应用逻辑

7. 初始化时的实现从服务器端提取数据。向表格中的隐藏域控件进行赋值。 1）第二列的隐藏域对应字段 2）第三列的隐藏域对应操作表达式 3）第四列的隐藏域为所对应的第二列的值。 4）第五列的隐藏域为逻辑表达式. 同时向每一个文本框 (HtmlText) 赋当前的选择值

8. 输入操作 1) 在 HtmlText 控件中输入字符时 2) 提取同单元格中隐藏域的值。转换成数组。 3) 创建 DIV。模拟下拉框。 <iframe> <div> <div className=”” BackColor=””><span>text</span></div> <div className=”” BackColor=””><span>text</span></div> <div className=”” BackColor=””><span>text</span></div> <div className=”” BackColor=””><span>text</span></div> </div> </iframe> 4) 检查输入字符，过滤数组。遍历所有元素，每一个远素与输入字符比较 (检查依据：indexOf 的值大于 0 或小于 0) 5) 检查按键的 ASCII 值。 1) 如果是回车键。TAB 键。则选择结果。 2) 如果是向左向右光标键，则选择结果。移动焦点 3) 如果是向上或向下光标键，则检查每一个嵌套 DIV 中的 ClassName 和 BvackColor 是否为高亮显示的标识。如果是，则清除。把上一项或下一项高亮显示 6) 移动焦点的过程 1) 向左移动时，如果是一行的最后一个，则移到下一行的第一个。 2) 向左移动时，如果是最后一行的最后一个，则新增一行。 3) 向右移动时，如果是一行的第一个，则移到上一行的第一个。 4) 向历移动时，如果是第一行的第一个。则返回 7) 选择结果的过程 1) 如果是在第二列（字段）上选择结果。则会提取字段的数据类型。 2) 提取到数据类型后，调用[AjaxPro.Method]修饰的方法。从服务器端 3) 提取数据。为第三，四，五列赋值。 4) 选择结果后。检查选择的结果或输入的结果是否在下拉框中存在。 9. 其它

########################################################################### 六．Ajax 其它框架的应用与推广 1). webservice.htc 的应用 (Atias) ---微软官方网站上下载通过 JS 调用 WS div_service.useService(url,"myselect");//loading // myselect WS 的类名 //div_service DIV 的 ID，BEHAVIOR：url(*.htc) div_service.myselect.callService( DoWithMsg,"Get",Param); // DoWithMsg 回调 JS 函数, Get WS 方法，Param 参数

2). magicajax.dll 操作服务器控件 string strScript = Page.GetPostBackClientEvent(服务器控件 ID, "");//已定义事件七．其它

更多相关文档:

浅谈移动互联网技术

顾名思义,移动 Web2.0 技术是在 Web2.0 技术的基础上建立起来的,主要包括:丰富互联网应用的移动 Ajax 技术,实现应用聚合的移动 Mashup 技术, 支持桌面应用且...

Web2.0相关的技术及应用

Web2.0相关的技术及应用_计算机软件及应用_IT/计算机_专业资料。Web2.0相关的...比如像 Ajax 技术, GoogleMAP/Gmail 里面用得出神入化。 2、WEB2.0 中的...

Web应用系统开发技术

实验目的与要求 1.熟练掌握 Myeclipse 的使用 2.掌握 Ajax 基本应用方法 Ajax 应用基础二、实验内容 1.使用 ajax 技术在无刷新的情况下,验证用户名是否存在。 ...

Web技术与应用-考试卷

Web技术与应用-考试卷_互联网_IT/计算机_专业资料。( 2011 至 2012 学年第...服务 E. 事务 8. AJAX 技术使用的是哪种脚本语言 A. VC++ B. C# C. ...

讨论:.NET 4各项技术的应用前景

Web 开发技术:在现有.NET Web 开发技术应用现状之下,任何一个与现有的 ASP.NET 网站 (以 Web Form+AJAX 为主体技术) 集成麻烦的技术, 都很难有美好的前途...

浅析AJ AX开发技术

技术【摘要】介绍了一种网站交互方式技术 AJAX,对 AJAX 开发技术基本原理进行了探讨, 最后列出一个初步的 AJAX 开发框架示例方便读者开发实用的 W EB 应用程序...

JSON核心技术与应用

JSON核心技术与应用_IT/计算机_专业资料。本文详细介绍了json的使用,大量的例子还有...有许多 Ajax 框架早已包含了处理 JSON 数据的能力,例如 Prototype(一个流行...

电子商务应用与技术

交互性差 Ajax(Asynchronous Javascript and XML) () Ajax 技术实际上是将一系列早已出现的技术遵照一定的规律结合在一起。网络应用程序需要改变的方面如下: (一...

浅谈网站开发技术的发展与前景

AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest ...

Ajax常见面试题

Ajax常见面试题_计算机软件及应用_IT/计算机_专业资料。j2ee1. Ajax 有四种技术组成:DOM,CSS,JavaScript,XmlHttpRequest 中控制文档结构的是: () A DOM 参考答案...

更多相关标签: