js跨域原理详解及两种解决方案

1.什么是跨域？

我们经常使用ajax请求来访问页面上其他服务器的数据。此时，客户端会出现跨域问题。

跨域问题是由javascript语言中的同源策略安全限制引起的。

简单来说，同源策略就是一个脚本只能从同一个源读取windows和文档的属性，其中同一个源指的是主机名、协议和端口号的组合。

例如：

2.实施原则。

在HTML DOM中，脚本标签可以跨域访问服务器上的数据。因此，脚本的src属性可以指定为跨域url，从而实现跨域访问。

例如：

这种拜访方式是不能接受的，但是下面的方式是可以的。

这里对返回的数据有一个要求，就是：服务器返回的数据不能像{“name”:“Zhang shan”}那么简单。

如果返回这个json字符串，我们就不能引用它。因此，要返回的值必须是varjson={“name”:“Zhang shan”}或JSON({“name”:“Zhang shan”})。

为了防止程序报错，我们还必须建立一个json函数。

3.解决方法

方案一服务器：

受保护的void Page_Load(对象发送方，EventArgs e){ string result=' callback({ \ ' name ' : ' Zhang San \ '，\ ' date ' : ' 2012-12-03 \ ' })'；回应。clear()；回应。写(结果)；回应。end()；}客户端：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title/title script type=' text/JavaScript ' var result=null；window . onload=function(){ var script=document . createelement(' script ')；script . type=' text/JavaScript '；script . src=' http://192 . 168 . 0 . 101/example business application。web/web 2 . aspx '；var head=document . getelementsbytagname(' head ')[0]；head.insertBefore(脚本，head . first child)；};函数回调(数据){ result=data}函数b _ click(){ alert(result . name)；} /script/headbody输入类型='button '值='点击我！'onclick=' b _ click()；'//body/html方案二：由jquery完成。

通过jquery的jsonp方法，在服务器端有需求。

服务器如下：

受保护的void Page_Load(对象发送方，事件参数e) {字符串回调=请求。query string[' jsoncallback ']；string result=callback '({ \ ' name ' : ' Zhang San \ '，\ ' date ' : ' 2012-12-03 \ ' })；回应。clear()；回应。写(结果)；回应。end()；}客户端：

$.Ajax ({async: false，URL : ' http://192 . 168 . 0 . 5/web/web 1 . aspx '，type3360' get '，datatype:' jsonp '，//jsonp)，如果使用jsoncallback，那么服务器。返回一个对象。jsonp :“jsoncallback”对应jsoncallback的值，//要传递的参数在不传递参数时也必须用data: null和timeout: 5000写入。//返回Json类型contenttype3360 '应用程序/Json；Utf-8 '，//服务器段返回的对象包含名称、数据属性。success:函数(结果){alert(结果。日期)；}，error:函数(jqXHR，textStatus，error through){ alert(textStatus)；} });事实上，当我们执行这个js时，js向服务器发送了这样一个请求：

http://192.168.0.5/Web/web1.aspx？jsoncallback=JSON p 1354505244726 _=1354505244742

服务器相应地返回下面的对象：

JSON p 1354506338864({ ' name ' : ' Zhang San '，' date':'2012-12-03'})

此时，实现了跨域模型数据的需求。

以上是js跨域原理和两个解决方案的介绍，希望能帮助大家学习跨域知识点，也可以结合其他相关文章进行学习和研究。