首页 > 代码库 > web通信
web通信
//region AJAX
function Ajax( arg ) {
arg = W.defaultArg( arg, {
requestHeader : {},
type : "get",
url : url,
asyn : true,
data : null,
onl oad : null,
onl oadStart : null,
onl oadEnd : null,
one rror : null,
onProgress : null,
timeout : null,
onTimeout : null,
upload : null,
withCredentials : false, //携带证书
isJson : false,
xml : false,
overrideMimeType : null //如“text/xml”
} );
var xhr = W.createXHR();
xhr.onreadystatechange = function () { //onreadystatechange必须在open前
if ( xhr.readyState == 4 ) {
if ( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) { //304表示请求的资源未被修改 可以使用缓存的版本
var responseData = http://www.mamicode.com/xhr.responseText;
if ( arg.isJson ) {
responseData = http://www.mamicode.com/JSON.parse( responseData );
}
arg.onLoad && arg.onLoad( responseData ); //response responseText responseType responseURL responseXML
}
else {
arg.onError && arg.onError( xhr.onerror );
console.error( "Request was unsuccessful: " + xhr.onerror );
}
}
};
xhr.open( arg.type, arg.url, arg.asyn );
W.loopObj( arg.requestHeader, function ( key, value ) { //setRequestHeader必须在open后 send前
xhr.setRequestHeader( key, value ); //xhr.setRequestHeader(key) xhr.setAllRequestHeaders()
} );
if ( arg.overrideMimeType && typeof xhr.overrideMimeType != "undefined" ) {//overrideMimeType必须在open后 send前
xhr.overrideMimeType( arg.overrideMimeType ); //强迫XHR对象将响应当作overrideMimeType 如xml而非纯文本处理
}
xhr.send( arg.data );
return xhr;
}
//跨域请求 客户端设置Origin:http://www.zodiac.com
// 服务端设置Access-Control-Allow-Origin:http://www.zodiac.com或者Access-Control-Allow-Origin:*
function createCORSRequest( type, url, onl oad ) {
var xhr = new XMLHttpRequest();
if ( "withCredentials" in xhr ) {
xhr.open( type, url );
}
else if ( typeof XDomainRequest != "undefined" ) {
xhr = new XDomainRequest();
xhr.open( type, url );
}
else {
xhr = null;
}
onl oad && xhr.onload( onl oad );
xhr.send();
return xhr;
}
//endregion
//region其他跨域技术 不需要修改服务端
//图像Ping 使用<img>标签
var url = "http://www.dell.com/?name=zodiac";
function imgPing( url, callBack ) {
var img = new Image();
img.onload = img.onerror = callBack;
//do something 通常用来跟踪用户点击页面或者广告的曝光次数
//优点:不修改服务器代码 简单 单向
//不足:1只能发送GET请求 2无法访问服务器的响应脚本 只是浏览器与服务器间的单向通行
img.src = http://www.mamicode.com/url;
}
imgPing( url, function () {
// alert(1);
} );
//JSONP
//优点:<script>标签和<img>标枪类似的拥有不受限制地从其他域加载资源 与图像PING相比优点在于可以直接访问响应文本,支持浏览器和服务器间的双向通信
//不足:1.JSONP从其他域加载javascript 不能保证其安全性 可能含有恶意代码 2.无法确定JSONP是否请求失败 不得不使用计时器看是否接收了响应
function handleResponse( response ) {
W.log( response );
response && alert( "IP address: " + response.ip
+ "<br/>city: " + response.city
+ "<br/>region_name: " + response.region_name );
}
var src = "http://www.dell.com/";
function JSONP( src, callBack ) {
var script = document.createElement( "script" );
script.src = http://www.mamicode.com/src +"?" + "callback=" + callBack;
document.body.insertBefore( script, document.body.firstChild );
}
JSONP( src, handleResponse );
//endregion
//region Comet 服务器推送
// P588 javascript高级程序设计 分长轮询和HTTP流2种 待完善
//为Comet创建的2个新接口 SSE API和Web Sockets
//SSE API Server-Sent Events ie不支持
var source = new EventSource( "myEvent.php" );
//事件有open message error
source.onmessage = function ( event ) {
var data = http://www.mamicode.com/event.data;
};
//默认情况下 EventSource对象会保持和服务器的活动连接。如果连接断开,还会重新连接。意味着SSE适合长轮询和HTTP流 也使用close断开
source.close();
//Web Sockets 全双工 双向的通信 使用自定义协议ws 而不是使用http协议 ie不支持
var socket = new WebSocket( "ws://www.zodiac.com" ); //同源策略对socket不适用 因此可以通过socket打开任何站点链接
socket.send( "Hello World" );
//只能发送纯文本 可以使用JSON.stringify 字符串花
socket.onmessage = function ( event ) {
var data = http://www.mamicode.com/event.data;
};
socket.onclose = function ( event ) {
W.log( event.wasClean + " " + event.code + " " + event.reason );
};
//状态值 WebSocket.OPENING(0) WebSocket.OPEN(1) WebSocket.CLOSING(2) WebSocket.CLOSE(3)
socket.close();
//endregion
web通信