Detailed sorting and precautions of jQuery Ajax experience

Time:2021-10-19

If get is used for IE7 and the following requests, the restriction of URL is easy to ignore (maximum 2083 characters). So if the URL may be too long, be sure to use post.
——————————————————————————–
Terminate Ajax request
To terminate the request, you need to call the abort () method of the XMLHttpRequest object
The return values of $. Get, $. Post, $. Ajax, $. Getjson, $. Getscript… In jQuery are XMLHttpRequest objects
After abort () is called, the Ajax request stops immediately, but the callback function of success is still executed
Therefore, in the callback function of success, you need to judge whether ajaxget or data exists before executing the callback function

Copy codeThe code is 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 resource sharing), it is becoming more and more important. Various map APIs, microblog APIs, etc. website developers do not have to put satellites by themselves. They can obtain these data according to the open interfaces of others.
This benefits from a cross source strategy.

Jsonp is a scheme of cross source strategy. The basic principle is to make use of the browser’s feature that allows cross domain access to script resources (including pictures), generate script tags on the server and return them to the client.

It should be noted that the returned string on the server side is not a string in JSON format, but a callback name + “(” + json_string + “)” that is, jsonp.

This is equivalent to the server returning a piece of JS code (the assigned function) to the browser and executing it immediately.
Therefore, in the URL sent by the browser (in the form of get), you need to pass in the callback function name.
client:

Copy codeThe code is as follows:
function deal(data){
//TODO
}
var s= document.createElement(“script”)
//It doesn’t have to be called callback, but it must match the server-side request.querystring
s.src = “http://172.20.2.60:8088/newwebsite/MyHandler.ashx?callback=func”;
document.body.appendChild(s)

Server side (. Net)

Copy codeThe code is 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;
}
}
}

If you use jQuery, you don’t need to add the callback function name in the URL, because jQuery has done it for you, and the callback function is success.

Copy codeThe code is 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 two painful places. The first is security.
In any case, you are pouring data from other people’s territory, and the content is still a script! In other words, if someone is a bad person and gives you some malicious code, it will be difficult to do.

Of course, this problem generally does not happen. After all, the places where I want to request data are familiar to me or official (what Google Maps API and Sina Weibo API obviously won’t give you a pit).

Another problem is disturbing. Whether the browser side request for jsonp fails or not is not directly known. Even with jQuery, error doesn’t work. Even if there is an error, try, catch can’t catch it.

Therefore, there is only one imperfect method known for the time being, that is, to set a time limit. If no data is returned after the time limit, it will be determined as error. It’s not perfect because the network speeds are different, so… You know.
——————————————————————————–
Related to contenttype in jquery
Original text of jQuery official website

Copy codeThe code is 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 pass in 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 will be transmitted to the server using the server’s default charset;
you must decode this appropriately on the server side.

From this passage, we can know that in jQuery Ajax, contenttype is’ application / x-www-form-urlencoded ‘by default; Charset = UTF-8 ‘of course, this is the latest version of jQuery. It is slightly different from the previous version.

If you want to serialize an object and send it to the background, you can set contenttype to ‘application / JSON’

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]