6-7 预处理script类型
本节编程练习不计算学习进度,请电脑登录imooc.com操作

预处理script类型

$.ajax() 调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters)。

预处理的类型取决于由更加接近默认的 Content-Type 响应,但可以明确使用 dataType 选项进行设置。如果提供了 dataType 选项, 响应的 Content-Type 头信息将被忽略。

有效的数据类型是 text, html, xml, json,jsonp,和 script

dataType:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在1.4中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。

script 类型

$.ajax({
    type     : "GET",
    url      : "test.js",
    dataType : "script",
    complete: function(jqXHR, status) {
        console.log(jqXHR, status)
    }
});

根据 API 的说明可知,如果 dataType 类型为 script 的时候,需要处理。

  1. 执行脚本
  2. 内容当作纯文本返回
  3. 默认情况下不会通过在 URL 中附加查询字符串变量 "_=[TIMESTAMP]" 进行自动缓存结果,除非设置了 cache 参数为 true
  4. 在远程请求时(不在同一个域下),所有 POST 请求都将转为GET请求。(因为将使用 DOM 的 script 标签来加载)

针对上述四点,我们看看处理的流程。

inspectPrefiltersOrTransports(prefilters,s,options,jqXHR)

此时的 dataType 类型就会经过对应的预处理 ajaxPrefilter("script"),其中 s.cache (默认: true, dataType 为 "script" 和 "jsonp" 时默认为 false)。

jQuery.ajaxPrefilter("script", function(s) {
    if (s.cache === undefined) {
        s.cache = false;
    }
    if (s.crossDomain) {
        s.type = "GET";
    }
});

预处理的处理就是将其缓存为设置为 false ,浏览器将不缓存此页面,这将在请求的 URL 的查询字符串中追加一个时间戳参数,以确保每次浏览器下载的脚本被重新请求,工作原理是在 GET 请求参数中附加" _={timestamp} "在请求的地址后面加一个时间戳。

if (s.cache === false) {
    s.url = rts.test(cacheURL) ?
    // If there is already a '_' parameter, set its value
    cacheURL.replace(rts, "$1_=" + ajax_nonce++) :
    // Otherwise add one to the end
    cacheURL + (ajax_rquery.test(cacheURL) ? "&" : "?") + "_=" + ajax_nonce++;
}

此时的 s.url = "test.js?_=1402362401890",该参数不是其他请求所必须的,除了在 IE8 中,当一个 POST 请求一个已经用 GET 请求过的 URL。

我们可以参考下右边的简单的调试。

任务

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.  
  10. script的预处理结果
  11. <ul></ul>
  12.  
  13. <script type="text/javascript">
  14.  
  15. var $ul = $('ul')
  16.  
  17. function show(data) {
  18. $ul.append('<li>' + data + '</li>');
  19. }
  20.  
  21. ///////////////////
  22. // script 类型的预处理 //
  23. //
  24. // jQuery.ajaxPrefilter("script", function(s) {
  25. // if (s.cache === undefined) {
  26. // s.cache = false;
  27. // }
  28. // if (s.crossDomain) {
  29. // s.type = "GET";
  30. // }
  31. // });
  32. ///////////////////
  33. jQuery.ajaxPrefilter("script", function(s) {
  34. show('s.cache:' + s.cache)
  35. show('s.type:' + s.type)
  36. });
  37.  
  38. //执行一个异步的HTTP(Ajax)的请求。
  39. var ajax = $.ajax({
  40. url: 'http://code.jquery.com/jquery-latest.js',
  41. dataType: 'script',
  42. beforeSend:function(jqXHR, s){
  43. show('s.url:' + s.url)
  44. }
  45. })
  46.  
  47.  
  48. </script>
  49. </body>
  50. </html>
下一节