JSON 是用于在浏览器和服务器之间交换信息的轻量级数据格式(与 XML 相比)。JOSON 依赖于 JavaScript 开发人员,因为它是 JavaScript 对象的字符串表示。JSONP广泛应用于跨站调用json数据的API当中。
一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。
下面看一个JSONP的简单实例吧。
服务器端的脚本实现(PHP):http://www.test.com/index.php
<?php header("Content-Type: text/html; charset=UTF-8"); $student_info = array( 'name' => 'fisher', 'sex'=>1, 'age'=>20 ); echo $_GET['callback'] . '(' . json_encode($student_info) . ');';
客户端脚本实现(javascript ):file:///C:/Users/fisher/Desktop/index.html
<script type="text/javascript"> function studentInfo(data) { alert(data.name); } </script> <script type="text/javascript" src="http://www.test.com/index.php?callback=studentInfo"></script>
下面是利用JQuery实现的JSONP
alert("Number: " + Number(null)); //0 alert("parseInt: " + parseInt(null));//NaN alert("Number: " + Number(null)); //0 alert("parseInt: " + parseInt(null));//NaN
alert("parseInt: " + parseInt('123hello'));//123 alert("Number: " + Number('123hello'));//NaN
alert("parseInt: " + parseInt(1.23)); //1 alert("Number: " + Number(1.23));//1.23 alert("parseInt: " + parseInt("1.23"));//1 alert("Number: " + Number("1.23"));//1.23
alert("parseInt: " + parseInt('0101')); //65 alert("Number: " + Number('0101'));//101 alert("parseInt: " + parseInt('070')); //56 alert("Number: " + Number('070')); //70 alert("parseInt: " + parseInt('0xf0')); //240 alert("Number: " + Number('0xf0'));//240
1 减少HTTP请求数量 (Minimize HTTP Requests)
tag:content
80%的用户响应时间被花费在前端,而这其中的绝大多数时间是用于下载页面中的图片、样式表、脚本以及Flash这些组件。减少这些组件的数量就可以减少展示页面所需的请求数,而这是提高网页响应速度的关键。
朴素的页面设计当然是减少组件的一种途径,但有没有能兼顾丰富的页面内容和快速的响应速度的方法呢?下面就是一些不错的技巧,能在提供丰富的页面展现的同时,减少Http请求数量:
合并文件,通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中,从而减少Http请求的数量。当不同页面需要应用不同的脚本或样式时,合并这些文件会是一个很大的挑战,不过在发布网站时进行这种合并,将是提高网站响应速度的重要一步。
CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中,使用CSS的background-image 和background-position 属性去控制展现恰当的图片区域。
Image maps把多张图片组合成为一张图片。图片的总大小是不变的,但减少Http请求数会提高页面的响应速度。Image maps只能用于图片在网页中相邻的情况,比如导航条。制定image maps中的图片坐标是个很麻烦的过程,而且容易出错。同时给导航使用image maps也并不易读,所以并不推荐使用。