代码清单test.html:

  1. <script src="jquery.js"></script> 
  2.  
  3. <!-- Javascript --> 
  4.  
  5. <script type="text/javascript"> 
  6.  
  7. $(document).ready(function (){ 
  8.  
  9.     $("#btn392").click(function(){  
  10.  
  11.            var url = "http://www.pureexample.com/backend/ajax_crossdomain.aspx";    
  12.  
  13.            //var url = "http://127.0.0.1:5000"
  14.  
  15.            //[{    "Manufacturer": "HUMMER",    "Sold": 120,    "Month": "2012-11"}] 
  16.  
  17.            var success = function(data){ 
  18.  
  19.             var html = []; 
  20.  
  21.             data = $.parseJSON(data); /* parse JSON */ 
  22.  
  23.             /* loop through array */ 
  24.  
  25.             $.each(data, function(index, d){            
  26.  
  27.                 html.push("Manufacturer : ", d.Manufacturer, ", ", 
  28.  
  29.                           "Sold : ", d.Sold, ", ", 
  30.  
  31.                           "Month : ", d.Month, "<br>"); 
  32.  
  33.             }); 
  34.  
  35.             $("#div391").html(html.join('')).css("background-color", "orange"); 
  36.  
  37.         }; 
  38.  
  39.         $.ajax({ 
  40.  
  41.           type: 'GET',    
  42.  
  43.           url: url, 
  44.  
  45.           data:{todo:"jsonp"}, 
  46.  
  47.           dataType: "jsonp", 
  48.  
  49.           crossDomain: true,          
  50.  
  51.           cache:false, 
  52.  
  53.           success: success, 
  54.  
  55.           error:function(jqXHR, textStatus, errorThrown){ 
  56.  
  57.             alert(errorThrown); 
  58.  
  59.           } 
  60.  
  61.         }); 
  62.  
  63.     }); 
  64.  
  65. }); 
  66.  
  67. </script> 
  68.  
  69. <!-- HTML --> 
  70.  
  71. <a name="#jsonp-ajax"></a> 
  72.  
  73. <div id="example-section39">    
  74.  
  75.     <div>Car sale report</div> 
  76.  
  77.     <div id="div391"></div> 
  78.  
  79.     <button id="btn392" type="button">Click </button> 
  80.  
  81. </div> 

普通情况下双向抓包信息:

GET /backend/ajax_crossdomain.aspx?callback=jQuery111006746286363340914_1393568973731&todo=jsonp&_=1393568973732HTTP/1.1

Host: www.pureexample.com

Connection:keep-alive

Accept: */*

User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) UbuntuChromium/31.0.1650.63 Chrome/31.0.1650.63 Safari/537.36

Accept-Encoding:gzip,deflate,sdch   /* 回包压缩 */

Accept-Language:zh-CN,zh;q=0.8,en;q=0.6

Cookie:__cfduid=da94308c9f886169fb62c872c48d44e7c1393554685481

HTTP/1.1 200 OK

Server:cloudflare-nginx

Date: Fri, 28 Feb2014 06:31:01 GMT

Content-Type:text/html; charset=utf-8

Transfer-Encoding:chunked

Connection:keep-alive

Cache-Control:private

Vary:Accept-Encoding

Set-Cookie:ASP.NET_SessionId=yofjwnenn0cs5ijxx1jrdq55; path=/; HttpOnly

X-AspNet-Version:2.0.50727

X-Powered-By:ASP.NET

X-Powered-By-Plesk:PleskWin

CF-RAY:103b11cb0d290378-LAX

Content-Encoding:gzip

78     /* chunck大小为0x78字节*/

........... /* 回包为压缩形式 */

,M-.4444003713.0363661.44.74.465..47676.P..V..%..........."%+.%.P__.%..dp~N

P........+...2204.54T..U.......

a

...t..t...

0

通过分析双向的数据包可以看出,若请求头的Accept-Enconding为gzip,则服务端的回包会以压缩数据的形式回传。


相关内容