#header {
width: 100%;
margin-left: 10px;
margin-right: 10px;
background-color:#480082;
color: #FFFFFF;
}
body {
margin-left: 40px;
margin-right: 40px;
}
div#jsonText {
background-color: #d9d9d9;
-webkit-border-radius: 6px;
border-radius: 6px;
margin: 10px 0px 0px 0px;
padding: 0px;
border: 1px solid #d9d9d9;
}
div.dataItem {
font-family: Verdana, Helvetica, sans-serif;
color: #434343;
padding: 10px;
}
div.dataItem:nth-child(2n) {
background-color: #fafafa;
}
div.dataItem:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
div.dataItem:last-child {
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
我们刷新一下页面，OK现在页面效果好多了。
同源策略与跨源策略
上面我们获取页面和数据都是在同源请求情况下，也就是说，客户端浏览器请求的页面和数据都是属于同一域名、同一端口和同协议。
同源策略：阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的URL的域必须与当前Web页面的域相同、相同端口。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。
图5同源请求过程
在一些情况下，我们不可以避免地要地需要从其他域名或服务器中跨域请求数据，但前面提到Ajax只能向同一个域中使用相同端口和协议的URL中发送请求；如果URL与启动请求的页面有任何差别，都会引发安全错误。
跨源策略（CORS）：是一个Web浏览器技术规范，它定义了一个方法让Web服务器允许其他域名页面访问它的资源。跨源策略定义了一个方法让浏览器和服务器可以交互决定是否允许跨源请求。
大家注意到同源请求中我们使用的是JSON格式，但在跨源请求中却是使用JSONP，这时大家可能有点困惑，坦然我刚开始学习的时候也是这样的。
首先我们必须理解JSON和JSONP的区别：JSON是一种数据格式，而JSONP像是通过一个方法名来封装JSON格式；由于浏览器允许跨源请求<script>资源，如我们的HTML页面代码中使用了Google的jQuery库，当我们Web程序发送跨源请求后，服务器给我们提供响应数据，但服务器无法预知接受JSON数据的方法名，所以我们要提供一个方法名。
Ajax跨源请求
跨域请求数据解决方案主要有如下解决方法：
JSONP方式
表单POST方式
服务器代理
Html5的XDomainRequest
Flash request
在介绍JSONP方式解决跨域请求数据之前，首先我们看看JSONP的定义。
JSONP（JSON with Padding）是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过Javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
由于同源策略的限制，XMLHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
假设博客园提供一个API接口：?，供开发者调用获取热门博文。
这里我们可以通过两种方式调用该接口：
1. 用Javascript定义回调函数
其实，通过Javascript定义回调函数调用该接口比较直观，我们只需告诉服务器接收数据的方法名就OK了，比如：
? callback=myFunction
其中myFunction是我们在页面自定义的函数用来接收服务器回传的数据，myFunction的定义如下：
复制代码 代码如下: