1. What is cross domain?
We may often using AJAX to request data from other domain, now we will have cross domain request issues. It's because JavaScript only allows to request data from the same domain because of security consideration. In short, same domain strategy means a piece of code can read data from the same source, the same source here means the combination of the same domain, protocol and port number.
For example:
| URL | Description | Allow communication? |
|---|---|---|
| http://www.a.com/a.js http://www.a.com/b.js |
Same domain | Yes |
| http://www.a.com/lab/a.js http://www.a.com/script/b.js |
Same domain different directory | Yes |
| http://www.a.com:8000/a.js http://www.a.com/b.js |
Same domain, different port | No |
| http://www.a.com/a.js https://www.a.com/b.js |
Same domain, different protocol | No |
| http://www.a.com/a.js http://70.32.92.74/b.js |
Domain and IP | No |
| http://www.a.com/a.js http://script.a.com/b.js |
Same main domain, different subdomain | No |
| http://www.a.com/a.js http://a.com/b.js |
Same domain,different subdomain | No |
| http://www.cnblogs.com/a.js http://www.a.com/b.js |
Different domain | No |
2. Implementation
In HTML DOM, script tag is allowed to access data from different domain by specifying src attribute. For example:
<script src=”http://192.168.0.5/Web/web1.aspx” type="text/javascript"></script>
Here there is some requirement to the data returned, it cannot be as simple as {"Name","zhangsan"},if the data returned is like above, we cannot parse it. The data should be like var json={"Name","zhangsan"} or json({"Name","zhangsan"}).
3. Solutions
Method 1:
Server side:
protected void Page_Load(object sender, EventArgs e)
{
string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";
Response.Clear();
Response.Write(result);
Response.End();
}
Client side:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-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/ExampleBusinessApplication.Web/web2.aspx";
var head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild);
};
function callback(data) {
result = data;
}
function b_click() {
alert(result.name);
}
</script>
</head>
<body>
<input type="button" value="click me!" onclick="b_click();" />
</body>
</html>
Method 2:
Server side:
protected void Page_Load(object sender, EventArgs e)
{
string callback = Request.QueryString["jsoncallback"];
string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";
Response.Clear();
Response.Write(result);
Response.End();
}
Client side:
$.ajax({
async: false,
url: "http://192.168.0.5/Web/web1.aspx",
type: "GET",
dataType: 'jsonp', .
jsonp: 'jsoncallback',
//Parameters to be transmitted, have to have this one even if nodata to transmit
data: null,
timeout: 5000,
//Return JSON type
contentType: "application/json;utf-8",
success: function (result) {
alert(result.date);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
});
When we execute the above js codes, we actually send the below request:
http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742
and the server returns below object:
jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"})
Source : http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html
