Ajax原理 ppt课件
合集下载
基于AJAX和WebService的Web开发第01章序列化与特性精品PPT课件
总结
理解特性 特性的基本语法 自定义特性的步骤 特性的应用 什么需要序列化的类必须加什么特性？ 简述序列化与反序列化的步骤？
习题
1、.Net提供哪两种序列化技术： A.二进制和文本序列化 B.二进制和XML序列化 C. XML和文本序列化 D.文本和数据序列化
使用二进制方式存储对象
= new ("pro", ); BinaryFormatter bf = new BinaryFormatter();
bf.Serialize(, Profile);
二进制格式化器
将对象以二进制方 式格式化为流
Serialize的用法：
Serialize ( Stream serializationStream, Object graph)
特性
基本语法 – [特性名称(构造方法的参数…)]
构造方法参数
有哪些元素可以使用特性呢? – 程序集 – 模块 – 类型 – 字段 – 方法 – 方法参数 – 方法返回值 – 属性 – 事件
使用定制特性
有哪些元素可以使用特性呢?(续)
– 语法2:[目标元素名:特性(构造方法参数…)] – 演示:基本语法
使用反序列化
将序列化好的Profile数据反序列化为对象
= new ("pro", );
BinaryFormatter bf = new BinaryFormatter();
Profile = (Pro();
将指定流反序列化
类型转换
Deserialize的用法：
需要类型转换
public Object Deserialize ( Stream serializationStream )
Ajax核心技术-Ajax基础培训课件
1.
2.
XMLHttpRequest最早是在IE5中以ActiveX组件的 形式实现的。非W3C标准，在不同的浏览器上的 表现还是有所区别。 创建XMLHttpRequest对象（由于非标准所以实现 方法不统一）
1.
2.
Internet Explorer把XMLHttpRequest实 现为一个ActiveX对象。 其他浏览器（Firefox、Safari、Opera…） 把它实现为一个本地的JavaScript对象。
8/25/2010 9
3.1.7 XMLHttpRequest方法详介
6 setRequestHeader(String header,String value)
该方法为HTTP请求中一个给定的首部设值。 它的两个参数分别代表的含义为： 1. header:是指要设置的首部。 2. Value:是指要在首部中放置的值。 示例： xmlHttp.setRequestHeader("Content-Type", xmlHttp.setRequestHeader( , "application/x-www-form-urlencoded;"); ); 该方法必须在open()之后才能调用。
method:是指调用的特定方法（GET、POST、PUT）； url:是指所调用资源的url； Asynch:是指这个调用是异步还是同步，默认是true表示请求 是异步的； Username和password：是指你可以指定一个特定的用户名 和密码；
4.
示例： xmlHttp.open("GET","dynamicContent.xml",true); xmlHttp.open( , , );
2.
XMLHttpRequest最早是在IE5中以ActiveX组件的 形式实现的。非W3C标准，在不同的浏览器上的 表现还是有所区别。 创建XMLHttpRequest对象（由于非标准所以实现 方法不统一）
1.
2.
Internet Explorer把XMLHttpRequest实 现为一个ActiveX对象。 其他浏览器（Firefox、Safari、Opera…） 把它实现为一个本地的JavaScript对象。
8/25/2010 9
3.1.7 XMLHttpRequest方法详介
6 setRequestHeader(String header,String value)
该方法为HTTP请求中一个给定的首部设值。 它的两个参数分别代表的含义为： 1. header:是指要设置的首部。 2. Value:是指要在首部中放置的值。 示例： xmlHttp.setRequestHeader("Content-Type", xmlHttp.setRequestHeader( , "application/x-www-form-urlencoded;"); ); 该方法必须在open()之后才能调用。
method:是指调用的特定方法（GET、POST、PUT）； url:是指所调用资源的url； Asynch:是指这个调用是异步还是同步，默认是true表示请求 是异步的； Username和password：是指你可以指定一个特定的用户名 和密码；
4.
示例： xmlHttp.open("GET","dynamicContent.xml",true); xmlHttp.open( , , );
javaScript与Ajax基础第三章精品PPT课件
DOM方式
– addEventListener(“click”,函数,bCapture); – removeEventListener(“click”,函数,bCapture);
兼容问题的解决
7-66
事件处理程序的返回值
默认行为 Return false
7-77
Event对象
事件对象 IE的event对象 DOM的event对象
7-44
传统事件处理程序指派方式
在XHTML标记的事件处理属性中指定 在JavaScript中指定事件处理程序 优点：兼容 缺点：一个事件只能指定一个监听器
7-55
现代事件处理程序指派方式
IE浏览器方式
– attachEvent(“onclick”,函数) – detachEvent(“onclick”,函数)
第三章 JavaScript事件模型
7-11
目标
了解JavaScript事件模型 掌握Event对象 掌握常见事件类型 编写事件处理程序
7-22
JavaScript事件模型
事件流 DOM事件流
– 事件冒泡 – 事件捕获
7-33
事件监听器
事件监听器 传统事件处理程序指派方式 现代事件处理程序指派方式
7-1155
学习并没有结束，希望继续努力
Thanks for listening, this course is expected to bring you value and help 为方便学习与使用课件内容，课件可以在下载后自由编辑
的代码，以及keypress 事件的Unicode字符 。(firefox2不支持 event.keycode，可以用 event.which替代 ) – returnValue属性和preventDefault()：一个布尔属性，设置为false的 时候可以组织浏览器执行默认的事件动作 – cancelBubble属性和stopPropagation：一个布尔属性，把它设置为 true的时候，将停止事件进一步起泡到包容层次的元素
– addEventListener(“click”,函数,bCapture); – removeEventListener(“click”,函数,bCapture);
兼容问题的解决
7-66
事件处理程序的返回值
默认行为 Return false
7-77
Event对象
事件对象 IE的event对象 DOM的event对象
7-44
传统事件处理程序指派方式
在XHTML标记的事件处理属性中指定 在JavaScript中指定事件处理程序 优点：兼容 缺点：一个事件只能指定一个监听器
7-55
现代事件处理程序指派方式
IE浏览器方式
– attachEvent(“onclick”,函数) – detachEvent(“onclick”,函数)
第三章 JavaScript事件模型
7-11
目标
了解JavaScript事件模型 掌握Event对象 掌握常见事件类型 编写事件处理程序
7-22
JavaScript事件模型
事件流 DOM事件流
– 事件冒泡 – 事件捕获
7-33
事件监听器
事件监听器 传统事件处理程序指派方式 现代事件处理程序指派方式
7-1155
学习并没有结束，希望继续努力
Thanks for listening, this course is expected to bring you value and help 为方便学习与使用课件内容，课件可以在下载后自由编辑
的代码，以及keypress 事件的Unicode字符 。(firefox2不支持 event.keycode，可以用 event.which替代 ) – returnValue属性和preventDefault()：一个布尔属性，设置为false的 时候可以组织浏览器执行默认的事件动作 – cancelBubble属性和stopPropagation：一个布尔属性，把它设置为 true的时候，将停止事件进一步起泡到包容层次的元素
AJAX讲座
4DWR
直接从JavaScript代码中调用Java方法的框架。其可以从 JavaScript将调用传递到Java方法，然后调用JavaScript的 回调函数。
5EXT 是一个用javascript写的，主要用于创建前端用户界面，是一 个与后台技术无关的前端ajax框架。Ext的UI组件模型和开发 理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两 者，并为开发者屏蔽了大量跨浏览器方面的处理
MVC模式：
控制器由事件处理函数组成 视图由DOM元素组成（HTML呈现|编程方 式处理） 模式是JavaScript对象
安全
沙箱：
JavaScript代码是可执行代码 只能访问很少计算机资源的封闭环境。 AJAX应用不能读取或写入本地文件系统。
除了其自身所在的Web域，其不能创建 任何 到其他Web域的网络连接。程序生成的IFrame可以 加载来自其他域的页面，并运行其中的代码，但是 两个域的脚本不能互相交互
function Button(value, domEl){ //表示按钮对象的类 this.domEl = domEl; //DOM节点的引用 getElementById this.value = value; //点击显示的值 this.domEl.buttonObj = this; this.domEl.onclick = this.clickHandler; } Button.prototype.clickHandler = function(event){ // alert(this.value) var buttonObj = this.buttonObj; var value = (buttonObj && buttonObj.value)? buttonObj.value : “unknown value”; alert(value); }
第1章：Ajax基本原理及开发过程
XMLHttpRequest 对象
IE7+、Firefox、Chrome、Safari 语法：variable=new XMLHttpRequest();
老版本的
Internet Explorer使用 ActiveX 对象
IE5、IE6
语法：variable=new ActiveXObject("Microsoft.XMLHTTP");
Ajax实例开发步骤
在页面完成回调方法，处理服务器端响应，改变页面效果
function getStatusCallback(){ if(xhr.readyState == 4){ if(xhr.status == 200){ var ret = xhr.responseText; var span = document.getElementById("status"); if(ret.indexOf("true")>-1){ span.innerHTML = "<font color='red'><b>用户名已使用</b></font>"; }else{ span.innerHTML = "<font color='green'><b>用户名可用</b></font>"; }
创建 Servlet 响应请求
在页面完成回调方法，处理服务器端响应，改变页面效果
Ajax实例开发步骤
新建JSP页面register.jsp
<body> <h2>注册用户</h2> <form action="UserServlet" method="post"> <p>用户名：<input type="text" name="name" id="uname" onblur="checkName();"/> <span id="status"></span></p> <p>密码：<input type="password" name="pass" id="pass" /></p> <p><input type="submit" value="注册" /> <input type="reset" value="重置" /></p> </form> </body>
javaScript与Ajax基础第四章精品PPT课件
In order to better meet the needs of learning and using, the courseware is freely edited after downloading
89-9
历史对象
go() back()和forward()
81-100
document对象
URL属性 页面对象 Document动态写入
81-111
lபைடு நூலகம்cation对象
href属性 reload()
81-122
navigator对象
取得浏览器类型的方法
– 判断浏览器类型 – 取得浏览器版本号
第四章 JavaScript浏览器对象模型
81-1
目标
了解BOM 学习常用的BOM对象
82-2
BOM简介
83-3
window对象
窗口操作 导航和打开新窗口 系统对话框 状态栏 时间间隔和暂停 历史
84-4
窗口操作
moveTo()与moveBy() resizeTo()与resizeBy()
85-5
导航和打开新窗口
open() close() opener
86-6
系统对话框
alert() confirm() prompt
87-7
状态栏
defaultStatus status
88-8
时间间隔
setTimeout()和clearTimeout setInterval()和clearInterval()
81-133
screen对象
availHeight availWidth
81-144
总结
BOM模型 window的open()和close() document对象 location对象
89-9
历史对象
go() back()和forward()
81-100
document对象
URL属性 页面对象 Document动态写入
81-111
lபைடு நூலகம்cation对象
href属性 reload()
81-122
navigator对象
取得浏览器类型的方法
– 判断浏览器类型 – 取得浏览器版本号
第四章 JavaScript浏览器对象模型
81-1
目标
了解BOM 学习常用的BOM对象
82-2
BOM简介
83-3
window对象
窗口操作 导航和打开新窗口 系统对话框 状态栏 时间间隔和暂停 历史
84-4
窗口操作
moveTo()与moveBy() resizeTo()与resizeBy()
85-5
导航和打开新窗口
open() close() opener
86-6
系统对话框
alert() confirm() prompt
87-7
状态栏
defaultStatus status
88-8
时间间隔
setTimeout()和clearTimeout setInterval()和clearInterval()
81-133
screen对象
availHeight availWidth
81-144
总结
BOM模型 window的open()和close() document对象 location对象
Ajax2_使用Ajax发送异步请求PPT资料23页
设置回调函数（续）
需要特别注意的是该属性在代码中设置的位置 —— 它是在调用send() 之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请 求之后能够查看该属性！
注意，这里updatePage是个函数名称，不能写成updatePage() 函数调 用的形式！这表示将updatePage()函数运行的返回结果赋值给 onreadystatechange属性。体会JavaScript中函数也是对象的特征。
当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest 对象的onreadystatechange属性允许指定一个回调函数反向调用Web 页面中的代码。
当服务器完成请求之后，会查看XMLHttpRequest对象，特别是 onreadystatechange属性。然后调用该属性指定的任何方法。之所以 称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。 这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务 器响应请求并触发onreadystatechange属性指定的回调方法。
处理服务器响应
请求发送后，用户可以继续使用Web表单（同时服务器在处理请 求）。而当服务器完成了请求处理，服务器查看 onreadystatechange属性确定要调用的方法。除此以外，可以 将应用程序看作其他应用程序一样，无论是否异步。换句话说， 不一定要采取特殊的动作编写响应服务器的方法，只需要改变表 单或其它的页面结构，让用户访问另一个 URL 或者做响应服务 器需要的任何事情。
0：请求没有发出（在调用 open() 之前） 1：请求已经建立但还没有发出（调用 send() 之前） 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部） 3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应 4：响应已完成，可以访问服务器响应并使用它
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Ajax原理
对于不同的浏览器，创建方式不一样：
IE6.0以前 var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); MSXML3.0 var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); FIREFOX,IE7.0以及其他非IE浏览器 var xmlhttp = new XMLHttpRequest();
DOM Javascript CSS XMLHttpRequest
Ajax原理
Ajax原理
XmlHttpRequest对象是ajax技术的核心， 没有XmlHttpRequest对象就相当于没有 ajax
XmlHttpRequest是XMLHTTP组件的对 象 ,通过XmlHttpRequest可以像桌面应用 程序一样只同服务器进行数据层面的信息 交换，而不用刷新页面
Ajax原理
Ajax原理
更丰富的“用户体验”，新的交互方式
内容聚合
自动 补全
每个小“窗口” 可以关闭、最 小化和进行个
性化设置
所有操作都是在不刷新窗口的情况下完成的
Ajax原理
无刷新：不刷新整个页面，只刷新局部 无刷新的好处
只更新部分页面，有效利用带宽
只是登录，没 必要刷新“庞 大”的页面。
无刷新的好处
getResponseHeader(DOMString header，value)方法 用于检索响应的头部值。
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对
Ajax原理
步骤： 1、创建XmlHttpRequest对象，并初始化。 2、发送请求 3、服务器接收请求进行处理 4、返回响应数据 5、客户端接收 6、依据响应数据修改客户端页面内容
Asynchronous 异步的
JavaScript
And XML
异步：发送请求后不等返回结果，由回调函数处理结果
JavaScript：向服务器发起请求，获得返回结果，更新页面 XML：封装数据
用途
使用JavaScript从服务器获取数据而不必刷新整个页面
Ajax原理
AJAX是：JavaScript、CSS、DOM、 XmlHttpRequest四种技术的集合体，主要应用于异 步获取后台数据和局部刷新。
CSS
DOM
JavaScript XmlHttpRequest
服务器
Ajax原理
Ajax的优势
不需要插件支持 优秀的用户体验 提高Web程序的性能 减轻服务器和带宽的负担
Ajax的劣势
浏览器对XmlHttpRequest对象的支持度不足 破坏浏览器前进、后退按钮的正常功能 对搜索引擎支持不足 开发和调试工具欠缺
Ajax原理
创建工厂函数以支持任何浏览器的XMLHttpRequest对象
Ajax原理
调用XMLHttpRequest对象的open()和send() 方法
xmlhttp.open(“GET”,url,true); xmlhttp.send(null);
Ajax原理
没什么代码好写的，等吧！！！！……
• 属性：
属性 onreadystatechange readyState
ResponseText
ResponseXML status statusText
Ajax原理
作用
这是个事件，在状态改变时触发
对象状态 把一个HTTP请求发送到服务器时将经历若干种状态：一 直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚 本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的 当前状态的readyState属性。 0 未初始化 1 读取中 2 已读取中 3 交互中 4 完成
服务器返回的状态文本信息。
Ajax原理
方法
方法
作用
abort()
用它来停止当前请求
open(“方法名”,”URL”) 方法名是指，请求的方法get或者是post 这个方法可以理解为准备一个请求。
send(content)
仅当readyState值为1时，你才可以调用send()方法； 否则的话，XMLHttpRequest对象将引发一个异常。
提供连续的用户体验
Ajax原理
观看视频时执行操作， 不希望页面刷源自视频从头播放吧只！刷新了局部 页面，视频继 续播放
Ajax原理 无刷新的好处
提供类似C/S的交互效果，操作更方面
使用Ajax可以实现这样的效果
Ajax原理
Ajax原理
Ajax：只刷新局部页面的技术
AJAX ： Asynchronous Javascript And XML
setRequestHeader()
该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值 为1时，你可以在调用open()方法后调用这个方法；否 则，你将得到一个异常。
getResponseHeader()
Ajax原理
在返回响应数据之前，我们要先判断一下 readyState的数值是否为4，也就是是否信息 全部返回。
if (xmlhttp.readyState = = 4 ) { //信息已经返回，可以处理}
这个responseText属性包含客户端接收到的HTTP响应的文本内 容，表示为一个字符串。当readyState值为0、1或2时， responseText包 含一个空字符串。当readyState值为3(正在接收)时， 响应中包含客户端还未完成的响应信息。当readyState为4(已加载) 时，该 responseText包含完整的响应信息。 这个跟上一个很像，它返回一个兼容DOM的XML文档对象。 返回http协议的状态码，如404是URL错误200交互成功。
Ajax原理
Ajax原理
掌握Ajax的组成 掌握Ajax的原理 掌握XmlHttpRequest对象的属性、方法和 事件 掌握基于Ajax技术的应用编程
互联网历史
null
黑暗年代
静态网站
动 态 网 页
Ajax原理
革命啦，革命啦！ 三五年就来一次
Web 2.0特点
内容聚合：RSS 用户贡献内容 社会化网络