7_Web20技术与应用

可以在Web的基础上对Wiki文本进行浏览、创建和更改，而
且其代价远比HTML文本小
Wiki系统还支持那些面向社区的协作式写作，为协作式写作
提供了必要的帮助，并为Wiki的写作者自然构成的社区提供 简单的交流工具 以Wiki系统可以帮助我们在一个社区内共享某个领域的知识
与其它超文本系统相比，Wiki有使用简便且开放的特点，所
4/17/2011 3:47 PM 7
Web 2.0的一个笼统界定

Web2.0是与互联网有关的一系列技术发 展到一定阶段、应用的门槛逐步降低、技 术与需求得以很方便地结合、从而产生的 一次大规模的应用普及。这种普及带来经 济、文化、思想理念和社会生活等各方面 的显著变化，被人们归纳统称为 “Web2.0”。
4/17/2011 4:47 PM
27
9
XMLHttpRequest的常用属性

onreadystatechange status
当请求状态改变时该函数被调用 服务器返回的HTTP状态 ○ 例如：200 OK, 404 Not Found, 500 Internal Server Error 服务器返回的状态文本 响应内容的全部文本信息 返回的DOM文档的XML数据
什么是XMLHttpRequest？

XMLHttpRequest是一种发送异步GET和 POST方法的HTTP请求机制 它的特点：
提供用户的最小化反馈，特别适合后台任务 支持回调方法，可根据用户连接状态处理 允许多请求连接，特别是在新版本浏览器中

如何使用XMLHttpRequest？

4/17/2011 3:47 PM
3
1
什么是Web 2.0? Web 1.0 vs Web 2.0 Web 2.0应用举例
4/17/2011 3:47 PM
4
什么是Web 2.0？

Web2.0是2003年之后互联网的热门概念 之一，但是直到今天对什么是Web2.0并 没有很严格的定义。它是相对Web1.0的 一类新互联网应用的统称。

基于XML的数据 基于JSON的数据 基于纯文本的数据
4/17/2011 5:00 PM
31
创建一个请求

