Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.