Ajax学习小结

ajax是Asynchronous JavaScript xml 的缩写。

Ajax是无需刷新页面就能从服务器获取数据的一种方法，（也就是不点击顶部的刷新按钮而进行局部页面的重绘）

负责Ajax运作的核心对象是XMLHttpRequest对象

XHR对象是由微软最早在IE5中引入，用于通过javascript从服务器获取XML数据

同源策略是对xml的一个主要约束，它为通信设置了“相同的域，相同的端口，相同的协议”这一限制。试图访问以上限制的资源，就会引发安全错误，除非采用被认可的跨域解决方案，这个解决方案叫CORS(Cross-origin Resource Sharing  跨域资源共享)图像Ping和JSONP是另外两种跨域方式，但是不如CORS稳妥。

Comet是对Ajax的进一步扩展，让服务器几乎能够实时向客户端推送数据，实现Comet的手段主要有两个，长轮询和http流，所有的浏览器都支持长轮询但是仅有部分浏览器支持http流，SSE(Server-sent Event 服务器发送事件)是一种实现Comet交互的浏览器API,既支持长轮询，也支持短轮询。

Web Socket是一种与服务器进行全双工，双向通信的信道，与其他方案不同，WebSocket不使用HTTP协议，而使用一种自定义的协议。这种协议为快速传递小数据设计，虽然要求使用不同的web服务器，但却在速度上占有优势。

XHR为服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步的方式从服务器获取更多的信息，意味着用户单击后，可以不刷新页面也能获取新的数据，也就是说，可以使用Xhr获取新数据，然后再通过DOM将新数据插到页面中，虽然名字中含有xml，但是Ajax通信与数据格式无关，这种技术就是无需刷新页面就可以从服务器获取数据，但是不一定是XML数据。

综上所述，ajax实现无刷新更新数据的过程如下：

 

说到这里还要了解一下什么是异步

 

1. 运用XMLHttpRequest进行异步交换
2. 服务器上的文件，以xml，html.或json格式保存文本数据
3. 运行javascript来操作dom
4. Css和html展示获取的数据

使用Ajax最关键的地方，就是实现异步请求、接受响应以及执行回调，异步与同步的区别是什么呢

异步就如同于收短信，可以同时接收很多条，同步就如同打电话，一次只能给一个人打，打完这个在打那个，ajax也可以使用同步模式执行，但是同步模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条的执行，会让Web页面出现假死的状态，所以一般采用异步模式

异步请求一共有五个状态，用来标识异步请求的不同阶段。

• 0 UNSENT 代理被创建，但尚未调用 open() 方法
• 1 OPENED open() 方法已经被调用
• 2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得
• 3 LOADING 下载中； responseText 属性已经包含部分数据
• 4 DONE 下载操作已完成

XHR的用法（post写法）

原生写法：

  var xhr = new XMLHttpRequest();
			function getDatas(){
				xhr.open('post','php/getAlarmDatas.php');
				xhr.setRequestHeader('Content-type','application/x-www-form-urlencode');
				xhr.send('name'+deviceName);
				xhr.onreadystatechange = function(){
					if(xhr.status==200 && xhr.readyState==4){
						alarms = xhr.responseText;
					}
				}
			}

 Jquery写法

           function getDatas(){
				$.ajax({
					url:'php/getAlarmDatas.php',
					data:'name='+deviceName,
					type:'POST',
					success: function(result){
						alarms = result;
					}
				})
			}

Angular写法

app.add.controller('alarmCtrl',['$scope','$http',function($scope,$http){
				$scope.getDatas = function(){
					$http({
						method:'POST',
						url:'php/getAlarmDatas.php',
						data:{
							name:deviceName
						}
					}).success(function(data,status,headers,config){
						$scope.alarms = data;
					}).error(function(data,status,headers,config){});
				};
			}])

通过原生JS发送的ajax数据请求的核心步骤为

1. 定义对象
2. 发送数据
3. 处理响应
4. DOM渲染

 

Ajax的优劣势

优势

由于Ajax包含众多特性，优势不足也明显

1. 不需要插件支持（一般浏览器只要支持js就可以）
2. 用户体验好（无刷新页面更新数据）
3. 提升Web程序的性能（传递数据按需放松，不需要整体提交）
4. 减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）

劣势

1. 不同版本的浏览器度XMLHttpRequest对象支持度不足
2. 前进、后退的功能被破坏（因为ajax永远在当前页，不会记录前后页面）
3. 搜索引擎的支持度不够（因为搜索引擎爬虫不能理解JS引起变化数据的内容）
4. p4、开发工具匮乏 （相对于其他语言工具来讲，JS或者Ajax调试开发比较少）