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

This article will explain in detail how to use JavaScript to define your own ajax function. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Since the network requests initiated by native js are submitted to the server in the form of query string, it will be more convenient for users to submit parameters in the form of objects, so it is necessary to process the parameter objects passed by users, define resolveData functions, set formal parameter receiving parameters, traverse the objects inside, and splice keys and values in the way of =. Then add the resulting value to the empty array Finally, each item of the array is divided with the & symbol and returns Define the itheima function, set the parameter to receive the configuration object parameters passed by the user, create the xhr object, pass the passed parameters to the function that handles the parameters, and give the returned value to a variable. Because it is a different request, it is necessary to judge, first of all, the GET request to determine whether the method in the parameters is all equal to GET, because the passed parameters may be lowercase. So convert it to uppercase through the toUpperCase method. If the condition is true, call the open method, fill in the corresponding value, and call the send function. The same goes for POST, except that submitting data has too many parameters and the POST request requires the "Content-Type" header to specify the MIME type of the request subject. Finally, you can call the listening event.

Function resolveData (data) {var arr = []; for (var k in data) {var str = k + "=" + data [k]; arr.push (str)} return arr.join ("&")} function itheima (options) {var xhr = new XMLHttpRequest (); var qs = resolveData (options.data) If (options.method.toUpperCase () = = "GET") {xhr.open (options.method, options.url + "?" + qs); xhr.send () } else if (options.method.toUpperCase () = = "POST") {xhr.open (options.method, options.url) xhr.setRequestHeader ("Content-Type") "application/x-www-form-urlencoded") xhr.send (qs)} xhr.onreadystatechange = function () {if (xhr.readyState = 4 & & xhr.status = 200) {var result = JSON.parse (xhr.responseText) options.success (result) }}}

Finally, test whether it can be successful.

Test interface itheima ({method: "GET", url: "http://www.liulongbin.top:3006/api/getbooks", data: {id:1}, success:function (res) {console.log (res);}})

This is the end of this article on "how to use JavaScript to define your own ajax function". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.