Article Directory
一 、 Ajax
- AJAX is a technology for exchanging data with the server. It realizes the update of some web pages without reloading all pages.
- AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML)
- Without jQuery, AJAX programming is still a bit difficult. Writing conventional AJAX code is not easy, because different browsers implement AJAX differently. This means you have to write additional code to test the browser. However, the jQuery team solved this problem for us, we only need a simple line of code to achieve AJAX functionality
- Only introduce the commonly used Ajax methods: load, ajax, get, post
More please refer to: rookie tutorial-there is always what you want
Two, load
Load data from the server and put the returned data into the selected element.
$(selector).load(URL,data,callback);
URL: required, specify the URL you want to load
data: optional, specify the set of query string key/value pairs sent with the request
callback: optional, callback function.
Optional parameters of callback:
- responseTxt-contains the result content when the call is successful
- statusTXT-contains the status of the call
- xhr-contains the XMLHttpRequest object
$("#div1").load("demo_test.txt");
// 把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt #p1");
// 在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
tips: In order to avoid code duplication in multi-page situations, you can use the load() method to put the repeated parts (such as the navigation bar) into a separate file
Three, ajax (parameter), get, set
$.ajax
All jQuery AJAX methods use the ajax() method. This method is usually used for requests that cannot be fulfilled by other methods. That is to say, other derived get, post, load, getJSON, etc. can be implemented by the ajax() method through parameters.
Ajax() common parameters (framework):
$.ajax(
type:"POST", // GET,POST
url:"/index.html", // 路由
async:true, // 异步吗？默认是true，尽量少用同步
data：{
// 规定要发送到服务器的数据
id:"1",
name:"Jack,Rose",
kinds:"Lover"
},
// 成功回调函数
success:function(data,status){
Console.log("请求成功！"); // 控制台输出
Console.log("data:");
Console.log(data);
Console.log("status:");
Console.log(status);
}
);
All parameters of the ajax method:
| ajax parameters | Value/description |
|---|---|
| async | Boolean value, indicating whether the request is processed asynchronously, the default is true. |
| beforeSend(xhr) | The function to run before sending the request. |
| cache | Boolean value indicating whether the browser caches the requested page. The default is true. |
| complete(xhr,status) | The function to run when the request is completed (called after the request succeeds or fails, that is, after the success and error functions). |
| contentType | The type of content used when sending data to the server. The default is: "application/x-www-form-urlencoded". |
| context | Specify the "this" value for all AJAX related callback functions. |
| data | Specifies the data to be sent to the server. |
| dataFilter(data,type) | A function used to process the original response data of XMLHttpRequest. |
| dataType | The expected data type of the server response. |
| error(xhr,status,error) | The function to run if the request fails. |
| global | Boolean value that specifies whether to trigger the global AJAX event handler for the request. The default is true. |
| ifModified | Boolean value that specifies whether the request is successful only when the response has changed since the last request. The default is false. |
| jsonp | Rewrite the string of the callback function in a jsonp. |
| jsonpCallback | Specify the name of the callback function in a jsonp. |
| password | Specifies the password used in the HTTP access authentication request. |
| processData | A Boolean value that specifies whether the data sent by the request is converted into a query string. The default is true. |
| scriptCharset | Specifies the requested character set. |
| success(result,status,xhr) | The function to run when the request is successful. |
| timeout | Set the local request timeout time (in milliseconds). |
| traditional | Boolean value that specifies whether to use the traditional style of parameter serialization. |
| type | Specifies the type of request (GET or POST). |
| url | Specifies the URL to send the request. The default is the current page. |
| username | Specifies the user name used in the HTTP access authentication request. |
| xhr | The function used to create an XMLHttpRequest object. |
Short form of get and post of $.ajax
- $.get —— request data from the specified resource
$.get(URL,callback);
URL: required, the address to be visited
callback: optional
callback parameters:- data-optional, the content of the requested page
- status —— Optional, the status of the request
- $.post —— Submit data to the server via HTTP POST request
$.post(URL,data,callback);
URL: required, access address
data: optional, specify the data sent with the request
callback: optional
callback parameters:- data-optional, the content of the requested page
- status —— Optional, the status of the request
$("button").click(function(){
$.post("www.baidu.com",
{
name:"post请求",
time:"2019/12/20"
},
// post请求成功后调用此函数
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
tips:
The difference between GET and POST methods:
1. The
amount of data sent In GET, only a limited amount of data can be sent because the data is sent in the URL.
In POST, a large amount of data can be sent because the data is sent in the body of the body.
2. Security
The data sent by the GET method is not protected because the data is disclosed in the URL column, which increases the risk of vulnerabilities and hacker attacks.
The data sent by the POST method is safe because the data is not exposed in the URL bar, and multiple encoding techniques can be used in it, which makes it flexible.
3.
The result of the GET query in bookmarking can be added to the bookmark because it exists in the form of URL; the result of the POST query cannot be added to the bookmark.
4. Encoding
When using the GET method in the form, only ASCII characters are accepted in the data type.
When the form is submitted, the POST method does not bind the form data type, and allows binary and ASCII characters.
5. The variable size
in the variable size GET method is about 2000 characters.
The POST method allows up to 8 Mb of variable size.
6. Cache
the data of the GET method can be cached, while the data of the POST method cannot be cached.
7. Main function
GET method is mainly used to obtain information. The POST method is mainly used to update data.