【js学习笔记-101】------借助<script>发送HTTP请求

借助<script>发送HTTP请求：JSONP

<script>元素可以作为一种Ajax传输机制：只须设置<script>元素的src属性，然后浏览器就会发送一个http请求以下载src所指向的URL。

使用<script>元素进行ajax传输的一个主要原因是，它不受同源策略的影响，因此可以使用它们从其他服务器请求数据，第二个原因是包含JSON编码数据的响应体会自动解码（即执行）。

为了实现<script>ajax传输，必须允许web页面可以执行远程服务器发送过来的任何js代码，这意味着对于不可信的服务器，不应该采取该技术。这种方法普遍用于可信的第三方脚本，特别是在页面中嵌入广告和“组件”。这种技术有个名称叫：JSONP

假设你已经写了一个服务，它处理GET请求并返回JSON编码数据。同源的文档可以在代码中使用XMLHttpRequest和JSON.parse()。假如在服务器上启用了CORS，在新的浏览器下，跨域的文档也可以使用XMLHttpRequest享受到该服务。在不支持CROS的旧浏览器，跨域文档只能通过<script>元素访问这个服务。使用jsonp，jsonp响应数据（理论）是合法的js代码，当它到达时浏览器将执行它。相反，不使用jsonp，而是对json编码过的数据解码，结果还是数据，并没有做任何事情。这就是JSONP的意义所有，当通过<script>元素调用数据时，响应内容必须用js函数名和圆括号包裹起来。而不是发送一段json数据。

例：使用script元素发送jsonp请求

    function getJSONP(url,callback){

       var cbnum = “cb”+getJSONP.counter++;

       var cbname = “getJSONP.”+cbnum;

        //将回调函数名以表单编码的形式添加到URL的查询部分中

        //使用jsonp作为参数名，一些支持jsonp的服务

        if(url.indexOf(“?”)===-1)

            url+=”?jsonp=”+cbname;

        else

            url+=”&jspnp=”+cbname;

         var script = document.createElement(“script”);

         getJSONP[cbnum] = function(response){

              try{

                      callback(response);

              }finally{

                              delete getJSONP[cbnum];

                             script.parentNode.removeChild(script);

                         }

         };

           script.src = url; //设置脚本的url

           document.body.appendChild(script);

    }

     getJSONP.counter = 0;