Ajax学习小结

最新推荐文章于 2024-06-11 14:35:39 发布

Alive_tree

最新推荐文章于 2024-06-11 14:35:39 发布

阅读量277

点赞数 2

分类专栏： Ajax 前端知识文章标签： Ajax 交互 xhr

本文链接：https://blog.csdn.net/Alive_tree/article/details/86466691

版权

前端知识同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

Ajax

4 篇文章 0 订阅

订阅专栏

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实现无刷新更新数据的过程如下：

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

运用XMLHttpRequest进行异步交换
服务器上的文件，以xml，html.或json格式保存文本数据
运行javascript来操作dom
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数据请求的核心步骤为