在CORS(Cross-Origin Resource Sharing,跨域资源共享)出现以前,要实现跨域Ajax通信是很难的.
可以利用DOM中能够执行跨域请求的功能,来实现跨域通信:
浏览器到服务器的单向通信:
此项技术称为图像Ping,利用的是img.src的跨域事件
img.src只能通过侦听load和error事件来确定浏览器数据是否到达服务器,而无法获取服务器的任何内容
// 图片Ping
var img = new Image();
img.onload = img.onerror = function() {alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";
// 由于是单向,因此最常用于跟踪用户点击页面或动态广告的曝光次数
使用回调函数的双向通信:
此项技术被称为JSONP(JSON with padding,参数式JSON).
JSONP利用了动态<script>的src属性
使用JSONP首先得确定一个回调函数(如:handleResponse)
然后在将回调函数用?callback = handleResponse的形式拼进请求url中
// JSONP
function handleResponse(response) { // 回调函数alert("You`re at IP address " + response.ip + ", which is in " + resonse.city + ", " +response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse"; // 带回调函数的url路劲放入src属性中
document.body.insertBefore(script, document.body.firstChild);// 注1: response是请求freegeoip.net主机,端口80,json文件的数据返回的,使用的是http协议
服务器向页面推送数据的技术:
Comet:是一种服务器向页面推送数据的技术,它引入了2个概念:长轮询和流 的实现方式
// 长轮询:
// 页面发起一个到服务器的请求,然后服务器一直保持连接打开,直到有数据可以发送
// 发送完毕后,浏览器关闭连接,随即又发起一个新的连接并等待
// 此项技术可以通过XHR对象和setTimeout事件实现.// 流
// 使用HTTP流实现:在页面的整个生命周期内只使用一个HTTP连接
// 具体来说,就是浏览器向服务器发送一个请求,然后与服务器保持连接打开状态,周期性的向浏览器发送数据
// 在Firefox、Safari、Opera和Chrome中,通过侦听readystatechange事件及检测readyState的值是否为3(接收到部分数据)
// 就可以利用XHR对象实现HTTP流// 使用XHR 对象实现HTTP流
function createStreamingClient(url, progress, finished) {var xhr = new XMLHttpRequest,received = 0;xhr.open("get", url, true);xhr.onreadystatechange = function() {var result;if( xhr.readyState == 3) {// 只取得最新数据并调整计数器result = xhr.responseText.substring(received);received += result.length;// 调用progress回调函数progress(result);} else if ( xhr.readyState == 4) {finished(xhr.responseText)}xhr.send(null);return xhr;
}
// 调用
var client = createStreamingClient("streaming.php", function(data) {alert("Received: " + data);}, function(data){alert("Done!");
});
参考《JavaScript高级程序设计》(第3版)P586~P589