向服务器请求数据的技术

有以下五种常用技术用于向服务器请求数据

  1. XMLHttpRequest(XHR)
  2. Dynamic script tag insertion(动态脚本标签插入)
  3. iframes
  4. Comet
  5. Multipart XHR (多部分的XHR)

XHR

优点:能够精细的控制发送请求和数据接收,也就是说你可以在请求的报文中添加任意的头信息和参数(包括Get和Post),并读取从服务器返回的头信息,以及响应文本自身。

缺点:不能使用XHR从当前运行的代码域之外请求数据,而且老版本的IE不提供readyState为3的状态(为3的状态表示数据正在接收中),它也不支持流。从请求返回的数据像一个字符串或者一个XML对象那样对待,这意味着处理大量数据时将相当缓慢。

建议:当使用XHR请求数据时,可以使用POST或GET。如果请求不改变服务器状态而只是取回数据建议使用GET,因为GET请求的数据会被浏览器自动缓冲起来,如果多次提取相同的数据可提高性能。

只有当URL和参数的长度超过了2048个字符时才使用POST提取数据,因为IE限制了URL的长度,过长将导致请求参数被截断。

Dynamic script tag insertion(动态脚本标签插入)

优点:可以从不现域的服务器上获取数据

因为其响应结果是运行JavaScript,而不是作为字符串必须被进一步处理。所以它应该是客户端上获取并解析数据最快的方法。

缺点:不能通过请求发送信息头,参数只能通过GET方法传递,不能POST。

不能设置请求的超时或重试,实际上你不需要知道它是否失败,而且你必须得等待所有数据返回之后才可以进行处理。

不能访问响应信息头或像访问字符串那样访问整个响应报文

备注:因为JavaScript没有权限或访问控制的概念,所以你的页面上任何使用动态脚本标签插入的代码都可以完全控制整个页面,所以在使用外部来源的代码时务必非常小心。

因为响应报文被用作脚本标签的源码,它必须是可执行的JavaScript。也就是说任何数据无论什么格式必须在一个回调函数中被组装起来。

Multipart XHR (多部分的XHR)

多部分的XHR(MXHR)允许你只用一个HTTP请求就可能从服务器端获取多个资源,通过将资源打包成一个由特定分隔符界定的大字符串,从服务器端发送到客户端。JavaScript代码处理此长字符串,根据它的媒体类型和其他“信息头”解析出每个资源。

优点:显著提高了整个页面的性能。

缺点:获得的资源不能被浏览器缓存。

老版本的IE并不支持readyState=3或data:URL

建议:由于MXHR响应报文越来越大,有必要在每个资源收到时立刻处理而不是等待整个响应报文接收完成,这可以通过监听readyState =3 来实现

发送数据

有时候我们只需要将数据发送给服务器而并不关心接收数据,可以采取如下两个技术

  1. XHR
  2. 灯标

XHR

使用XHR将数据发回服务器时,它比GET要快。(原因:向服务器发送一个GET请求要占用一个单独的数据包,另一方面一个POST至少发送两个数据包,一个用于信息头,一个用于POST体)POST更适合于向服务器发送大量数据,因为它不关心额外数据包的数量 ,又因为IE的URL长度限制,所以使用GET会受到限制。

灯标

实现原理:创建一个Image对象,将src设置为服务器上一个脚本文件的URL,此URL包含我们打算通过GET格式传回的键值对数据。(并没有创建img元素或者将它们插入到DOM中),服务器取得此数据并保存下来,而不必向客户端返回什么,因此没有实际图像显示。

优点:这是将信息返回服务器的最有效方法,回送数据最快,其开销最小,而且任何服务器端错误并不会影响客户端。

缺点:接收到的响应类型是受限的,不能发送POST数据,所以URL长度限制在一个相当小的字符数量上。可以用非常有限的方法接收返回数据,可以监听Image对象的load事件,它可以告诉你服务器端是否成功接收了数据。

如果你需要向客户端返回大量数据,那么使用XHR,如果你只关心将数据发送到服务器端(可能需要极少的回复),那么使用灯标

数据格式

主要有以下几种数据格式

  1. XML
  2. JSON
  3. HTML
  4. 自定义格式

XML

优点:格式严格,易于验证

缺点:数据冗长,解析困难,解析速度慢,虽然XPath可稍微加快点解析速度,但并未得到广泛支持。

JSON

JSON是一个轻易级并易于解析的数据格式 ,它按照JavaScript对象和数组字面量语法编写。JSON数据可称为能够运行的JavaScript代码。

优点:格式小,占用空间小,下载最快,解析时间最短

下面具体说一下JSON

当使用XHR时JSON数据作为一个字符串返回,该字符串使用()转换为一个本地对象

