zoukankan      html  css  js  c++  java
  • 《javascript高级程序设计》第21章 Ajax和Comet

    21.1 XMLHttpRequest 对象  The XMLHttpRequest Object
      21.1.1 XHR 的用法 XHR Usage
      21.1.2 HTTP 头部信息 XHR Headers
      21.1.3 GET 请求 GET Requests
      21.1.4 POST 请求 Post Request
    21.2 XMLHttpRequest 2 级 XHR Level2
      21.2.1 FormData The FormData Type
      21.2.2 超时设定 Timeouts
      21.2.3 overrideMimeType()方法 The overrideMimeType() Method
    21.3 进度事件 Progress Events
      21.3.1 load 事件 The load Event
      21.3.2 progress 事件 The progress Event
    21.4 跨源资源共享   Cross-Origin Resource Sharing
      21.4.1 IE 对CORS 的实现 CORS in Internet Explorer
      21.4.2 其他浏览器对CORS 的实现 CORS in Other Browsers

          21.4.3 Preflighted Reqeusts 

      21.4.4 带凭据的请求  Credentialed Requests
      21.4.5 跨浏览器的CORS  Cross-Browser CORS
    21.5 其他跨域技术  Alternate Cross-Domain Techniques
      21.5.1 图像Ping  Image Pings
      21.5.2 JSONP
      21.5.3 Comet
      21.5.4 服务器发送事件  Server-Sent Events
      21.5.5 Web Sockets
      21.5.6 SSE 与Web Sockets 
    21.6 安全 Security

     

    21.2 XMLHttpRequest 2 级
    21.2.1 FormData
    使用FormData 的方便之处体现在不必明确地在XHR 对象上设置请求头部。XHR 对象能够识别传
    入的数据类型是FormData 的实例,并配置适当的头部信息。
    支持FormData 的浏览器有Firefox 4+、Safari 5+、Chrome 和Android 3+版WebKit。
    21.2.2 超时设定
    表示请求在等待响应多少毫秒之后就终止。xhr.ontimeout
    在写作本书时,IE 8+仍然是唯一支持超时设定的浏览器。
    21.2.3 overrideMimeType()方法
    比如,服务器返回的MIME 类型是text/plain,但数据中实际包含的是XML。根据MIME 类型,
    即使数据是XML,responseXML 属性中仍然是null。通过调用overrideMimeType()方法,可以保
    证把响应当作XML 而非纯文本来处理。
    支持overrideMimeType()方法的浏览器有Firefox、Safari 4+、Opera 10.5 和Chrome。


    21.5.5 Web Sockets 
    Web Sockets 使用标准的HTTP 服务器无法实现Web Sockets,只有支持这种协议的专门服务器才能正常工作。
    使用自定义协议而非HTTP 协议的好处是,能够在客户端和服务器之间发送非常少量的数据,而不
    必担心HTTP 那样字节级的开销。由于传递的数据包很小,因此Web Sockets 非常适合移动应用。

    Web Sockets 是一种与服务器进行全双工、双向通信的信道。与其他方案不同,Web Sockets 不使用
    HTTP 协议,而使用一种自定义的协议。这种协议专门为快速传输小数据设计。虽然要求使用不同的
    Web 服务器,但却具有速度上的优势。



    XHR的用法:

    <script>
       
            function createXHR(){
                if (typeof XMLHttpRequest != "undefined"){
                    return new XMLHttpRequest();
                } else if (typeof ActiveXObject != "undefined"){
                    if (typeof arguments.callee.activeXString != "string"){
                        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                        "MSXML2.XMLHttp"],
                            i, len;
               
                        for (i=0,len=versions.length; i < len; i++){
                            try {
                                var xhr = new ActiveXObject(versions[i]);
                                arguments.callee.activeXString = versions[i];
                                return xhr;
                            } catch (ex){
                                //skip
                            }
                        }
                    }
               
                    return new ActiveXObject(arguments.callee.activeXString);
                } else {
                    throw new Error("No XHR object available.");
                }
            }
           
            var xhr = createXHR();       
            xhr.onreadystatechange = function(event){
                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);
    
        </script>

    jsonp(跨域事件)运行不起来会报错,因为链接地址有误,但是放到自己测试地址仍旧不行,所以觉得可能在服务器要写一个接收代码?

    function handleResponse(response){
        alert("You’re at IP address " + response.ip + ", which is in " +response.city + ", " + response.region_name);
    }
    var script = document.createElement("script");
    script.src = "http://freegeoip.net/json/?callback=handleResponse";
    document.body.insertBefore(script, document.body.firstChild);

    CORS(Cross-Origin Resource Sharing,跨源资源共享),(放到服务器上并没有运行起来)

    <!DOCTYPE html>
    <html>
    <head>
        <title>Cross-Browser CORS Request Example</title>
    </head>
    <body>
        <p>This example must be run on a server to work properly and will only work in browsers supporting CORS.</p>
        <script>
       
            function createCORSRequest(method, url){
                var xhr = new XMLHttpRequest();
                if ("withCredentials" in xhr){
                    xhr.open(method, url, true);
                } else if (typeof XDomainRequest != "undefined"){
                    xhr = new XDomainRequest();
                    xhr.open(method, url);
                } else {
                    xhr = null;
                }
                return xhr;
            }
    
            var request = createCORSRequest("get", "http://www.somewhere-else.com/xdr.php");
            if (request){
                request.onload = function(){
                    //do something with request.responseText
                    alert("della");
                };
                request.send();
            }
     
    
        </script>
    </body>
    </html>
  • 相关阅读:
    iOS"伪后台"机制下如何保持APP一直运行在后台(转)(实践通过)
    weak和strong
    iOS webview 清除缓存
    iOS隐藏状态栏
    IOS 在一个应用里打开另一个应用 及其 两个应用互相调用
    ios 检查ios设备是否安装了qq,微信等应用
    【干货篇】步步为营,带你轻松掌握jQuery!
    【化繁为简】非前端开发者的福音---CSS的预处理语言 Less&Sass
    JS中有关分支结构、循环结构以及函数应用的一些简单练习
    万物皆对象的JavaScript
  • 原文地址:https://www.cnblogs.com/della/p/3296263.html
Copyright © 2011-2022 走看看