Ajax异步与JavaScript的一些初浅认识
向服务器请求数据的技术
有以下五种常用技术用于向服务器请求数据
- XMLHttpRequest(XHR)
- Dynamic script tag insertion(动态脚本标签插入)
- iframes
- Comet
- 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 来实现
发送数据
有时候我们只需要将数据发送给服务器而并不关心接收数据,可以采取如下两个技术
- XHR
- 灯标
XHR
使用XHR将数据发回服务器时,它比GET要快。(原因:向服务器发送一个GET请求要占用一个单独的数据包,另一方面一个POST至少发送两个数据包,一个用于信息头,一个用于POST体)POST更适合于向服务器发送大量数据,因为它不关心额外数据包的数量 ,又因为IE的URL长度限制,所以使用GET会受到限制。
灯标
实现原理:创建一个Image对象,将src设置为服务器上一个脚本文件的URL,此URL包含我们打算通过GET格式传回的键值对数据。(并没有创建img元素或者将它们插入到DOM中),服务器取得此数据并保存下来,而不必向客户端返回什么,因此没有实际图像显示。
优点:这是将信息返回服务器的最有效方法,回送数据最快,其开销最小,而且任何服务器端错误并不会影响客户端。
缺点:接收到的响应类型是受限的,不能发送POST数据,所以URL长度限制在一个相当小的字符数量上。可以用非常有限的方法接收返回数据,可以监听Image对象的load事件,它可以告诉你服务器端是否成功接收了数据。
如果你需要向客户端返回大量数据,那么使用XHR,如果你只关心将数据发送到服务器端(可能需要极少的回复),那么使用灯标
数据格式
主要有以下几种数据格式
- XML
- JSON
- HTML
- 自定义格式
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的一些初浅认识的更多相关文章
- [转] 为什么javascript是单线程的却能让AJAX异步调用?
为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...
- Javascript Ajax异步读取RSS文档
RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...
- jQuery和ajax【“Asynchronous Javascript And XML】
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- ASP.NET知识总结(8.AJAX异步)
AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML. 指一种创建交互式网页应用的网页开发技术. 不是指一种单一的技术,而是有机 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- jquery Ajax异步请求之session
写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
- AJAX 异步交互基本总结
AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...
随机推荐
- python--requests库 安装及简单使用
官方文档:http://www.python-requests.org/en/master/ 1 安装requests库 2 get请求不带参数的 带参数的 3 post请求 更多使用请看官方文档 ...
- node入口文件分析和目录初始化
1.需要安装的模块 npm install express npm install jade npm install mongoose npm install bower -g npm install ...
- P1424 小鱼的航程(改进版)
题目背景 原来的题目太简单,现改进让小鱼周末也休息,请已经做过重做该题. 题目描述 有一只小鱼,它上午游泳150公里,下午游泳100公里,晚上和周末都休息(实行双休日),假设从周x(1<=x&l ...
- 2017.9.25 JSP内置对象的概述
1.JSP的定义: 在JSP中是为了便于数据信息的存储.传递.获取,专门设置了九个内置对象, jsp内置对象是指他们是预先设定的,不需创建,每个对象都有自己的属性和方法. 2.JSP内置对象 对象名称 ...
- IOError: [Errno 22] invalid mode ('rb') or filename: 'F:\netData1.mat'
这种错误的出现是在使用built-in函数file()或者open()的时候.或者是因为文件的打开模式不对,或者是文件名有问题.前者的话只需要注意文件是否可读或者可写就可以了.后者则是与文件路径相关的 ...
- 在VS中使用Boost库出现Macro redefinition错误的解决方法(warning C4005)
最近使用Boost库做多线程开发,可视在vs中编译工程师总是遇到Macro redefinition错误,类似下面的错误描述 1>c:\program files (x86)\microsoft ...
- c/c++基础
如果有你认为重要的知识点,而我这却没有记录下来的,那么期待你分享给我(^U^)ノ~YO. 1.在结构体中,符号->的前面是指针变量,符号.的前面是普通变量. 程序中a->b等价于(*a ...
- 6.安装使用vue-quill-editor
前言: 在vue项目中,因为涉及到使用文本编辑器, 恰恰vue-quill-editor就是一个简单实用的富文本编辑器. 参考文档:vue中使用vue-quill-editor富文本编辑器,自定义to ...
- Apache 负载均衡 端口转发 配置
转载自:https://blog.csdn.net/snihcel/article/details/38844323 [端口转发配置] 通过http_proxy做tomcat的端口转发: ...
- 在jdbc基础上进阶一小步的C3p0 连接池(DBCP 不能读xml配置文件,已淘汰) 和DBUtils 中两个主要类QueryRunner和ResultSetHandler的使用
首先看C3p0这个连接池,最大优势可以自动读取默认的配置文件 <?xml version="1.0" encoding="UTF-8"?> < ...