前端网页JSONP跨域问题

1. Jsonp由来

众所周知JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。而访问其他文件则需要跨域，而普通JavaScript又不支持，所以衍生了一种新的技术Jsonp。大家可能对域不太理解，其实也就是同协议、同IP地址、同端口号下的文件资源。下面附张图用以说明：

2. Jsonp原理

动态添加一个《script》标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与普通ajax XmlHttpRequest协议无关了。其中src属性中的链接访问javaScript脚本时，服务器不会返回json数据，而是直接调用了某个函数的js代码，在src中调用实现了跨域。

3. Jsonp的优劣

它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。但是它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

4. 展示代码

好了废话不多说，先上一张初次报错的图吧

由于小熙本次案例是关于百度地图的，所以就以此来举例了。
这个就是使用普通ajax访问不同域报的错，为了解决跨域问题小熙找到了两种使用Jsonp格式的方法。

第一种：改变普通ajax的响应数据类型的参数为（jsonp）

<script type="text/javascript">
	jQuery(function($) {
		$.ajax({
			url: "跨域的地址",
			dataType: "jsonp",
			//jsonp: "callback", // 默认值
			// 从服务器获取到数据之后，如何处理
			success: function(result) {
				// do something...
			}
		});
		
		$.getJSON("跨域的地址?callback=?",function(result) {
			// do something...
		});
	});
</script>

第二种：jQuery的$.getScript和$.getJSON（底层也是jsonp实现的）

           var address = encodeURIComponent(myValue);
            $.getJSON("http://api.map.baidu.com/cloudgc/v1?ak=您的AK值&address="+address+"&callback=?",function(data){
                if(data.status == 0 && data.result.length>0){
                    $("#recAreaInfo").citypicker();

                    // 执行赋值之前，需要执行reset和destroy的操作，把输入框选择的值值覆盖在上面的选择框中
                    $("#recAreaInfo").citypicker("reset");
                    $("#recAreaInfo").citypicker("destroy");
                    $('#recAreaInfo').citypicker({
                        province: data.result[0].address_components.province,
                        city: data.result[0].address_components.city,
                        district: data.result[0].address_components.district
                    });
                }
  

好了第一次分享就到这里了，本次小熙也是借鉴了许多大神的叙述，如果本文有什么误解之处还望各位不吝赐教。
（本文尽供学习交流，如有转载请标明出处）