向服务器请求数据的技术

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

  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. Codeforces Round #261 (Div. 2) - E (459E)

    题目连接:http://codeforces.com/contest/459/problem/E 题目大意:给定一张有向图,无自环无重边,每条边有一个边权,求最长严格上升路径长度.(1≤n,m≤3 * ...

  2. 【转载】#402 - Value Equality vs. Reference Equality

    When we normally think of "equality",we're thinking of value equality - the idea that the ...

  3. 使用shell脚本实现在liunx上进行svn的上传下载更新功能

    最近有个功能,是需要从在liunx上拉取svn地址,并创建一个新文件进行提交,shell脚本如下 #!/bin/bash echo "Hello World !" myFile=& ...

  4. 课程设计__继承与派生,重载<<

    ///继承与派生 #include <iostream> using namespace std; class Point { public: Point (,):x(a),y(b) {} ...

  5. ORA-01262,oracle启动报错,及Oracle启动原理

    错误状态: SQL> startup ORA-01261: Parameter db_recovery_file_dest destination string cannot be transl ...

  6. 2017.10.29 C/C++/C#程序如何打成DLL动态库

    C/C++程序如何打成DLL动态库: **1.在VS中新建main.h,添加如下内容:** extern "C" _declspec(dllexport) int onLoad() ...

  7. js最佳实践

    JavaScript使用windows对象的open()方法来创建新的浏览器窗口,这个方法有三个参数:windows.open(url,name,features) 参数一:url:是想在新窗口里打开 ...

  8. 搭建基于Express框架运行环境

    安装express generator生成器 通过生成器自动创建项目 配置分析 一.安装 cnpm i -g express-generator express --version // 查看版本 e ...

  9. exa命令详解

    exa 是 ls 文件列表命令现代化替代品. 官网:https://the.exa.website/ GitHub:https://github.com/ogham/exa 后续整理中……

  10. 命名空间“Microsoft.Office”中不存在类型或命名空间名称“Interop”(是否缺少程序集引用?

    在一个web项目中需要导出word打印,引用Microsoft.Office.Interop.Word后,在pages里使用正常,在app_code里新建类引用就报错. Report.cs里using ...