当使用动态脚本标签插入时,JSON数据被视为另外一个JavaScript文件并作为本地码执行。为了做到这一点,JSON数据必须被包装在回调函数中,这也就是JSON-P(JSON填充   也就是JSON-Padding)

JSON-P

JSON-P因为回调包装的原因略微增加了文件尺寸,但与其解析性能的改进相比这点增加微不足道,由于数据作为本地JavaScript处理,它的解析速度像本地JavaScript一样快。

最快的JSON格式是使用数组的JSON-P格式。

注意点:因为JSON-P必须是可执行的JavaScript,实验室能够跨域使用它使用动态脚本标签注入技术可以任何网站中被任何人调用 ,所以安全性必须得注意,不应该涉及敏感数据。

HTML

使用HTML传输数据大合格解析时间长(在此不讨论 一般尽量少使用)

自定义格式

自定义格式下载懂事,易于解析,只需要调用字符串的split将分隔符来解析数据。当创建你的自定义格式时,最重要的决定是采用何种分隔符(分隔符应该是一个单字符而不能存在于你的数据之中)。

总结:XHR和动态脚本标签注入都可以使用这种格式 ,两种情况下都要解析字符串,在性能上没有实质上的差异,对于非常大的数据集,它是最快的传输格式,甚至可以在解析速度和下载时间上击败本机执行的JSON。用此格式向客户端传送大量数据只用很少的时间。

数据格式总结

最好是用JSON和自定义格式 ,如果数据集大或者需要很长解析时间,请最好使用这两种格式之一

JSON-P数据用动态技术标签插入法获取 ,它将数据视为可运行的JavaScript而不是字符串,解析速度极快,能够跨域使用,但不应涉及敏感数据。

字符分隔的自定义格式,使用XHR或动态脚本标签插入技术提取,使用split解析。此技术在解析非常大数据集时比JSON-P技术略快,而且通常文件尺寸更小。

缓存数据

在服务器端,设置HTTP头,确保返回报文被缓存在浏览器中

在客户端,于本地缓存已获取的数据,不要多次请求同一数据。

Ajax异步与JavaScript的一些初浅认识的更多相关文章

  1. [转] 为什么javascript是单线程的却能让AJAX异步调用?

    为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...

  2. Javascript Ajax异步读取RSS文档

    RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...

  3. jQuery和ajax【“Asynchronous Javascript And XML】

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  4. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  5. ASP.NET知识总结(8.AJAX异步)

    AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML. 指一种创建交互式网页应用的网页开发技术.   不是指一种单一的技术,而是有机 ...

  6. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  7. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  8. ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  9. AJAX 异步交互基本总结

    AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...

随机推荐

  1. Installing xgboost and cmake, mingw64 and mingw

    Problem: installing the xgboost to get the python package for later importing

  2. POJ - 1201 Intervals (最短路解线性规划)

    相交区间选尽量少的点是可以贪心的,右端点排序以后,尽量往右边放可以得到可以使得点在区间尽可能多. 但是我只想到了O(n)的维护方法.(数据比较水,能过... 或者是前缀和可以写sum(bi) - su ...

  3. ELF格式文件符号表全解析及readelf命令使用方法

    http://blog.csdn.net/edonlii/article/details/8779075 1. 读取ELF文件头: $ readelf -h signELF Header:  Magi ...

  4. 【转】Android的setTag

    前言 首先我们要知道setTag方法是干什么的,SDK解释为 Tags Unlike IDs, tags are not used to identify views. Tags are essent ...

  5. 【转】Activity生命周期详解

    三个循环 提供两个关于Activity的生命周期模型图示帮助理解:                                           图1 图2 从图2所示的Activity生命周期 ...

  6. P1089 津津的储蓄计划

    题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300300元钱,津津会预算这个月的花销,并且总能做到实际花销和预算的相同. 为了让津津学习如何储蓄,妈妈提出,津津可以随时把整百的钱存在 ...

  7. react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state问题思路

    在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件. 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化.在使用 ES6 classes ...

  8. react中内联样式的z-index不起作用.

    <div style={{z-index: -100}} > hello,money. </div> 以上z-index样式如上写法是不起作用,原因是在react中内联样式的写 ...

  9. MySQL超大表如何提高count速度

    经常用到count统计记录数,表又超级大,这时候sql执行很慢,就是走索引,也是很慢的,怎么办呢? 1.这个时候我们就要想为什么这么慢:根本原因是访问的数据量太大,就算只计算记录数也是很慢的. 2.如 ...

  10. Percona-Tookit工具包之pt-mext

      Preface       We are always obliged to analyze many outputs generated by various tools directly ev ...