JS跨域请求

Posted 2020-08-10

一.跨域请求方式：

1.跨域请求方式一：angularjs之$http.jsonp

举例：

 1 $http.jsonp( "http://xxx.xxx.com?action=getResource&userID=" + userId + "&resourceCode=" + code + "&callback=JSON_CALLBACK")
 2 .success(function (data) {
 3 var json = eval(data);
 4 if (json.Success == ‘True‘) {
 5 window.location.href = json.Site;
 6 } 
 7 else if (json.Success == ‘False‘) {
 8 alert(json.Site);
 9 }
10 
11 })
12 .error(function () {
13 
14 //process
15 });

 

2.跨域请求方式二：jquery之$.ajax(或者$.getJSON)

同样举例：

 1 var url = "http://xxx.xxx.com/xxx.svc/Jsonp/QueryTemplates?systemCode=_Ferry_";//此处请求WCF服务
 2 //var mydata = { action: "getResource", userID: 428, resourceCode: 5507 };
 3 
 4 
 5 $.ajax({
 6 url: url,
 7 type: ‘GET‘,
 8 dataType: ‘jsonp‘,//必须
 9 data: "{}",
10 jsonp: ‘callback‘,//必须
11 success: function (result) {//此处即为服务端返回的可执行js代码的默认执行函数(注：服务端一般返回 callback(jsondata) )
12  
13 for (var i in result) {
14 alert(i + ":" + result[i]);//循环输出a:1,b:2,etc. 
15 }
16 },
17 error: function (XMLHttpRequest, textStatus, errorThrown) {
18 console.log(XMLHttpRequest);
19 console.log(textStatus);
20 console.log(errorThrown);
21 },
22 timeout: 3000
23 });

 

二.注意事项：

1.jsonp跨域只能GET，不能POST
2.服务端相应要做处理，如：

C# Code:

 1 [WebMethod]
 2 public void JQueryJsonp(string callback)
 3 
 4 {
 5 
 6 System.Web.HttpContext.Current.Response.Write(callback+"({username:‘showbo‘})");
 7 
 8 System.Web.HttpContext.Current.Response.End();
 9 
10 }

 

javascript Code:

1 $.ajax({
2 url: "test.asmx/JQueryJsonp?callback=?",
3 dataType: "jsonp",
4 success: function (json) { alert("Success：" + json.username); },
5 error: function (x, e) { alert("Error：" + x.responseText); }, 
6 complete: function (x) { alert("Complete：" + x.responseText); }
7 });

先记着，后续再补充完善。