理解AJAX的原理
1.原生ajax异步请求(ajax的原理)
(异步请求:无跳转,无刷新....)
通过XMLHttpRequst对象,向服务器发送请求。XMLHttpRequest对象具有一些属性和方法。
1.首先创建一个对象 var xhr=null
2.判断浏览器是否为IE 将xhr实例化
if(window.XMLHttpRequest){//标准浏览器
xhr=new XMLHttpRequest();
}else{//IE浏览器
xhr=new ActiveObject('Microsoft.XMLHttp');
}
3.准备发送请求前的参数配置(请求的方法、url地址、数据类型......)
xhr.open();
4.请求成功之后执行的回调函数
xhr.onreadystatechange=function(){
//当readyState==4且status==200时
}
5.发送请求
xhr.send();
2.jQuery中ajax语法
$.ajax({
type:
url:
dataType:
success:function(data){
conson.log(data)
//数据解析追加到页面
}
})
3.xml 和 json区别
相同点:
- 都是一种通用协议
- 都可以用来描述数据
不同点:
- JSON相对于XML来讲,数据的体积小,传递的速度更快些。
- xml专用带宽大,json占用带宽小
- json没有xml这么通用,XML已经被业界广泛的使用
- json可以和js对象互相转换,和js是天生的一对,因此广泛用于前端开发
4.什么叫跨域?json和jsonp?jsonp的原理?
域名、端口号,通信协议三者只要一个不一样,就称跨域
json是一种数据格式,jsonp是非正式传输协议,jsonp里传输的就是json的数据格式。
原生的jsonp
其实就是把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。
jQuery的jsonp
只是把传输的数据类型json/xml改为jsonp,其他都是封装好的,并没有什么不同
如何实现这样的场景?
场景1:当有新邮件的时候,网页自动弹出提示信息而无需用户手动的刷新收件箱。
场景2:当用户的手机扫描完成页面中的二维码以后,页面会自动跳转。
场景3:在类似聊天室的环境中有任何人发言,所有登录用户都可以即时看见信息。
反向Ajax的目的是允许服务器端向客户端推送信息。Ajax请求在缺省情况下是无状态的,且只能从客户端向服务器端发出请求。你可以通过使用技术模拟服务器端和客户端之间的响应式通信来绕过这一限制。
实现方式:轮询、comet、WebSocket
5.轮询
客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
优点:后端程序编写比较容易。
缺点:如果间隔减小的话,客户端浏览器就会发出更多的请求,这些请求中的许多都不会返回任何有用的数据,而这将会白白地浪费掉带宽和处理资源。
6.comet
是一种基于 HTTP 长连接的“服务器推”技术。在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求,服务器端就能源源不断地往客户端输入数据。
优点:消息即时到达,不发无用请求;管理起来也相对方便。
缺点:服务器维护一个长连接会增加开销。
7.WebSocket
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信。
特点:事件驱动、异步,使用ws或者wss协议的客户端socket,能够实现真正意义上的推送功能
缺点:少部分浏览器不支持,浏览器支持的程度与方式有区别。
8.长轮询
客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
优点:在无消息的情况下不会频繁的请求,耗费资小。
缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。
理解AJAX的原理的更多相关文章
- javascript AJAX简单原理及什么是ajax
AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...
- AJAX异步原理与实现
面试时问到了这个问题,说实话我还是不理解的,只是单单会使用.所以今天我看一下,自己了解下. 看了网上前辈们写的资料,我自己总结归纳ajax的原理和流程如下: 1.AJAX创建异步对象XMLHttpRe ...
- Ajax工作原理
在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
- 关于Ajax工作原理
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- Ajax工作原理(转)
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- Linux内核设计第一周 ——从汇编语言出发理解计算机工作原理
Linux内核设计第一周 ——从汇编语言出发理解计算机工作原理 作者:宋宸宁(20135315) 一.实验过程 图1 编写songchenning5315.c文件 图2 将c文件汇编成32位机器语言 ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- Ajax的原理和运行机制
关于ajax,是最近炒得非常火的一种技术,并且时下它也是非常流行.当然,它并不是什么新技术,而是在各种已有的技术和支持机制下的一个统一.在我的项目中,偶尔也会用到ajax,用来给用户一些无刷新的体验. ...
- Ajax 技术原理(转)
Ajax 技术原理 2010-01-04 原文出处:http://www.nowamagic.net/ajax/ajax_AjaxPrinciple.php 在写这篇文章之前,曾经写过一篇关于AJAX ...
随机推荐
- python学习之旅(二)
Python基础知识(1) 一.变量 变量名可以由字母.数字.下划线任意组合而成. 注意:1.变量名不能以数字开头: 2.变量名不能为关键字: 3.变量名尽量起有意义的,能够通过变量名知道代表的是什么 ...
- python语法_终止循环_break_continue
break 终止整个循环计算 continue 终止本次循环,continue前的代码执行,continue后的代码不执行,下次循环继续.
- odoo配置文件内容详解
odoo常用openerp-server.conf配置参数详解 参数 说明 用法 addons_path addons模块的查找路径,多个路径用逗号分隔 addons_path = E:\GreenO ...
- @Value("${xxxx}")注解的配置及使用
代码中的用法 Spring 通过@Value注解获取*.porperties文件code的内容,然后赋值给使用该注解的Code属性上. @Value("${code}") priv ...
- cocos2d-x Android(SDK,NDK,JDK,ANT)下载地址
搭建Android环境需要用到Android SDK.NDK.Ant和JDK: 下载Android SDK 下载Android NDk 下载Android JDK 下载Ant
- 《linux就该这么学》第十节课:第8章iptables和firewalld
网卡配置: 物理机:192.168.10.1/24 服务器:192.168.10.10/24 客户端:192.168.10.20/24 1.vim /etc/sysc ...
- fiddler学习总结--通过Fiddler模拟弱网进行测试
弱网测试的目的: 弱网测试可以发现一些因为网络问题导致的交互问题,从而更好的完善应用的性能. 关注点:1.卡死,崩溃,无响应,闪退.2.业务交互数据传输正确性. 通过Fiddler可以模拟弱网进行测试 ...
- Unity之配置转换工具
本人写的配置转换工具,可将策划的配置excel文件一键转换为unity的asset文件或lua代码: 转换请注明出处:http://www.cnblogs.com/jietian331/p/86252 ...
- 虚拟机VM三种网络连接方式说明
- [openjudge-搜索]城堡问题(The Castle)
题目描述 描述 图1是一个城堡的地形图.请你编写一个程序,计算城堡一共有多少房间,最大的房间有多大.城堡被分割成mn(m≤50,n≤50)个方块,每个方块可以有0~4面墙. 输入 程序从标准输入设备 ...