JQuery Ajax use of the experience of detailed collation and attention to _ajax related

Source: Internet
Author: User
Tags script tag time limit
IE7 and the following request method with Get, the URL limit is a very easy to ignore the problem (maximum 2,083 characters). So if the URL is likely to be too long, be sure to use post.
--------------------------------------------------------------------------------
Terminate Ajax Request
Terminating a request requires calling the Abort () method of the XMLHttpRequest object
In jquery, $.get,$.post, $.ajax, $.getjson, $.getscript ... The return values are XMLHttpRequest objects.
When abort () is invoked, the AJAX request stops immediately, but the success callback function is still executed
Therefore, in the success callback function, we need to first determine whether the Ajaxget or data exists, and then execute the callback function.
Copy Code code as follows:

var ajaxget = $.get (someurl,somedata,function (data) {
if (!data) return true;
Todo
});
Ajaxget.abort ();

When it comes to cross domain resource sharing (CORS cross-origin resoure sharing), it is becoming increasingly important. A variety of map APIs, microblogging APIs, and so on, the site developers do not have to Fangweising themselves, as long as according to other people open interface, you can get the data.
This benefits from a cross source strategy.

JSONP is a solution to a cross source strategy. The rationale is to use the browser to allow Cross-domain access to script resources (including pictures), generate script Tag on the server side and return to the client.

Note that the server side returns not a JSON-formatted string, but rather a callbackname+ "(" +json_string+ "), or JSONP.

This is equivalent to the server to a section of JS code (assigned function) back to the browser, and then immediately executed.
Therefore, in the URL sent by the browser (in the form of Get), the callback function name needs to be passed in.
Client:
Copy Code code as follows:

Function deal (data) {
Todo
}
var s= document.createelement ("script")
Don't necessarily call callback, but be sure to match the request.querystring on the server side.
S.SRC = "Http://172.20.2.60:8088/newwebsite/MyHandler.ashx?callback=func";
Document.body.appendChild (s)

Server-side (. Net)
Copy Code code as follows:

<%@ WebHandler language= "C #" class= "Test"%>
Using System;
Using System.Web;
public class Test:ihttphandler {
public void ProcessRequest (HttpContext context) {
Context. Response.Charset = "Utf-8";
Context. Response.ContentType = "Text/javascript";
String callback = Context. Request.querystring["Callback"];//callback function name
String json = "{' name ': ' Ray ', ' msg ': ' Hello world! '}"; String in/json format
string result = String. Format ("{0} ({1})", Callback, JSON);
Context. Response.Write (Result);
Context. Response.Flush ();
Context. Response.End ();
}
public bool IsReusable {
get {
return false;
}
}
}

In jquery, you don't need a callback function name in the URL, because jquery has done it for you, and this callback function is success.
Copy Code code as follows:

$.ajax ({
URL: "Http://172.20.2.60:8088/newwebsite/MyHandler.ashx"
, DataType: "Jsonp"
, Success:function (data) {
Todo
}
});

Jsonp is very powerful, but there are also two places where people have egg aches, first of all, safety issues.
In any case, you are from other people's territory to sell and sell data, and content or script! In other words, if someone is a bad person, give you some malicious code, it is difficult to do.

Of course, this problem does not usually happen. After all, I would like to request data from the place are familiar or official (what Google Maps API, Sina micro-blog API These obviously will not give you a hole).

Another problem is a matter of annoyance. It is not immediately known whether the browser-side request for JSONP fails. Even with Jquery,error, it doesn't work. Even if there is a mistake, Try,catch can't catch it.

So the only way to know for a while is to set a time limit, and if there is no data to return, then determine the error. Say not perfect is because, the speed of each family is different, so ... You know.
--------------------------------------------------------------------------------
ContentType related in jquery
The original jquery website
Copy Code code as follows:

ContentType
Default: ' application/x-www-form-urlencoded; Charset=utf-8 '
When sending data to the server, use this content type.
Default is "application/x-www-form-urlencoded; Charset=utf-8 ", which is fine for most cases.
If you explicitly a content-type to $.ajax (),
Then it ' ll always be sent to the server (even if no data is sent).
If No charset is specified, data would be transmitted to the server using the server ' s default charset;
You are must decode this appropriately on the server side.

With this text we can know that in jquery Ajax the contenttype default is ' application/x-www-form-urlencoded; Charset=utf-8 ' Of course this is the latest version of jquery. There is a slight change in comparison to previous versions.

If you want to serialize an object and then pass it to the background, you can set contenttype to ' Application/json '
Related Article

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.