红宝书 第21章整理——Ajax与Comet
来源:互联网 发布:java反序列化漏洞 编辑:程序博客网 时间:2024/05/22 15:23
1、Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
什么是 AJAX ?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
创建 XMLHttpRequest 对象
XMLHttpRequest(XHR) 是 AJAX 的基础。XHR 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
variable=new XMLHttpRequest();
XHR 对象的方法
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","test1.txt",true);xmlhttp.send();
规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
将请求发送到服务器。
- string:仅用于 POST 请求
- GET请求时为null
注意:
1、单独使用open并不会真正的发送请求,只是做好了准备,真正发送时send函数
2、同步:js代码会等到服务器响应之后在继续执行。
异步(为大多数):js继续执行不等待。期间通过检测XHR对象的readyState属性的值来看服务器响应到哪一步了
对于ajax技术,一定为true
readyStage对象及其事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
200: "OK"
404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
注意:通常我们只对状态码为4时感兴趣,直接监测4即可
GET与POST
GET
GET是最常见的请求类型,最常用于向服务器查询某些信息,
用open+GET的时候,可以在URL参数之后加查询字符串,但是注意每个参数的名称和值都要使用encodeURIComponent()进行编码,所有的名值对都要用&分割。书上有一个现成的函数用于添加查询字符,可以直接拿来用
POST
POST通常是用于向服务器发送应该被保存的数据,首先open中设置为post,然后在send函数中加入主体。
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
跨资源共享
通过XHR实现Ajax通信的一个主要限制就是跨域安全策略。
CORS(跨源资源共享)
思想:发送请求时,格外增加一个Origin头部
Comet
是一种更高级的ajax技术(别名:服务器推送),ajax是一种从页面向服务器请求数据的技术,而comet是一种服务器向页面推送数据的技术。
两种实现方法:长轮询,流
长轮询:
传统都为短轮询,即浏览器定时向服务器发送请求,看有没有更新的数据。
长轮询则是,页面发起一个到服务器的请求,然后服务器一直保持连接打开,知道有数据可以发送,发完数据后,浏览器关闭连接,然后页面重新发起请求。
短轮询是服务器立即发送相应,无论数据是否有效。长轮询则是等待有效数据。
流:
HTTP流,浏览器向服务器发送一个请求,服务器保持连接打开,然后周期性的向浏览器发送数据。只有一个http连接。
总结:
comet的时间管理比较容易出错,所以有了新的接口——SSE
SSE:
SSE(服务器发送事件)是一种实现comet的浏览器api。用于创建到服务器的单向连接,服务器可以通过这个连接发送任意数量的数据。有了这个API,仔实现Comet就容易多了。
首先创建新的EventSource对象,并传入一个入口点:
var souce = new EventSouce("myevent.php");
还有以下3个事件:
onopen:建立连接时触发
onmessage:从服务器接收到新事件时触发
onerror:无法建立连接时触发
Web Socket:(可参见之前一篇博客)
目标:在一个单独的持久连接上提供全双工,双向通信。
建立的链接会使用http升级版——Web Socket协议,也就是说,只有支持这个新协议的服务器才能用。
不但自定义了协议,还自定义了URL模式,不再是http:// ,而是ws://
好处:能够在客户端和服务器端发送非常少量的数据
缺点:制定协议的时间长
创建:
var socket = new WebSocket("ws://www.example.com/server.php")
注意:
必须给websocket传入绝对URL
web socket只能通过连接发送纯文本数据,对于复杂的数据结构,需要进行序列化
事件:
onmessage
onopen
onerror
onclose
Web Socket不支持DOM2级事件!!!
- 红宝书 第21章整理——Ajax与Comet
- 红宝书 第18章整理——XML与JS
- Ajax 、comet,红宝书
- 红宝书 第3章 整理——数据类型+函数入门
- 红宝书 第4章整理——变量+内存管理
- 红宝书 第6章整理——创建对象
- 红宝书 第6章整理——继承部分
- 红宝书 第7章整理——函数+闭包
- 红宝书 第8章整理——BOM
- 红宝书 第9章整理——客户端检测
- 红宝书 第10章整理——DOM
- 红宝书 第11章整理——DOM扩展
- 红宝书 第13章整理——事件
- 红宝书 第14章整理——表单
- 红宝书 第15章整理——canvas
- 红宝书 第17章整理——错误处理
- 红宝书 第18章整理——XML入门
- 红宝书 第18章整理——XPath
- 单例模式
- lozyload在选项卡里图片出不来的问题
- 通用Makefile实现
- 小程序 正则验证
- 如何安装xvidcore
- 红宝书 第21章整理——Ajax与Comet
- T-SQL 批处理
- Jump Game
- C# 通过socket实现UDP 通信
- TouchableHighlight之坑 没有onPress方法不起作用
- Go 语言概述 (下)
- 小程序 判断
- Andorid 常见的内存泄露及解决办法
- document.onreadystatechange的认识