How to use the AJAX tool function in jQuery
This article is a detailed introduction to "how to use the AJAX tool function in jQuery". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "how to use the AJAX tool function in jQuery" can help you solve your doubts. The following is a small series of ideas to slowly deepen and learn new knowledge together.
AJAX tool functions
Why you need AJAX tool functions:
Before each decision request, if the request method, or parameters or url are different, then the code cannot be reused, so we urgently need a generic function, so that users can achieve the requirements by calling the same function when using asynchronous objects. In short: In order to improve our development efficiency, we package XMLHttpRequest into a function.
Key points:
Find common ground for operations Find different parts--parameters
Different parts:
Request method: type Request url:url Request parameters are different: data Data conversion method--Return data format: dataType Data processing method is different: success: This is a callback function
Function encapsulation form:
var?$?=? {
ajax:function（option）{
//? Implement specific business processes
}
}
Code implementation:
var?$?=? {
//incoming object
ajax:function（option）{
//? Implement specific business processes
var? xhr?=? new? XMLHttpRequest（）
//? receive parameters
var? type=? option.type?||? 'get'
//? location.pathname: full path to current page
var? url?=? option.url?||? location.pathname
var? data?=? option.data?||? ''
var? dataType?=? option.dataType?||? 'text/html'
var? success?=? option.success
//? send a request
//? Set the request line: get If there are parameters, you need to splice them after the url, post does not need to splice
if（type?==? 'get'）{
url?=? url?+? "? "?+? data
data?=? null
}
xhr.open（type,url）
//? Set request header: get mode does not need to set request header, post mode needs to set Content-Type
if（type?==? 'post'）{
xhr.setRequestHeader（'Content-Type','application/x-'）
}
//? Set request body: if there are parameters, post mode passes parameters in request body
xhr.send（data）
//? receiving a response
xhr.onload?=? function（）{
//? invoke the callback
success?&&? success（this.response）
}
}
}
From the above encapsulated function, it can be seen that each time the client sends a judgment request: different ways of request, different parameters, different urls, as long as the above function is passed in the required parameters, the result can be obtained, and the code is reused to make the code more concise. Increased development efficiency.
Read here, this article "jQuery AJAX tool function how to use" article has been introduced, want to master the knowledge of this article also need to practice to understand, if you want to know more about the content of the article, welcome to pay attention to the industry information channel.
