AJax与Comet,跨源资源共享
来源:互联网 发布:国外电视台直播软件ios 编辑:程序博客网 时间:2024/06/05 03:32
Ajax技术能够向服务器请求额外的数据而无须卸载页面,带来更好是用户体验。
其核心技术书XMLHttpRequest对象,简称XHR,能够已异步方式从服务器获得更多的信息,然后再通过DOM将新的数据插入到页面中。
Ajax中虽然包含XML的成分,但是Ajax通信与数据格式无关。
1.1XMLHttpRequest对象
var xhr = createXHR();
1.1.1 XHR 的用法
- 调用open方法:xhr.open(“get”,”example.php”,false);在此需要注意的是:1)URL相对于执行代码的当前页面;2)调用open方法,并不会真正的发生请求,只是启动了一个请求以备发送。false表示同步
- 调用send方法:xhr.send(null);//一个参数,作为请求主体发送的数据,没有要发的,则传null,必须要有。
收到服务器的响应后,响应的数据会自动填充XHR对象的属性
- responseText:作为响应主体被返回的文本
- responseXML:“text/xml”或者”application/xml”:则在这个属性中包含中响应数据的XML DOM文档
- status:响应的HTTP状态
- statusText:HTTP状态的说明
第一步:检查status属性
第二步:发送responseText
if((xhr.status >= 200 && xhr.status <300)|| xhr.status ==304) alert(xhr.responseText);
else alert(“Request was unsuccessful:”+ xhr.status);- 在异步请求时,需要检测XHR的readyState属性
- 0: 为初始化。尚未调用open
- 1:启动。调用了 open ,未调用send
- 2:发送。 调用了send ,未接收的响应
- 3:接收。已经接收到部分响应数据
- 4:完成。已经接收到全部响应数据
var xhr = createXHR(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if((xhr.status >= 200 && xhr.status <300)|| xhr.status ==304) alert(xhr.responseText); else alert("Request was unsuccessful:"+ xhr.status); } }; xhr.open("get","example.txt",true); xhr.send(null);
1.1.2 HTTP头部信息
- Accept:浏览器能够处理的内容类型
- Accept-Charset:浏览器能够显示的字符集
- Accept-Encoding:浏览器能够处理的的压缩编码
- Accept-Language:浏览器当前设置的语言
- Connection:浏览器与服务器之间的连接类型
- Cookie:当前页面设置的任何cookie
- Host:发出请求的页面所在的域
- Referer:发出请求的页面的URI
- User-Agent:浏览器的用户代理字符串
Get请求
向服务器查询某些信息
xhr.open(“get”,”example.php?name1=value1&name2=value2”,true);
Post请求
通常用于向服务器发送应该被保存的数据
xhr.open(“post”,”example.txt”,true);
var xhr = createXHR(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if((xhr.status >= 200 && xhr.status <300)|| xhr.status ==304) alert(xhr.responseText); else alert("Request was unsuccessful:"+ xhr.status); } }; xhr.open("post","example.php",true); xhr,setRequestHeader("Content-Type","application/w-www-form-urlencoded");//设置为表单提交时的类型 var form = document.getElementById("user-info"); xhr.send(serialize(form)); xhr.send(null);
2.1 XMLHttpRequest 2级
2.1.1 FormData
FormData为序列化表单以及创建与表单格式相同的数据提供了便利
var data = new FormData();data.append("name","Nicholas");
2.1.2 超时设定
xhr.timeout = 1000;//表示请求在等待响应1秒后就终止。
2.1.3 overrideMimeType()方法
用于重写XHR响应的MIME类型
2.3 进度事件
- loadstart:在接收到响应数据的第一个字节时触发
- progress:在接收响应期间持续不断地触发
- error:在请求发生错误时触发
- abort:在因为调用 abort() 方法而终止连接时触发
- load:在接到完整的响应数据时触发
- loadend:在通信完成或者触发 error、abort、或者load事件后触发
2.4 跨源资源共享—CORS(Cross-Origin Resource Sharing)
通过XHR实现Ajax通信的一个主要限制,来源与跨域安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源。
CORS背后的基本思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败
Access-Control-Allow-Origin:http://www.nczonline.net
作为头部信息发送请求信息,如果没有这个头部,或者这个头部但源信息不匹配,浏览器就会驳回请求。
2.5 其他跨越技术
2.5.1 图像Ping
使用标签,我们知道,一个网页可以从任何网页中加载图像,不用担心跨域的问题。
2.5.2 JSONP
JSONP是JSON with padding(填充式JSON)的缩写,是被包含在函数调用中的JSON
callback({"name":"Nicholas"});
JSONP 由俩个部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSOB数据
http://freegeoip.net/json/?callback=handleResponse
JSONP 是通过动态
2.5.3 Commet
如果说Ajax是一种从页面向服务器请求数据的技术,而Commet则是一种服务器向页面推送数据的技术。
实现comet的两种方式:
+ 长轮询:浏览器定时向服务器发送请求,看有没有更新的数据、+ HTTP流:与轮询不同在整个生命周期内只使用一个HTTP连接。即浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据。
2.5.4 服务器发送事件
SSE(Server - Sent Events,服务器发送事件)是围绕只读Comet交互推出的API或者模式。SSE用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream,而且是浏览器中的JavaScript API能解析格式输出。SSE支持短轮询、长轮询和HTTP流,而且能在断开连接时自动确定何时重新连接。
2.5.5 Web Sockets
Web Sockets的目标是在一个单独的持久连接上提供全双工、全向通信。在JavaScript中创建了WebSocket之后,会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后,建立的连接会使用HTTP升级HTTP协议交换为Web Socket协议。
var socket = new WebSocket("ws://www.example.com/server.php");socket.send("hello world")
2.6 安全
为了确保通过XHR访问的URL安全,通常的做法就是验证发送请求者是否有权限访问对应的资源,有以下几种方式:
- 要求以SSL连接来访问可以通过XHR请求的资源
- 要求每一次请求都要附带经过相应算法计算得到的验证码
注意:以下几种措施对CSRF攻击不起作用 - 要求发送POST而不是GET请求—很容易改变
- 检查来源URL以确定是否可信—来源记录很容易伪造
- 基于cookie信息进行验证—同样很容易伪造
- AJax与Comet,跨源资源共享
- Ajax 与 Comet
- Ajax、Comet与Websocket
- Ajax、Comet与Websocket
- Ajax与Comet
- Ajax 与 Comet
- Ajax与Comet
- Ajax 与 Comet
- 【JavaScript】跨源资源共享CORS和其他跨域技术(Comet、JSONP、SSE、Web Sockets)
- javascript AJAX与Comet详解
- Ajax与Comet的介绍与区别
- JavaScript基础——Ajax与Comet
- JS学习19(Ajax与Comet)
- js高级程序设计笔记--Ajax与comet
- [网页设计]Ajax、Comet与Websocket
- CORS(跨源资源共享)
- CORS跨源资源共享
- Javascript高级程序设计第21章(Ajax与Comet)
- 二叉树及二叉树的基本操作(基础面试题型)
- 分布式本地缓存的一种实现
- 可靠数据传输原理(上)
- Python环境搭建
- AlexNet
- AJax与Comet,跨源资源共享
- CleanMyMac 4 破解版-中文版_免费激活码_注册码
- Mvc接收Json数据,C#模拟Http请求收不到数据
- python 爬虫视频网站
- web 安全
- 配置redhat yum 163源和zabbix源 并安装zabbix-agent
- hdoj 1062
- C++实现一个单例模式(懒汉与饿汉)
- HDU1011