理解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区别

相同点:

  1. 都是一种通用协议
  2. 都可以用来描述数据

不同点:

  1. JSON相对于XML来讲,数据的体积小,传递的速度更快些。
  2. xml专用带宽大,json占用带宽小
  3. json没有xml这么通用,XML已经被业界广泛的使用
  4. 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连接会消耗资源,返回数据顺序无保证,难于管理维护。

posted @ 2017-10-21 13:44  Vicky_YU  阅读(549)  评论(0编辑  收藏  举报