1: GET access to the browser is considered to be idempotent
Is that there is only one result for the same URL [the same means that the entire URL string exactly matches]
So during the second visit, if the URL string does not change, the browser directly takes out the result of the first visit
POST is considered to be a variable access (the browser believes that the submission of POST must be changed)
To prevent idempotent access of GET, just add after the URL? + new Date (); [In short, the URL string of each visit is different]
When designing web pages, you should also follow this principle
2: One. Talk about the difference between Get and Post of Ajax
Get method:
Simple data can be transmitted by the get method, but the size is generally limited to 1KB. The data is appended to the url and sent (http header transmission), that is, the browser appends each form field element and its data according to the URL parameter format Behind the resource path in the request line. Another important point is that it will be cached by the client's browser, so that others can read the customer's data, such as account number and password, from the browser's history. Therefore, in some cases, the get method will bring serious security problems.
Post method:
When using the POST method, the browser sends each form field element and its data to the Web server as the actual content of the HTTP message instead of passing it as a parameter of the URL address. The amount of data transferred using the POST method is more than that using the GET method The amount of data is much larger.
In short, the GET method transmits a small amount of data, has high processing efficiency, and low security, and will be cached, while POST has the opposite.
Pay attention to using the get method:
1 For get requests (or where URL-passing parameters are involved), the passed parameters must first be processed by the encodeURIComponent method. Example: var url = "update.php? Username =" + encodeURIComponent (username) + "& content =" + encodeURIComponent
(content) + "& id = 1";
Note the use of Post:
1. Set the Context-Type of the header to application / x-www-form-urlencode to ensure that the server knows that there are parameter variables in the entity. Usually use SetRequestHeader ("Context-Type", "application / x-www- form-urlencoded of XmlHttpRequest object ; "). example:
xmlHttp.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded");
2. The parameters are key / value pairs corresponding to names / values, and each pair of values is separated by an ampersand. For example, var name = abc & sex = man & age = 18.
abc & sex = man & age = 18 and var name =? abc & sex = man & age = 18 are all wrong;
3. The parameter is sent in the Send (parameter) method, for example: xmlHttp.send (name); If it is the get method, directly xmlHttp.send (null);
4. The server-side request parameters distinguish between Get and Post. If it is get method, then $ username = $ _GET ["username"]; If it is post method, then $ username = $ _POST ["username"];
AJAX garbled problem
Causes of garbled characters:
1. The default character encoding of the data returned by xtmlhttp is utf-8. If the client page is gb2312 or other encoded data, garbled characters will be generated
2. The default character encoding of data submitted by post method is utf-8. If the server side is gb2312 or other encoded data, garbled characters will be generated.
The solutions are:
1. If the client is gb2312 encoded, specify the output stream encoding on the server
2. Both server and client use UTF-8 encoding
gb2312: header ('Content-Type: text / html; charset = GB2312');
utf8: header ('Content-Type: text / html; charset = utf-8');
Note: If you have already done the above method, or return garbled characters, check whether your method is get. For get requests (or where URL passing parameters are involved), the passed parameters must be processed by the encodeURIComponent method If it is not processed with encodeURIComponent, it will also generate garbled characters.
Copy the code code as follows:
$ .ajax does not cache version:
$ .ajax ({
type: "GET"
url: 'test.html',
cache: false,
dataType: "html",
success: function (msg) {
alert (msg);
}
});
jQuery.ajax (options): load remote data via HTTP request
This is the underlying AJAX implementation of jQuery. For simple and easy-to-use high-level implementation, see $ .get, $ .post, etc.
$ .ajax () returns the XMLHttpRequest object it created. In most cases, you do not need to directly manipulate the object, but in special cases it can be used to manually terminate the request.
Note: If you specify the dataType option, please make sure that the server returns the correct MIME information (eg xml returns "text / xml"). The wrong MIME type may cause unpredictable errors. See Specifying the Data Type for AJAX Requests.
When the datatype type is set to 'script', all remote (not in the same domain) POST requests are converted back to GET mode.
$ .ajax () has only one parameter: the parameter key / value object, which contains information about each configuration and callback function. See below for detailed parameter options.
In jQuery 1.2, you can load JSON data across domains, and you need to set the data type to JSONP when using it. When calling a function in JSONP format, such as "myurl? Callback =?" JQuery will automatically replace? With the correct function name to execute the callback function. When the data type is set to "jsonp", jQuery will automatically call the callback function. (I do n’t quite understand this)
parameter list:
Name Type Description
url String (default: current page address) The address to send the request.
type String (default: "GET") Request method ("POST" or "GET"), the default is "GET". Note: Other HTTP request methods such as PUT and DELETE can also be used, but only supported by some browsers.
timeout Number Set the request timeout time (milliseconds). This setting will override the global setting.
async Boolean (default: true) By default, all requests are asynchronous. If you need to send a synchronization request, set this option to false. Note that the synchronization request will lock the browser, and other user operations must wait for the request to complete before it can be executed.
beforeSend Function A function that can modify the XMLHttpRequest object before sending a request, such as adding a custom HTTP header. The XMLHttpRequest object is the only parameter.
function (XMLHttpRequest) {
this; // the options for this ajax request
}
cache Boolean (default: true) jQuery 1.2 new feature, set to false will not load the requested information from the browser cache.
complete Function The callback function after the request is completed (called when the request succeeds or fails). Parameters: XMLHttpRequest object, success message string.
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}
contentType String (default: "application / x-www-form-urlencoded") The content encoding type when sending information to the server. The default value is suitable for most applications.
data Object,
String The data sent to the server. Will be automatically converted to the request string format. The GET request will be appended to the URL. See the description of the processData option to disable this automatic conversion. Must be in Key / Value format. If it is an array, jQuery will automatically correspond to the same name for different values. For example, {foo: ["bar1", "bar2"]} is converted to '& foo = bar1 & foo = bar2'.
dataType String The type of data expected from the server. If not specified, jQuery will automatically return responseXML or responseText based on the HTTP packet MIME information and pass it as a callback function parameter. Available values:
"xml": Returns an XML document, which can be processed with jQuery.
"html": Returns plain text HTML information; contains script elements.
"script": Returns plain text JavaScript code. The results are not automatically cached.
"json": Return JSON data.
"jsonp": JSONP format. When calling a function in JSONP format, such as "myurl? Callback =?" JQuery will automatically replace? With the correct function name to execute the callback function.
error Function (default: automatic judgment (xml or html)) This method will be called when the request fails. This method has three parameters: XMLHttpRequest object, error message, and (possibly) captured error object.
function (XMLHttpRequest, textStatus, errorThrown) {
// Normally only one of textStatus and errorThown has value
this; // the options for this ajax request
}
global Boolean (default: true) Whether to trigger global AJAX events. Set to false will not trigger global AJAX events, such as ajaxStart or ajaxStop. Can be used to control different Ajax events
ifModified Boolean (default: false) Only obtain new data when the server data changes. Use the HTTP packet Last-Modified header information to judge.
processData Boolean (default: true) By default, the data sent will be converted to an object (technically not a string) to match the default content type "application / x-www-form-urlencoded". If you want to send DOM tree information or other information that you do not want to convert, please set to false.
success Function Callback function after successful request. This method has two parameters: the server returns data and the status
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc ...
this; // the options for this ajax request
}
There are several Ajax event parameters: beforeSend, success, complete, error. We can define these events to handle each of our Ajax requests well. Note that this in these Ajax events refers to the option information requested by the Ajax (please refer to the picture of this in the get () method).
Please read the parameter list above carefully. If you want to use jQuery for Ajax development, then you must be familiar with these parameters.
Sample code to get the title of the article on the homepage of the blog:
Copy the code code as follows:
$ .ajax ({
type: "get",
url: "http://www.cnblogs.com/rss",
beforeSend: function (XMLHttpRequest) {
// ShowLoading ();
},
success: function (data, textStatus) {
$ (". ajax.ajaxResult"). html ("");
$ ("item", data) .each (function (i, domEle) {
$ (". ajax.ajaxResult"). append ("<li>" + $ (domEle) .children ("title"). text () + "</ li>");
});
},
complete: function (XMLHttpRequest, textStatus) {
// HideLoading ();
},
error: function () {
// Request error handling
}
});
jQuery.ajaxSetup (options): Set global AJAX default options.
Set the default address of the AJAX request to "/ xmlhttp /", prohibit triggering of global AJAX events, and use POST instead of the default GET method. Subsequent AJAX requests no longer set any option parameters.
jQuery code:
Copy the code code as follows:
$ .ajaxSetup ({
url: "/ xmlhttp /",
global: false,
type: "POST"
});
$ .ajax ({data: myData});
serialize () and serializeArray ()
serialize (): The contents of the sequence table are strings.
serializeArray (): Serialize table elements (similar to the '.serialize ()' method) to return JSON data structure data.
Examples:
HTML code:
Copy the code code as follows:
<p id = "results"> <b> Results: </ b> </ p>
<form>
<select name = "single">
<option> Single </ option>
<option> Single2 </ option>
</ select>
<select name = "multiple" multiple = "multiple">
<option selected = "selected"> Multiple </ option>
<option> Multiple2 </ option>
<option selected = "selected"> Multiple3 </ option>
</ select> <br/>
<input type = "checkbox" name = "check" value = "check1" /> check1
<input type = "checkbox" name = "check" value = "check2"
checked = "checked" /> check2
<input type = "radio" name = "radio" value = "radio1"
checked = "checked" /> radio1
<input type = "radio" name = "radio" value = "radio2" /> radio2
</ form>
