《JavaScript》高级程序设计第21章：Ajax和Comet，jsonp

• 一、创建XMLHttpRequest对象
• 二、XHR的用法
• 五、跨域资源共享
• 六、其他跨域技术七、安全七、安全
  • 1. 图像Ping
  • 2. JSONP（JSON with padding，填充式JSON/参数式JSON）
  • 3. Comet（“服务器推送”）
  • 4. 服务器发送事件（SSE：Server-Sent Events）
  • 5. Web Sockets
  • 6. SSE & Web Sockets
  • 7. 跨域方法小结：
• 七、安全

Ajax的技术核心是XMLHttpRequest对象（简称XHR）

一、创建XMLHttpRequest对象

---

 

    function createXHR(){
        if(typeof XMLHttpRequest != "undefined"){
            //IE7, FireFox, Opera, Chrome, Safari都支持原生的XHR对象，这些浏览器中可以使用XMLHttpRequest构造函数
            return new XMLHttpRequest();        
        } else if (typeof ActiveXObject != "undefined"){
            //使用于IE7之前的版本
            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{
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch(ex){
                        //跳过
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        } else {
            throw new Error("No XHR object available");
        }
    }

    //创建XHR对象
    var xhr = createXHR();

二、XHR的用法

---

 

　　1. open()方法：

• • 三个参数：发送的请求类型；请求的url；是否异步发送
  • 注意：
    • url相对于执行代码的当前页面（也可以使用绝对路径）
    • 调用open()方法并不会真正发送请求，而只是启动一个请求以备发送
    • 只能向同一个域中使用相同端口和协议的url发送请求，如果url和启动请求的页面有任何差别，都会引发安全错误！

　　2. 发送请求：send()方法

• • 接收一个参数，即要作为请求主体发送的数据。
  • 如果不需要通过请求主体发送数据，则必须传入null。这个参数对某些浏览器来说是必须的。

　　3. 收到响应后，响应的数据会自动填充xhr对象的属性。相关的属性有：

• • responseText
  • responseXML
  • status
  • statusText

　　　收到响应，首先要检查status属性，一般来说，可将http状态代码为200作为成功标志。此外，状态码304表示请求资源没有被修改，可以直接使用浏览器中缓存的版本，则响应也有效。

　　　对于异步请求，可以检测xhr对象的readyStatus属性，该属性表示请求/响应过程的当前活动阶段，可取值如下：

• • 0：未初始化。尚未调用open()方法
  • 1：启动。已经调用open()方法，尚未调用send()方法
  • 2：发送。已经调用send()方法，尚未接收到响应
  • 3：接收。已经接收部分响应数据。
  • 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。【一般只需检查这个阶段】

　　　只要readyStatus属性改变，都会触发一次readyStatechange事件。

    var xhr = createXHR();
    //必须要在open()方法前指定onreadyStatechange事件处理程序才能确保跨浏览器兼容性
    xhr.onreadyStatechange = function(){
        //这里使用xhr对象而非this对象，原因是此事件的作用域问题
        //如果使用this对象，在有的浏览器中会导致函数执行失败，或者导致错误发生。
        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);

三、XMLHttpRequest 2 级

---

 

四、进度事件

---

 

五、跨域资源共享

---

 

1. 跨域 ：

　　跨域安全策略：默认情况下， XHR对象只能访问与包含它 的页面位于同一个域中的资源。

　　所谓跨域，就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。

　　简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

2. 跨域资源共享（CORS，Cross-Origin Resource Sharing）

　　是W3C的标准。

　　基本思想：使用自定义的http头部让浏览器与服务器进行沟通，从而决定请求或相应是应该成功，还是应该失败。（这一块的东西看着烦，先不管了）

六、其他跨域技术

---

 

1. 图像Ping

　　即使用<img>标签。因为网页可以从任何网页中加载图像，而不用担心是否跨域。

　　请求的数据是通过查询字符串形式发送的，而响应可以是任意内容。通过图像Ping，浏览器得不到任何具体的数据，但是通过侦听load和error事件，能知道响应是什么时候接收到的。

　　

    var img = new Image();
    //将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知。
    img.onload = img.onerror = function(){
        alert('Done');
    };
    //请求从设置src属性那一刻开始，这里在请求中发送了一个name参数
    img.src='http://xxxxxxxx/test?name=Nicholas';

　　缺点：

• • 只能发送GET请求
  • 无法访问服务器的响应文本
  • 因此只能用于浏览器与服务器间的单向通信

2. JSONP（JSON with padding，填充式JSON/参数式JSON）

　　是被包含在函数调用中的JSON。由两部分组成：

　　　　1）回调函数：当响应到来时应该在页面中调用的函数。一般在请求中指定

　　　　2）数据：传入回调函数中的JSON数据

　　JSONP是通过动态<script>元素来使用，使用时可以为src属性指定一个跨域URL。这里script和img元素类似，都有能力不受限地从其他域加载资源。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，会立即执行。

    function handleResponse(response){
        alert("You are 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";　　　　//指定回调函数是handleResponse()
    document.body.insertBefore(script,document.body.firstChild);  

　　与图片Ping相比，JSONP的优点在于：

　　　　1）能够直接访问响应文本

　　　　2）支持在浏览器与服务器之间双向通信。

　　不足：

　　　　1）JSONP是从其他域中加载代码执行。其他域的安全性难以保证

　　　　2）要确保JSONP请求是否失败并不容易。<script>元素的onerror事件处理程序不被浏览器支持，因此必须使用计时器检测指定时间内是否收到响应。但是用户上网速度和带宽并不一定。

　　JSONP的原理：

　　网页可以得到从其他来源动态产生的Json资料，而这种使用模式就是所谓的Jsonp。用Jsonp抓到的资料并不是Json，而是任意的Javascript，用Javascript直译器执行而不是用Json解析器解析。比如：

　　看以下的代码就理解jsonp如何进行回调函数了。

JavaScript：

//注意：Jsonp只能使用GET请求
$.ajax({
  url: 'http://www.shihj.com',
  dataType: 'jsonp',
    success: function (response) {
        console.log(response);
    }
});

PHP：

$response = array('Javascript', 'PHP', 'Html', 'CSS');
$response = json_encode($response);

$callback = isset($_GET['callback']) ? $_GET['callback'] : false;
if ($callback) {
    $response = 'try{' . $callback . '(' . $response . ')}catch(e){}';
}
exit($response);

3. Comet（“服务器推送”）

　　Ajax是一种从页面向服务器请求数据的技术，而Comet是一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地被推送到页面上。

　　有两种实现Comet的方式：

　　1）长轮询：

　　　　定义：页面发起一个到服务器的请求，然后服务器一直保持连接打开，知道有数据可发送。发送完数据后，浏览器关闭连接，随即又发起一个到服务器的新请求。这一过程在页面打开期间一直持续不断。

　　　　优点：所有浏览器都支持，使用XHR和setTimeout()就能实现

　　2）http流：

　　　　定义：浏览器向服务器发送一个请求，而服务器保存连接打开，然后周期性地向浏览器发送数据。

    //在IE中不可用
    //三个参数：url, 接收到数据时调用的函数, 关闭连接时调用的函数  
    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!");
                });
    });

