Ajax和Comet技术总结

Ajax是一种技术,一种能够向服务器请求额外的数据而无需卸载页面的技术,能够使网页具备更优的用户体验。Ajax技术的核心是XMLHttpRequest对象(XHR)。本文从XHR开始谈起,理解Ajax技术的特点,再对跨域以及Comet等技术进行简要理解和总结。

XMLHttpRequest基本用法

XHR对象有两个常用的方法open和send。open方法用户启动一个HTTP请求,不过它不会真的发送HTTP请求。open方法接收3个参数,分别表示请求的HTTP方法、请求的URL、是否异步。XHR对象的第二个方法send用于发送open所启动的请求。send方法接收1个参数,表示HTTP请求的主体数据。如果发送的是GET请求这种没有附带主体数据的HTTP请求,则传入null即可。如果是POST请求,则传入需要POST的数据。下面是一个简单示例,向/api/data发起一个GET请求,并且是采取异步的方式发送请求,即该请求不会阻塞页面中其他js代码的执行。

var xhr = new XMLHttpRequest()
xhr.open("get", "/api/data", true)
xhr.send(null)

请求得到的响应数据会自动填充到XHR对象的属性上,主要有下面4个属性:

* responseText: 响应主体文本
* responseXML: 如果响应内容类型是"text/xml"或"application/xml", 这个属性中将包含响应数据的XML DOM文档
* status: 响应的HTTP状态码,一般可以将HTTP状态吗200视为成功的标识
* statusText: HTTP状态的说明

XHR对象有1个readyState属性记录了该对象从创建到收到响应数据可能会经历的5种状态,readyState的可能取值如下:

0: 还没有调用open()方法初始化请求

1: 已经调用open()方法但是还没有调用send()方法

2: 已经调用send()方法但是还没有收到响应

3: 收到部分响应数据,还有部分数据没收到

4: 收到全部响应数据,即响应结束,数据完备

当readyState从一个值变到另一个值的时候会触发readystatechange事件,当这个事件触发的时候只需要在事件处理器里面检查一下readyState的值是否为4,当其值为4的时候就可以对响应的数据做后续处理了。给readystatechange事件指定处理器必须在调用open()方法之前完成才能确保跨浏览器兼容性。下面是简单示例。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
 }
}
xhr.open("get", "/api/data", true)
xhr.send(null)

XHR对象提供setRequestHeader()方法可以设置请求的自定义HTTP头部信息,该方法接收两个参数,要设置的字段和该字段的值。在调用open()启动一个请求之后并且在send()发送请求之前调用setRequestHeader()才能设置成功。请求得到响应之后,可以通过getResponseHeader()方法获取响应的HTTP头部信息,该方法接收1个参数,即要获取的字段名。而通过getAllResponseHeaders()则可以获得所有头部信息组成的长字符串。下面是简单示例。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
  console.log(xhr.getResponseHeader('SomeKey'))
  console.log(xhr.getAllResponseHeaders())
 }
}
xhr.open("get", "/api/data", true)
xhr.setRequestHeader("SomeKey", "SomeValue")
xhr.send(null)

FormData

XMLHttpRequest 2级定义了FormData类型为序列化表单、创建与表单格式相同的数据、用于XHR传输提供便利。FormData提供append()方法可以直接添加数据,该方法接收两个参数键和值。FormData的构造函数可以不传参数,也可以直接传入1个表单元素。传入表单元素之后会利用该表单元素的数据来向FormData对象预先填入键值对。下面是简单示例。

var form = document.getElementById('myForm')
var data = new FormData(form)
data.append('someKey', 'someValue')
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('post', '/api/upload', true)
xhr.send(data)

跨域资源共享

通过XHR实现Ajax通信会遇到一个限制,即跨域安全策略。跨域安全策略限制了“相同域名、相同端口、相同协议”,当XHR想要访问限制之外的资源就会引发安全错误。CORS(Cross-Origin Resource Sharing),跨域资源共享,其思想是通过使用自定义HTTP头部让浏览器与服务器进行沟通从而决定请求或者响应的成功与失败,需要浏览器和服务器同时支持才能实现正常的访问。目前大部分浏览器已经支持了CORS,所以写起代码跟普通的同域资源访问几乎一样,就只是把URL用绝对路径表示。因此,要实现跨域的关键还是在服务器,具体如何实现本文不深入讨论。下面是前端js的简单示例。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('get', 'http://www.otherserver.com/api/data', true)
xhr.send(null)

JSONP

JSONP(JSON with padding)是应用JSON实现跨域资源访问的一种方法。JSONP由两部分内容组成:回调函数和JSON数据。前面说过,XHR请求会遇到跨域安全策略的限制,但是HTML中的script标签则不会有这个限制,我们可以通过script标签引用不同域里面的js文件。JSONP便是钻了这个空子,它通过动态创建script元素,然后把src指向其他域的URL从而实现加载其他域的资源,然后通过回调函数来处理加载得到的数据。下面是一个简单示例。

