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();
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
注意:
1、单独使用open并不会真正的发送请求,只是做好了准备,真正发送时send函数
2、同步:js代码会等到服务器响应之后在继续执行。
异步(为大多数):js继续执行不等待。期间通过检测XHR对象的readyState属性的值来看服务器响应到哪一步了
对于ajax技术,一定为true
readyStage对象及其事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 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级事件!!!