4. 服务器发送事件（SSE：Server-Sent Events）

　　是围绕只读Comet交互推出的API或者模式。SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。

　　支持短轮询，长轮询和HTTP流，且能在断开连接时自动确定何时重新连接

　　不支持ie

5. Web Sockets

　目标：在一个单独的持久连接上提供全双工、双向通信。

　在js中创建了WebSocket后，会有一个http请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会使用http升级从http协议交换为Web Socket协议。只有支持这种协议的服务器才能正常工作。

　　http://　　　　--->　　　　ws://

　　https://　　　 --->　　　　wss://

　创建Web Socket：

　　var socket = new WebSocket("ws://www.example.com/server.php");

　　必须传入绝对url。同源策略对Web Socket不适用。因此可以连接任何站点。

　实例化WebSocket对象后，浏览器就会马上尝试创建连接。与xhr类似，WebSocket也有一个表示当前状态的readyState属性：

WebSocket.OPENING (0)	正在建立连接
WebSocket.OPEN (1)	已经建立连接
WebSocket.CLOSING (2)	正在关闭连接
WebSocket.CLOSE (3)	已经关闭连接

　要关闭Web Socket连接，可以在任何时候调用close()方法：socket.close();

6. SSE & Web Sockets

　　1) 是否有自由度建立和维护Web Sockets服务器？

　　2）是否需要双向通信？

7. 跨域方法小结：

　　以上，我看Web Socket还可以实现跨域，但SSE好像没有涉及到跨域？SSE和Web Socket两节应该都是偏向于讲述两种Comet（服务器推送）的方法。而至于跨域的方法，综合上面介绍的几种：

　　1）图片Ping：使用<img>标签

　　2）JSONP：通过动态<script>元素调用

　　3）后台代理方法：这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域。

　　4）设置document.domain:只适用于不同子域的框架间的交互。

　　5) 使用window.name：

• • 在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。数据页面会把数据附加到这个iframe的window.name上
  • 在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）
  • 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。

　　6) 使用HTML5的新方法：window.postMessage()

　　　　window.postMessage(message, targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。

　调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。
　需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。
　上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第种方法的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，虽然没什么用，但是有一个方法是可用的－window.postMessage。下面看一个简单的示例，有两个页面：

a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
    window.onload = function(){
        var ifr = document.getElementById('ifr');
        var targetOrigin = "http://b.com";  //若写成http://b.com/c/proxy.html效果一样
                                            //若写成'http://c.com'就不会执行postMessage了
        ifr.contentWindow.postMessage('I was there! ', targetOrigin);
    };
</script>

b.com/index.html中的代码：

<script type="text/javascript">
    window.addEventListener('message', function(event){
        //通过origin属性判断来源地址
        if(event.origin == 'http://a.com'){
            alert('event.data');    //弹出I was there
            alert(event.source);    //对a.com, index.html中window对象的引用
                                    //由于同源策略，这里event.source不可以访问window对象
        }
    },false)
</script>

七、安全

---

 

参考： JSONP解决跨域问题