function handler(res) {
 console.log(res)
}
var script = document.createElement('script')
script.src = 'http://www.otherserver.com/api/data/?callback=handler'
document.body.insertBefore(script, document.body.firstChild)

上述代码指定了动态创建的script元素的src为另一个域名下面的/api/data,然后指明回调函数为handler。将script插入到DOM里面之后会向对应的URL加载数据,完成之后会将得到的JSON数据解析成一个对象并调用handler进行处理。

JSONP是实现跨域访问的一种简单的方法,不过也存在一些安全问题,例如请求的其他域的URL响应给你一段恶意代码。JSONP还有一个问题,script标签引用的是js,json由于被js所支持所以也可以引用,因此在请求其他域的URL时需要确认它是否以json格式进行响应,而不是XML。

Comet

Ajax是一种从网页向服务器请求数据的技术,而Comet与之相反,它是从服务器向网页推送数据的技术,适用于实时性要求比较高的应用。实现Comet的方式有两种:长轮询和流。在说长轮询之前先说一下短轮询,它的思路很简单,就是客户端使用定时器,每隔一定的时间间隔就向服务器发送Ajax请求看看有没有数据更新,这个时间间隔一般很小。长轮询同样也是客户端不断向服务器发送请求,不同的是,客户端不需要按照时间间隔不断地发送请求,而是发起1个请求到服务器之后,客户端和服务器之间的HTTP连接保持打开,直到服务器有数据更新就通过这个连接向客户端响应数据,然后再关闭这个HTTP连接。关闭之后浏览器再发起一个新的连接继续重复前面的过程。相比短轮询,长轮询发起的HTTP连接次数更少了,不过如果HTTP连接长时间保持开放也是在占用服务器的资源。

第二种实现Comet的方式是基于HTTP流,客户端向服务器发起1个HTTP连接,全程保持这个连接打开,客户端周期性地通过这个连接向服务器获取数据查看更新。

SSE

SSE(Server-Send Events),服务器发送事件,是一种实现Comet交互的浏览器API,支持轮询也支持HTTP流。SSE API用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据给客户端。服务器响应的MIME类型为text/event-stream。下面是SSE的JavaScript API的简单示例。

var source = new EventSource("/api/events")
source.onmessage = function(event) {
 console.log(event.data)
}

如上面代码所示,要向服务器预定事件流获取服务器发送的数据,首先创建EventSource对象,然后在message事件触发的时候进行处理。服务器发送的数据以字符串形式保存在event.data中。EventSource对象会保持与服务器的活动连接,如果中间断开会重新连接,如果要真正地断开连接可以通过调用close()方法来实现。EventSource的message事件会在从服务器收到新事件的时候触发,除了message事件之外它还有另外2个事件open和error,open事件在建立连接的时候触发,error事件在无法建立连接的时候触发。

Web Sockets

Web Sockets是一种与服务器进行全双工双向通信的通道。Web Sockets不适用HTTP协议,而前面说的Ajax和Comet都是使用HTTP协议。篇幅关系本文对Web Sockets不作讨论。

总结

