web通信

标签：style   http   color   io   os   使用   java   ar   strong   

//region AJAX
    function Ajax( arg ) {
        arg = W.defaultArg( arg, {
            requestHeader : {},
            type : "get",
            url : url,
            asyn : true,
            data : null,
            onLoad : null,
            onLoadStart : null,
            onLoadEnd : null,
            onError : 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 = xhr.responseText;
                    if ( arg.isJson ) {
                        responseData = 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, onLoad ) {
        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;
        }
        onLoad && xhr.onload( onLoad );
        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 = 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 = 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 = 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 = 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通信

标签：style   http   color   io   os   使用   java   ar   strong   

原文地址：http://www.cnblogs.com/zodiacblog/p/3981130.html