Cross-domain Request for Juery 2

Source: Internet
Author: User
Tags domain server

Time too fast, and was pulled back to JS battlefield, cross-domain problem this scar again open pain.

Fortunately, with jquery, cross-domain issues seem to be less difficult. This time also take this opportunity to the cross-domain problem to the inquisitive, actual development projects, access to relevant information, is considered to solve the cross-domain problem. It is necessary to write down the memo.

Cross-domain security restrictions are referred to as browser-side. There are no cross-domain security restrictions on the server side.
So through the native server side through a similar httpclient way to complete the "cross-domain Access" work, and then in the browser side with Ajax to get the local server-side "cross-domain Access" the corresponding URL. It is also possible to indirectly complete cross-domain access. But it is clear that the amount of development is large, but the limit is minimal, Many widgets open platform server side (such as the Sohu Blog open platform) actually do it. Not in the scope of this discussion.

To discuss True cross-domain access on the browser side, it is recommended that jquery $.ajax () currently supports the cross-domain of Get methods, which is actually done in the JSONP way.

Real Case:
Copy the Code code as follows:
var qsdata = {' Searchword ': $ ("#searchWord"). attr ("value"), ' Currentuserid ': $ ("#currentUserId"). attr ("value"), ' Conditionbean.pagesize ': $ ("#pageSize"). attr ("value")};

$.ajax ({
Async:false,
url:http://cross-Domain dns/document!searchjsonresult.action,
Type: "GET",
DataType: ' Jsonp ',
JSONP: ' Jsoncallback ',
Data:qsdata,
timeout:5000,
Beforesend:function () {
Jsonp mode This method is not triggered. The reason may be datatype if you specify JSONP, it's not an AJAX event anymore.
},
Success:function (JSON) {//client jquery pre-defined callback function, after successfully acquiring JSON data on a cross-domain server, this callback function is executed dynamically
if (json.actionerrors.length!=0) {
alert (json.actionerrors);
}
Gendynamiccontent (Qsdata,type,json);
},
Complete:function (XMLHttpRequest, Textstatus) {
$.unblockui ({fadeout:10});
},
Error:function (XHR) {
Jsonp mode This method is not triggered. The reason may be datatype if you specify JSONP, it's not an AJAX event anymore.
Request Error Handling
Alert ("Request error (Please check correlation network status.)");
}
});
Note $.getjson ("http://cross-domain dns/document!searchjsonresult.action?name1=" +value1+ "&jsoncallback=?",
function (JSON) {
if (JSON. property name = = value) {
Execute code
}
});
This is actually a high-level package of the previous example $.ajax ({..}) API, and some of the $.ajax API's underlying parameters are encapsulated and not visible.
This way, jquery is assembled into the URL get request as follows
HTTP//cross-domain dns/document!searchjsonresult.action?&jsoncallback=jsonp1236827957501&_=1236828192549& Searchword=%e7%94%a8%e4%be%8b¤tuserid=5351&conditionbean.pagesize=15