Ajax实现在不加载页面的情况下向服务器请求数据,提升网页的用户体验。实现Ajax技术的XHR会遇到跨域安全策略的限制,通过CORS解决跨域问题需要浏览器和服务器两端的配合。JSONP是一种实现跨域访问的”小技巧“但也是存在一些问题。Comet对Ajax进行了拓展,让服务器能够实时向浏览器推送数据,但从实现来看不管是轮询还是HTTP流,都是浏览器先向服务器发起请求连接。Web Sockets的全双工双向通信也有其特色,以后有时间可以继续了解。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • jQuery Ajax全解析

    什么是Ajax Ajax基本概念 Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScript和XML. 从功能上来看是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 传统的网页 想要更新内容或者提交表单就要重新加载或刷新页面. 使用ajax技术的网页 通过后台服务器进行少量的数据交换,网页就可以实现异步局部跟新. Ajax出现前 Ajax技术出现之前,是一个同步交互的世界. 同步:客户端发出请求,服务端去处理,然后响应,这一段

  • JavaScript数据推送Comet技术详解

    JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • 详解Tomcat如何实现Comet

    Comet模式是一种服务器端推技术,它的核心思想提供一种能让当服务器端往客户端发送数据的方式.Comet模式为什么会出现?刚开始人们在客户端通过不断自动刷新整个页面来更新数据,后来觉得体验不好又使用了AJAX不断从客户端轮询服务器更新数据,然后是使用Comet模式由服务器端通过长连接推数据.Comet模式能大大减少发送到服务器端的请求从而避免了很多开销,而且它还具备更好的实时性. 如图所示,客户端发送一个请求到服务器,服务器接收了连接后一直保持住连接不关闭:接着客户端发送一个操作报文告诉服务器需

  • jquery ajax例子返回值详解

    在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 首先我们看$.get(): 复制代码 代码如下: $.get("test.jsp", { name: "cssrain", time: "2008/01/21" }, //要传递的数据 function(data){ alert("返回的数据: " + data); } ) 然后看$.post(): 跟$.get()格式一样.

  • 使用Java实现类似Comet风格的web app

    开始     在本文中,我将展示如何使用各种不同的 Java 技术构建一些简单的 Comet 风格的 Web 应用程序.读者对 Java Servlet.Ajax 和 JavaScript 应该有一定的了解.我们将考察 Tomcat 和 Jetty 中一些支持 Comet 的特性,因此需要使用这两个产品的最新版本.本文使用 Tomcat 6.0.14 和 Jetty 6.1.14.另外还需要一个支持 Java 5 或更高版本的 JDK.本文使用 JDK 1.5.0-16.此外还需要看看 Jett

  • 完美解决AJAX跨域问题

    从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在.这似乎是一个很经典的问题了.是由于javascript的同源策略(这里不作深入探讨)所导致. 解决的办法,大概有如下几种: 1. 使用中间层过渡的方式(可以理解为"代理"): 中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP.JSP.c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作.拿asp.net做一个例子,如果需要对不同域

  • 页面间隔半秒钟更新时间 Asp.net使用Comet开发http长连接示例分享

    好处:1.和AJAX轮询比起来 节省资源,并且延迟小, 2.和webSocket比起来,适用的场景比较广泛. 1.先建立一个Asp.net MVC的空项目 添加一个控制器  (同样的代码在Asp.net WebForm中也是可以使用的) 复制代码 代码如下: public class CometController : Controller    {        public ActionResult Test()        {            Response.Buffer = f

  • Ajax和Comet技术总结

    Ajax是一种技术,一种能够向服务器请求额外的数据而无需卸载页面的技术,能够使网页具备更优的用户体验.Ajax技术的核心是XMLHttpRequest对象(XHR).本文从XHR开始谈起,理解Ajax技术的特点,再对跨域以及Comet等技术进行简要理解和总结. XMLHttpRequest基本用法 XHR对象有两个常用的方法open和send.open方法用户启动一个HTTP请求,不过它不会真的发送HTTP请求.open方法接收3个参数,分别表示请求的HTTP方法.请求的URL.是否异步.XHR

  • Ajax异步请求技术实例讲解

    AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. ajax是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换.ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分

  • 基于ajax与msmq技术的消息推送功能实现代码

    周末在家捣鼓了一下消息推送的简单例子,其实也没什么技术含量,欢迎大伙拍砖. 我设计的这个推送demo是基于ajax长轮询+msmq消息队列来实现的,具体交互过程如下图: 先说说这个ajax长轮询,多长时间才算长呢?这个还真不好界定. 这里是相对普通ajax请求来说的,通常处理一个请求也就是毫秒级别的时间.但是这里的长轮询方式 在ajax发送请求给服务器之后,服务器给调用端返回数据的时间多长那可还真不好说.嘿嘿,这关键要看 我们啥时候往msmq队列中推送数据了,先看看推送的效果图吧..... 抱歉

  • 使用ajax实现分页技术

    ajax分页效果图如下: 首先,先看 HTML 代码和 CSS 代码,我们需要一个 table 和一个 footer: <div id="global"> <div id="table"> <table> <col width="19%"> <col width="19%"> <col width="19%"> <col widt

  • Ajax技术(WEB无刷新提交数据)-

    Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二.引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是Asynchronous JavaScript and XML的缩写. Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发

  • AJAX技术框架及开发工具

    常见的AJAX框架有: DWR - Web Remoting Buffalo - Web Remoting (based on prototype) prototype - JS OO library openrico - JS UI component (based on prototype) dojo - JS library and UI component qooxdoo - JS UI component (C/S Style) YUL - JS UI component 其中关于DW

  • AJAX开发者的最新工具和技术

    基于XML的异步JavaScript,简称AJAX,是当前Web创新(称为Web2.0)中的一个王冠.感谢组成AJAX的各种技术,Web应用的交互如Flickr, Backpack和Google在这方面已经有质的飞跃.这个术语源自描述从基于网页的Web应用到基于数据的应用的转换.在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得并且可以被动态地写入网页中,给缓慢的Web应用体验着色使之像桌面应用一样. 虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe

  • AJAX技术基础介绍

    基于XML的异步JavaScript,简称AJAX,是当前Web创新(称为Web2.0)中的一个王冠.感谢组成AJAX的各种技术,Web应用的交互如Flickr, Backpack和Google在这方面已经有质的飞跃.这个术语源自描述从基于网页的Web应用到基于数据的应用的转换.在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得并且可以被动态地写入网页中,给缓慢的Web应用体验着色使之像桌面应用一样. 虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe

  • 基于Ajax技术实现考试倒计时并自动提交试卷

    1.概述 在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访问准备考试页面index.jsp,在该页面中,单击"开始考试"按钮,将打开新窗口显示开始考试的页面,如图10.1所示,页面会自动计时,当考试时间结束时,将自动提价试卷. 2.技术要点 主要是利用Ajax异步提交技术和Servlet技术实现的.显示在考试页面中的计时时间是在Servlet中设置的,需要通过Ajax的异步提交不断的请求Se

随机推荐