Jquery cross-origin request solution (all found online, I did not add verification), jquery

Source: Internet
Author: User
Tags getscript

Jquery cross-origin request solution (all found online, I did not add verification), jquery

http://www.3lian.com/edu/2014/02-10/127921.html
As long as this article introduces jquery ajax cross-origin solution (json mode), you can refer to it as needed, I hope to help you. In many projects recently developed by the company, cross-origin ajax requests are required, for example, http: // a under several subdomains. ****. com/index123.aspx, http: // B. ****. com/index2.aspx requests the json information of the user and then processes the data. At first, my colleagues and I tried many methods, using $. ajax (), whether it is get or post, will cause uri deny errors. Some GG later found the solution and understood the reasons. Since jquery 1.2,. getJSON supports cross-origin operations. The jquery. getJSON () method can be used to solve cross-origin problems. Example: <script type = "text/javascript" src = "/script/jquery. js "> </script> function gettst2 () {$. getJSON ("http://ucenter.xxxx.com.cn/ajax/test.aspx? Callback =? ", {Id:" 123456 ", site:" 01 "}, function (data) {alert(data.html s); document. getElementById ("shows "). innerHTML = data.html s;}) ;}gettst2 (); ASPX. the cs file is processed as string jsoncall = Request. queryString ("callback"); Response. write (jsoncall + "({htmls: Test 001})"); If html code is added, do not add the/n symbol. Otherwise, garbled characters and js errors may occur.


Document 2:

Today, remote data loading and page rendering are required in the project, and ajax cross-origin requests are not realized until the development stage. I vaguely remember that Jquery has proposed a solution for ajax cross-origin requests, so I immediately pulled out the Jquery API for research and found that JQuery has two solutions for Ajax cross-origin requests, but they only support the get method. They are JQuery. ajax jsonp and jquery. getScript.

What is jsonp format? Original API: If the obtained data file is stored on a remote server (the domain name is different, that is, cross-Origin data retrieval), The jsonp type is required. If this type is used, a query string parameter callback =? will be created? This parameter is added after the request URL. The server should add the callback function name before the JSON data to complete a valid JSONP request. This means that the remote server needs to process the returned data and return a callback (json) data according to the callback parameter submitted by the client, the client will process the returned data in script Mode to process json data. JQuery. getJSON also supports jsonp data calling.

Sample Code for calling the client JQuery. ajax:

?
123456789101112131415 $.ajax({    type : "get",    async:false,    url : "http://www.xxx.com/ajax.do",    dataType : "jsonp",    jsonp: "callbackparam",// Parameters of the function name used by the server to receive callback calls    jsonpCallback:"success_jsonpCallback",// Callback function name    success : function(json){        alert(json);        alert(json[0].name);    },    error:function(){        alert('fail');    }});
Sample Code returned by the server :?
12345 public void ProcessRequest (HttpContext context) {    context.Response.ContentType = "text/plain";    String callbackFunName = context.Request["callbackparam"];    context.Response.Write(callbackFunName + "([ { name:\"John\"}])");}


Document 3:

From: http://www.myquickphp.com/archives/147

(The requested cross-origin server does not support the regular "?" Solutions for querying requests)
When I first asked for VIP for the first time yesterday, I found a very strange problem. I have the following URL address:

 

Http://dynamic.vip.xxxxxx.com/active/ <controllers>/<active >/< id>

 

Access in the address bar of the browser can get the correct output, but I did not get the result when I put the asynchronous request in AJAX and debug it with FireBug, I have not found any problem after debugging with Brother Hu and I have been using this URL for the first time because the program of the other party was written in the XX framework, I am not very familiar with it (I have time to study its kernel source code). I always thought it was affected by its settings. When I was about to vomit blood, lefeng (a guy familiar with this article) was finally launched. After I told him the problem, his first response was: "Are you using cross-origin access .." Oh fuck, I and Shui long have been studying Program Logic and neglected their current domain name, because the domain name that I currently execute the request is:

 

Http://vip.xxxxxx.com/active1/index.html

 

Asked lefeng, the solutions (functions) provided in the system are not satisfactory or too cumbersome. After discussing several solutions with lefeng, he could not find the best solution at the moment, at, it's time for him to stay with his wife at night! Back home, I wanted to use iframe to load cross-origin URLs to get dom data. After research, I found that the idea was too naive. JS's security policies and the book did not allow me to do this; I want to use the proxy solution, but I think it is more troublesome than the solution used in the current system. After studying in detail the latest version of jQuery about the cross-origin solution, finally let me research out a very convenient solution: The following is the sample code: ------ http://a.com/index.html -------
<Script type = "text/javascript" src = "jquery-1.4.2.js"> </script>
<Script type = "text/javascript">
/*
Perfect solution to AJAX cross-origin problems
Study: Yuan Wei
Inspiration: lefeng
*/
Function jsonCallBack (url, callback)
{
$. GetScript (url, function (){
Callback (json );
});
}
Function fun1 ()
{
JsonCallBack ('HTTP: // B .com/ B .php', function (json ){
Alert (json. message );
})
}
</Script>
<Button type = "button" onclick = "fun1 ()"> Cross-origin access </button>
------ Http:// B .com/ B .php -------
<? Php
$ Ary = array ('result' => 0, 'message' => 'cross-origin successfully ');
$ Json = json_encode ($ ary );
// The final JSON data output must be defined in this way, which utilizes the closure feature of JS.
Echo "var json = $ json ;";
?>

 

Note:1: The jQuery version must be later than version 1.2. Otherwise, cross-origin processing is not supported. 2. Only GET requests are supported. 2. The requested URL must return data as shown in the following example. Advantages and disadvantages of this solution:Advantages: 1: better than using iframe to add the output parent. the XXX () solution is simple, efficient, and clear, and the frontend processing is more convenient. 2: It is much simpler than the proxy method in programming. Disadvantages: 1: jQuery must be used. 2: the format of the returned data must be in the sample format. Of course, it is not limited to JSON, but it is the most convenient to process. (Cross-origin servers support General "?" Query the request solution using JQuery'sJSONP ) ------- Http:// B .com/index --------
<Script src = "jquery-1.4.2.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Function fun1 ()
{
$. GetJSON ("http://a.com/c.php? No = 10 & msg = OK & format = json & jsoncallback =? ",
Function (data ){
Alert (data. msg );
});
}
</Script>
<Button type = "button" onclick = "fun1 ()"> Cross-origin processing </button>


------- Http://a.com/c.php --------
<? Php
$ No = $ _ GET ['no'];
$ Msg = $ _ GET ['msg '];
$ Json = json_encode (array ('no' => $ no, 'msg '=> $ msg ));
// The following output is required:
Echo $ _ GET ['jsoncallback']. '('. $ json .')';


 



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.