ajax 高级技术

时间: 2019-05-23阅读: 1358标签: ajax

ajax技术是一种从客户端向服务器请求数据技术,而如果是要将数据从服务器主动推向客户端,那么就需要更加高级的数据传输技术,这些技术主要是为了处理一些在客户端展示服务器上实时变化的数据,数据的变化只有服务端知道,而客户端是需要在服务端更新数据之后马上将新数据展示到页面,这个时候使用ajax技术就很难做到这一点了.


短轮询

短轮询也称为传统轮询,是一种比较古老的方法,这个方法的本质就是,客户端使用一个定时器,每隔一定的时间就向服务端发送ajax请求,将服务端的最新的数据请求回来,但是这种方法很明显是有很大的弊端的.

数据是否更新是由服务端所决定的,所以应该是在服务端数据改变之后,由服务端主动告诉客户端我更新了数据,而不是每次都由客户端去询问服务端,由于数据更新时间不一定满足客户端发送请求的间隔,那么会导致会发送一些无意义的请求,同时也无法做到数据的同步更新.


Comet

实现Comet的方式总共有两种: 长轮询和流.


长轮询

长轮询实际上就是把短轮询颠倒了一下,客户端发起一个请求到服务器,然后服务器一直保持连接打开,直到数据更新有数据可以发送,发送完数据之后,浏览器关闭连接,随即又发起一个新的请求,这个过程在页面打开期间连续不断.

长轮询和短轮询浏览器在接受到数据之前,都会向服务器发送请求,二者的区别在于服务器何时发送请求,长轮询的优势是可以减少无用的请求,同时也能实现数据的实时更新,轮询最大一个优势就是兼容性非常的好,所有浏览器都支持.


HTTP流

流不同于上面两种轮询,因为他在页面的整个生命周期内只使用一个HTTP连接.由浏览器发送一个请求,而服务器一直保持连接打开,然后周期性地向浏览器发送数据.

HTTP流的关键在于所有的服务端语言都支持打印到输出然后刷新的功能,在客户端只需要通过监听readystatechange事件以及readyState的值的变化,随着不断的从服务器接受数据,readyState的值会周期性的变为3,当readyState的值为3的时候,responseText属性中会保存所接受到的所有数据,这个时候需要比较之前的数据,来确定所接受到的最新的数据.

下面是使用XHR对象实现HTTP流的代码:

function createStreamingClient(url, progress, finished) {
  let xhr = new XMLHttpRequest(),
    received = 0
  xhr.open('get', url, true)
  xhr.onreadystatechange = function () {
    let result
    
    if (xhr.readyState === 3) {
      result = xhr.responseText.substring(received)
      received += result.length

      progress(result)
    } else if (xhr.readyState === 4) {
      finished(xhr.responseText)
    }
  }
  xhr.send(null)
  return xhr
}


服务器发送事件

SSE(服务器发送事件),它的API用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据.这里需要注意的是:服务器响应的MIME类型必须为text/event-stream,而且是浏览器中JavaScript API能够解析的格式输出.SSE支持短轮询,长轮询,和HTTP流.


API

首先需要创建一个EventSource对象,传入一个入口点:let source = new EventSource(url)传入的url必须和创建对象的页面同源.EventSource实例对象有一个readyState属性,值为0时表示正在连接服务器,值为1时表示打开连接,值为2时,表示关闭连接.

另外还有三个事件:

  • open()在创建连接时触发.
  • message:在从服务器接收到新数据时触发.数据会以字符串形式保存在event.data中.
  • error: 无法创建连接时触发.


Web Sockets

Web Sockets 的作用是在一个单独的持久连接上提供双向通信.在创建了Web Sockets 之后,会有一个HTTP请求发送到浏览器.取得服务器响应之后,建立的连接会从HTTP协议变成Web Socket 协议.

使用Web Socket 协议的好处在于能够在客户端和服务器之间发送非常少量的数据,因此Web Sockets 非常适合移动应用.


API

首先创建一个WebSockets对象实例,传入一个URL,let socket = new Websocket(url).

实例化WebSockets对象之后,浏览器会马上尝试创建连接.WebSocket有一个表示当前状态的readyState属性,

  • 0 正在连接.
  • 1 已经创建连接.
  • 2 正在关闭连接.
  • 3 已经关闭连接.

发送和接受数据:通过send()方法发送数据,接受任意的字符串.当服务器发送数据到客户端就会触发message事件,数据保存在event.data属性中.

其他事件:

  • open: 成功创建连接时触发
  • error: 发生错误时触发
  • close: 连接关闭时触发.
WebSockets对象不支持DOM2级事件监听器,必须使用DOM0级语法来定义每个事件的处理函数.  

作者简介:郑佳欢,芦苇科技web前端实习生,公司作品:口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究。

作者:广州芦苇科技web前端
链接:https://juejin.im/post/5ce352e8e51d455d844e8b55


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/3405

Ajax异步请求

其实我理解前端如何通过url从后端获取数据,对于异步请求Ajax一直表示有点迷惑,所谓不尝试和不探索,光靠看概念你是永远不能理解代码的魅力的,正好公司的项目里用到了最经典的Ajax,正好作为一个案例来学习如何用json的Data

$.ajax防止多次点击重复提交的方法

第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法;第二种:使用beforeSend选项,在发送请求前将提交按钮变为不可用的状态;

使用AJAX实现文件拖拽上传功能详解

前端选择文件上传的两种方式:对话框选择方式上传、拖拽选择方式上传;如何上传获取到的文件?使用AJAX即可通过表单方式上传文件。

谈CSRF与JSONP设置header问题

在CSRF/JSONP劫持的运用上,CORS跨域被限制的情况下不存在了,因此AJAX的GET/POST一堆灵活操作没法用。JSONP也无法设置header、cookie等。FORM表单请求的方式当然也没法设置header

使用Ajax同步请求时,等待时间过长增加页面提示问题

后台的处理时间比较长,根据合同的多少可能等待时间比较长,会达到10s左右,这个时候如果不加任何的提示,会导致用户因为没有看到是否执行而导致重复的操作,为了增加用户的体验感,以及项目的完善性,这个时候就需要增加一个等待页面进行提示。

纯Js实现ajax

这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。创建对象,并兼容各种浏览器;请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

ajax的优缺点

ajax异步的js和XML:以前更多的是使用XML的数据格式,现在数据格式更多的是json.;ajax的优势:单页面应用(SPA)无刷新更新数据(局部刷新);异步与服务器通信

Content-Type属性的取值和作用

Content-Type 的值类型:application/json:消息主体是序列化后的 JSON 字符串,application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式

关于ajax请求数据,并将数据赋值给全局变量的一些解决方法

在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只能用其他方法来解决,下来是解决的方法

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!