本文介绍了浏览器的同源策略及其对跨域的影响，详细阐述了Ajax跨域的三种解决方案：1. 代理（后台解决）；2. JSONP（针对GET方式）；3. XHR2（IE10以下不支持）。重点讲解了JSONP的工作原理、优点和局限性，包括其错误处理缺失和安全性问题。并提供了一个JQ应用JSONP的实例，以及如何通过修改响应头利用XHR2进行跨域访问。总结指出，代理最通用但复杂，JSONP简单但仅限GET，XHR2简单但仅适用于HTML5环境。
一个域名地址的组成：
浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。当协议、子域名、主域名、端口号中任意一个不同时，都算做不同域，不同域之间相互请求资源，就算做“跨域”。
跨域解决方法：
1、代理（后台解决）；
2、JSONP（针对 GET 方式）；
3、XHR2（IE10以下不支持）。
JSONP
Jsonp原理：
首先在客户端注册一个callback， 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function，function 名字就是传递上来的callback的名字。最后将事先生成的 json 数据直接以参数的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里。
JSONP实例：百度搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#q{ display: block; width: 300px; height: 30px; border: 1px solid #e1e1e1; margin: 50px auto 0;}
#ul1{ list-style: none; width: 300px; border: 1px solid #EDEDED; margin: -1px auto 0; 
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
