先看几种B/S交互的对比

B/S方式	阻塞页面	历史记录	协议
URL: get	——	自动记录 浏览器前进后退可访问	http/https
form: get/post	完全阻塞	自动记录 浏览器前进后退可访问	http/https
ajax: get/post	同步阻塞 异步不阻塞	HTML5才支持无刷新改变页面URL	http/https

ajax异步请求时不阻塞页面，不影响用户的持续操作。这是ajax流行的原因。

XHR

　　XHR是AJAX的核心，写一个原生的ajax请求

    var xhr = new XMLHttpRequest();//创建XHR实例xhr.open('get','queNames.do', false);//启动请求。args[0]请求方式   args[1] URL args[2] asyncxhr.send(null);//发送请求if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){    //请求成功cnosole.info(xhr.responseText);//拿到响应数据}

    xhr.abort()//中断请求

　　

HTTP协议

　　ajax通过HTTP协议来完成交互，需要知道基本的HTTP协议知识

　

跨域

  因为同源策略(ip,端口，域名)的限制，ajax不支持跨域访问，但项目中经常碰到跨域的需求

几种跨域的对比

跨域方式	请求方法	需改造后台	缺陷
jsonp	get	是	无法携带凭证过去
img	get	否	单向传递，不能获取响应
CORS	get/post	是	完美！

常用的这三种。其他更偏门的swf、父子iframe跨域这里不做讨论。CORS协议跨域，在IE8-不支持。标准浏览器均支持。

jsonp

　　原理

　　　　利用<script>标签。src里设置请求URL+callbackName。 callbackName即全局函数名。后台在输出流时调用此函数。

写法

　　　　前端(以jquery举例)

$.ajax({url:"...",   dataType:'jsonp',   jsonp:'callback',   success: function(data) {}...
});

后台

        PrintWriter writer = null;try{writer=response.getWriter();String callback= request.getParameter("callback");response.setContentType("application/javascript;charset=UTF-8");writer.write(callback+ "(" + data + ")");//调用客户端的全局函数，塞入数据datawriter.flush();return null; }catch(IOException e) {logger.error(e.toString());}

img

var img = newImage();
img.onload= img.onerror =function() {alert("Done!");
};
img.src= "http://www.suning.com/a.do?name=value";

CORS

　    我在这篇博文附了写法

　　

安全

ajax容易遭到CSRF攻击，两种方式来防范：1，敏感信息如密码用SSL连接   2，携带随机数

点击此博文进一步理解

　　

调试

　　打开chrome浏览器，按F12

Advanced Ajax 介绍

类型	描述	原理	适合场景
Comet(服务器推送)	服务器向页面推送数据的技术,目的是保证数据的实时更新。Ajax是页面向服务器请求数据。Comet则是服务器向页面推送数据。两者相反。	短轮询：不断发请求 长轮询: 客户端请求-->服务器挂起，直到有数据响应-->客户端再请求 HTTP流：	适合股票，互联网抢拍等需要实时同步的场景
SSE	只读Comet	服务器响应特定的MIME类型(text/event-stream)来保证数据传递给EventSource 自动断开重连。 通过事件open/close/error来控制连接 断开时，通过ID来保证数据顺序。	不需要传递数据给服务器的同步场景
Web Socket	WebSocket的目标是在一个持久连接上提供双向通信	WebSocket协议 ws:// 依赖专门的服务器	Web QQ或聊天室

Comet　

短轮询：
前端:setInterval($.ajax..,2000)
后台：——长轮询:
前端：$ajax-reponse-$ajax请求..响应--请求..响应--...
后台： 数据未更新之前不关闭连接HTTP流:
前端: xhr.onreadystatechange监听-->readyState==3时渲染数据
后端：开启线程监听，不关闭连接，有数据时输出，刷新缓存。

SSE

var source = new EventSource(url);//创建SSE
source.onmessage = function(data){};//收到消息时
source.onerror = function(e){};//连接错误时
source.close();//关闭连接

Web Socket

    var socket = new WebSocket('ws://localhost:8080'); //创建一个Socket实例socket.onopen = function(event) {     //打开socket
socket.send('suning!');      //发送消息给服务器
socket.onmessage= function(event) {    //监听服务器消息的返回console.info('message',event);};socket.onclose= function(event) {        //监听关闭
};socket.close();//关闭Socket}

点击此博文进一步理解