初始化XMLHttpRequest对象
if (window.XMLHttpRequest) { // 使用非IE浏览器，如Mozilla, Safari等 http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // 使用IE浏览器 http_request = new ActiveXObject("Microsoft.XMLHTTP"); }
12
4
Web 2.0应用之博客




博客或网络日志（英语：Blog， 为Web Log的混成词），一种通 常由个人管理、不定期张贴新 的文章、图片或影片的网页。 一个典型的博客结合了文字、 图像、其他博客或网站的超链 接及其它与主题相关的媒体。 能够让读者以互动的方式留下 意见，是许多博客的重要要素。 大部分的博客内容以文字为主， 仍有一些博客专注在艺术、摄 影、视频、音乐、播客等各种 主题。 博客是社会媒体网络的一部分。
4/17/2011 3:47 PM
8
Web 2.0的主要原则
Web 作为平台 采用集体智能 以数据为核心 永远的测试版 轻型商务模式 软件独立于设备 丰富的用户体验
4/17/2011 7:10 PM
9
3
Web模式对比
4/17/2011 7:10 PM
10
Web 1.0 vs Web 2.0

Web1.0

一种创新的媒介形式 一个集中的社区环境 一种全新的营销理念
4/17/2011 3:47 PM
18
6
什么是Ajax？ Ajax Ajax编程入门
4/17/2011 3:47 PM
19
什么是AJAX？

异步的JavaScript与XML技术
Asynchronous JavaScript And XML
第七讲
新思想的新问题
技术恐惧思想的可怕并不仅在于它似乎在现 实中有某种基础，而更为可怕的是这种思 想所营造的陈规与成见形成的对问题看法 的壁垒。 ——让-伊夫•戈菲《技术哲学》 对技术的蔑视也是一样。 ——Keven
4/17/2011 3:47 PM
2
内容提要
Web 2.0 Ajax简介 Web 3.0？
同步式网络应用模型
异步式网络应用模型
8
Ajax的优点

降低浏览器与服务器之间的带宽要求 部分解决双向时延问题
更快的响应速度 绝大部分内容只读取一次

实例：

MacRumors.com是一个关于苹果产品的谍报网站，也
直播转发CEO Steve Jobs的这种演讲 平均有100,000+用户在线 平均每个用户每分钟刷新一次页面，或者更频繁 最高时触发流量2小时内高达196GB 改为基于AJAX的系统实现后： ○ 测定高峰流量为32 GB, 约1/6倍
XMLHttpRequest包含一系列封装的 属性和方法，便于调用
常用属性
• onreadystatechange、 status、statusText • responseText、 responseXML
常用方法
• open、send • abort • getAllReponseHeaders、 getResponseHeaБайду номын сангаасer、 setRequestHeader
创建请求的处理程序

设置回调函数，即指定当请求状态改变时调用的函数
http_request.onreadystatechange = myCallbackFunction;
编辑回调函数 function myCallbackFunction() {

}
if (http_request.readyState == 4) { // 装载成功完成，收到请求响应 } else { // 未完成状态 }
4/17/2011 3:47 PM
14
Web 2.0应用之网摘



网摘（社交性书签）是一种 提供超链接的收藏和分享的 社交性软件/或网站。收藏 的超链接可以被许多人在网 络上分享，因此也有人称之 为网络书签 用户可以收集，分类，聚合 感兴趣的网络信息，，也能 方便的与其他人分享自己的 个人收藏，并从其他用户收 藏中进行信息采集 社交性书签的一大特点是分 众分类法（Folksonomy）， 通过自发性的非等级标签分 类方便地进行信息聚集分类。
返回header中的特定值，比如Content-Type等
setRequestHeader(“name”,”value”)
自定义发送的HTTP请求中的header中的特定值
10
利用XMLHttpRequest编程
创建一个请求 创建该请求的处理程序 检查请求的响应代码 获取服务器的响应内容 处理响应内容的数据
4/17/2011 3:47 PM
15
5
Web 2.0应用之维基
维基，Wiki，是一种在网络上开放、可供多人协同创 作的超文本系统。 Wiki创始人将它定义为“一种允许一群用户通过简单 的描述来创建和链接一组网页的社会计算系统”。 Wiki包含一套能简易制作、修改HTML网页的系统，再 加上一套记录和编排所有改变的系统，并且提供还原 的功能。 Wiki系统属于一种人类知识的网络系统：
功能和上面一样，加入几个可选参数： ○ async – (boolean) 通知浏览器是否等待响应 ○ username – 访问URL的用户名 （如果需要身份验证） ○ password –访问URL的密码 （如果需要身份验证）

send(content)
初始化连接并发送DOM数据或者字符串

Web 2.0是一种新的思维方式和态度 Web 2.0不是一种或一类特定的技术
4/17/2011 5:28 PM
5
Web 2.0的应用
4/17/2011 3:47 PM
6
2
Web 2.0，大家怎么看？
Web 2.0 对计算机工业来说是一种商业革命， 起因于开始把互联网当成交易平台，并企图 去理解在新的平台上通往成功的规则。 ——Tim O'Reilly Web 2.0 是一个架构在知识上的环境，人与人 之间交互而产生出的内容，经由在服务导向 架构中的程序，在这个环境被发布，管理和 使用。 ——IBM的社区网络分析师，Dario de Judicibus
请求状态代码 0 1 2 3 4 Uninitialized 非初始化 Loading 装载中 Loaded 已装载 Interactive 交互中 Complete 完成
11
检查请求的响应代码
function myCallbackFunction() { if (http_request.readyState == 4) { if (http_request.status == 200) { // 响应正确 } else { // 返回的响应有问题 } } else { Request Status Codes // 响应尚未完成 200 OK } } 404 Not Found
传统媒体的网络化 单向发布信息 用户通过浏览器获取信息

Web2.0
强调用户的参与性，以用户为中心 自由地接受信息和共享知识 更注重用户的交互作用 用户既是网站内容的消费者（浏览者），也
是网站内容的制造者
4/17/2011 3:47 PM
11
变革背后的推动力量

社会层面：
4/17/2011 3:47 PM
16
Web 2.0的商业价值
4/17/2011 3:47 PM
17
Web 2.0，盲人摸象
技术研究者眼中的Web2.0是SNS、BLOG等 社会性软件的兴起 博客们则认为Web2.0是人与人之间更为便捷 的互动 在风险投资商眼中，Web2.0又代表了新的商 业机会和行业游戏规则 从营销者的角度来看，Web2.0则至少意味着 三个方面的内容
13
4/17/2011 3:47 PM
Web 2.0应用之微博



微博客Microlog是一种允 许用户及时更新简短文本 （通常少于200字）并可 以公开发布的博客形式 微博客的代表性网站是 Twitter，这个词甚至已经 成为了微博客的代名词 微博客的内容不同于一个 传统的博客，因为它是比 博客更加典型且微小

abort()
终止HTTP请求
XMLHttpRequest 的常用方法

getAllReponseHeaders()
返回HTTP响应中的HTTP头部信息 ○ 例如: Content-Type: text/html, Referer: <url>

getResponseHeader(“header”)

statusText
responseText
responseXML
XMLHttpRequest 的常用方法

open(“method”, “URL”)
发出一个GET或POST的请求到指定的URL
open(“method”, “URL”, async, username, password)

自由软件与开源软件的成功 用户自治能力的增长 对基于Internet的合作的需求增长 接入带宽的提高 网络接入人群数量的提高 在线社区与社会化网络的丰富

技术层面：
开放的语言、格式与协议 富客户端技术的发展（Ajax、Flash等） 宽带接入技术的发展
4/17/2011 3:47 PM

AJAX不是一个技术，而是一系列技术的集 合，包含
JavaScript XML XHTML

类似于DHTML技术，包含HTML, JavaScript, CSS
AJAX的核心技术
基于标准的表现层技术：XHTML和CSS 动态交互与显示技术：文档对象模块DOM 数据交换与操作技术：XML和XSLT 异步数据交换对象：XMLHttpRequest 利用JavaScript的跨平台实现
7
AJAX的历史

最早，Microsoft的XMLHttpRequest 早期的AJAX应用
Microsoft Outlook Web Access
(Exchange 2000, 2003)

其它浏览器也逐渐开始部署各自的实现
Opera Mozilla Firefox Apple Safari