On the response side (HTTP///cross-domain dns/document!searchjsonresult.action),
by Jsoncallback = Request.getparameter ("Jsoncallback"), we get the JS function of the jquery end to be recalled later name:jsonp1236827957501
Then the content of the response is a script Tags: "jsonp1236827957501 (" + by the request parameters generated by the JSON array + ")";
jquery will invoke this JS tag:jsonp1236827957501 (JSON array) dynamically via callback method.
This achieves the purpose of cross-domain data exchange.

The most basic principle of JSONP is: adding a <script> tag dynamically, and the SRC attribute of the script tag is not a cross-domain limitation. In this way, this cross-domain approach is actually unrelated to the Ajax XMLHttpRequest protocol.
In fact, "jquery Ajax cross-domain problem" has become a pseudo-proposition, jquery $.ajax method name is misleading.
If set to datatype: ' Jsonp ', this $.ajax method has nothing to do with Ajax XMLHttpRequest, instead it is the JSONP protocol.
JSONP is an unofficial protocol that allows the server-side integration of script tags back to the client to achieve cross-domain access via JavaScript callback
JSONP is the JSON with Padding. Due to the limitations of the same-origin policy, XMLHttpRequest only allows resources to be requested for the current source (domain name, protocol, port). If you want to make cross-domain requests,
We can make cross-domain requests by using the HTML script tag and return the script code to execute in the response, where you can pass the JavaScript object directly using JSON.
This cross-domain communication method is called JSONP.

Jsoncallback function jsonp1236827957501 (...): A callback function that is registered by the browser client and gets the JSON data on the cross-domain server

Jsonp principle:

First register a callback (for example: ' Jsoncallback ') on the client, and then pass callback's name (for example: jsonp1236827957501) to the server.

At this point, the server becomes JSON data.

Then, in JavaScript syntax, a function is generated, and the function name is the value jsonp1236827957501 of the parameter ' Jsoncallback ' passed up.

Finally, the JSON data is placed directly into the function in the form of a parameter, so that a document of JS syntax is generated and returned to the client.

The client browser, parses the script tag, and executes the returned JavaScript document, at which time the JavaScript document data, as parameters,
Passed into the client's pre-defined callback function (as in the previous example, the jquery $.ajax () method encapsulates the Success:function (JSON)). (Dynamic execution callback function)

Can say Jsonp way principle and <script src= "//cross-domain/...xx.js" ></script> is consistent (QQ space is a large number of this way to achieve cross-domain data exchange). JSONP is a script injection (scripts injection) behavior, so there are some security implications.

Note that Jquey is not supported for post-mode cross-domain.
Why is it?
Although the use of post + dynamic generation of the IFRAME is possible to achieve the purpose of post cross-domain (there is a bit of JS cattle is this way to jquery1.2.5 patch), but this is a more extreme way, not recommended.
can also say get way cross-domain is legal, post way from security point of view, is considered illegal, last but not the sword walk Pifo.

The need for client-side cross-domain access seems to have attracted the attention of the HTML5 WebSocket standard supports cross-domain data exchange, and should also be a future-selectable cross-domain data exchange solution. jquery cross-domain access problem Resolution (note) These two days need to implement a level three domain name direct URL rewrite to the site static page, such as Http://123.456.789.com/UrlRewrite to http://www.789.com/news/ 123.html

Here, perhaps, and JS cross-domain access is not the slightest relationship, in the mind of the problem is related to Urlrewrite. All right, now urlrewrite everything is ready, directly in the browser address bar input http://123.456.789.com/will find that this in the address bar directly through the http://www.789.com/news/123. HTML to access the page has an exception, the page image and style, as well as JS seems to have lost its role.

Take a look at the URL in the two address bar and suddenly pat yourself in the head with a little thought. Originally this page of the source code in the picture, CSS, JS are through the relative path to request. Of course, this is not a problem in the direct access to the http://www.789.com/news/123.html path, but when using http://123.456.789.com/access to see the address bar two URL obvious path is completely different, For example, images/1.gif in 1 is the equivalent of requesting http://www.789.com/news/1.gif and then 2 to become what http://123.456.789.com/images/1.gif it is obvious that this picture you will never request. Because you will never find this image under this path. OK, for the sake of simplicity, we do not use the online people to introduce a lot of methods, the absolute path to solve it. OK, everything looks so natural, so carefree. But the real trouble is still behind.

All the time, it's like we don't have a title. Don't worry, the problem always solves one and then comes out the second one.

First of all, tell me about this page, this page is through the program will be dynamically presented things are static, but the static page inside must show some changes in the information, many people here may think of using an IFRAME to solve, but this solution is not what I want to use, 1. IFRAME is less efficient than other methods, and 2.IFRAME is unfriendly to crawling spiders. So here I started with the load function of jquery, which also directly requested the dynamic page and then displayed the dynamic information returned in the static page. Well, there may be some friends here who already know why this diary is called "jquery cross-Domain access problem".

First look at the jquery load function in my parameters $ ("#head"). Load ("http://www.cnblogs.com/project/ajax.php" {"Action": "Head"}); Of course, the above lesson has replaced the parameter with $ ("#head"). Load ("http://www.789.com/project/ajax.php" {"Action": "Head"}); But there's still a "jquery.js 138 lines No access" run directly to see juqery138 line coax is the load function here out of the problem (did not read the source, to tell the truth too torture people, a bunch of compressed JS code to see people want to die) okay go to Google on the internet a bit, A few people's answers caught my eye. They all say this is the problem of JS cross-domain operation. But itself JS is unable to directly cross-domain operation. Then contact yourself three-level domain name Urlrewrite and then think about cross-domain issues, three-level domain name is located in the domain is 789 under 456 under the 123 and itself is requested by the 789.com domain name so this is not cross-domain what is it? Enlightened. I'm sure I found the problem.

Continue Google, a lot of people recommend jquery Getjson use callback function to solve, about the principle and so on, and then slowly study, hehe continue to search http://blog.ossxp.com/2010/02/462/This article very good to me very much help, directly in their own project or in accordance with gourd painting scoop. Problem Solving!

HTML page jquery code
Copy the Code code as follows:
$.getjson ("http://www.789.com/project/ajax.php?Action=head&callback=?",
function (data) {//Parameter 1 passed in the back table;
var html = decodeURI (DATA.STR)
$ (' #head '). HTML (HTML); Call the div used to display the content
});
Server-side PHP code
Copy the Code code as follows:
$str = "<ul>
This is test
</ul> ";
$arr [' str '] = $STR;
$json = Json_encode ($arr); Using the Json_encode function to manipulate an array of PHP
Echo $_get[' callback ']. " (". $json.") ";
To this through the three-level domain name urlrewrite to the static page cross-domain Access server dynamic class capacity problem solved successfully!

Cross-domain Request for Juery 2

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.