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

This article mainly explains "how to create a basic Ajax application". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to create a basic Ajax application".

It doesn't take much code to create a basic Ajax application, about three steps and dozens of lines of code.

1. Create XMLHttpRequest, the core object of Ajax

Because of the incompatibility between browsers, previous versions of IE7 did not have native XMLHttpRequest objects but were implemented as ActiveX objects.

There are many ways to create the Internet and various books, some of which are complex and many lines of code, while others are concise and have very little code. Of course, there are more complex situations to consider. Almost everything in IE is taken into account below.

Function cretaeXHR () {try {return new XMLHttpRequest ();} catch (e) {} try {return new ActiveXObject ('Msxml2.XMLHTTP.6.0');} catch (e) {} try {return new ActiveXObject (' Msxml2.XMLHTTP.4.0');} catch (e) {} try {return new ActiveXObject ('Msxml2.XMLHTTP.3.0');} catch (e) {} try (' Msxml2.XMLHTTP');} catch (e) {} try {return new ActiveXObject ('MSXML3.XMLHTTP') } catch (e) {} try {return new ActiveXObject ('MSXML.XMLHTTP');} catch (e) {} try {return new ActiveXObject (' Microsoft.XMLHTTP');} catch (e) {} try {return new ActiveXObject ('MSXML2.ServerXMLHTTP');} catch (e) {} return null;}

Less code uses object characteristics to judge

Var xhr = window.XMLHttpRequest? New XMLHttpRequest (): new ActiveXObject ('Microsoft.XMLHTTP')

I will take a simplified approach here and will not consider the situation of creating exceptions for the time being.

2, send the request

Xhr.open xhr.send

3, handle the response

Xhr.onreadystatechange = function () {if (xhr.readyState = = 4) {if (xhr.status = = 200) {/ / of course you can think of everything between 2000,300 or 304as response success / / callback}

Well, it's nothing special here. There are a few steps in all the books. For beginners, it is difficult to encapsulate these steps to form a good module. Global variables fly all over the sky and don't know how to organize code, as beginners do at first. Now that I think about it, I don't know enough about a language, especially closures.

Here, the singleton pattern is encapsulated into an object, that is, only one global variable assigns it to Ajax, and the object has a request method. Request has two parameters, * is the requested url (required), string type, and the second opt is the configuration parameter (optional), object type. The result processing uses the internal private _ onStateChange function.

The complete code is as follows:

/ * execute basic ajax request and return XMLHttpRequest * Ajax.request (url, whether {* async is asynchronous true (default) * method request method POST or GET (default) * data request parameter (key value pair string) * response function after successful success request, parameter is xhr * failure request failed response function, parameter is xhr *}) * / Ajax = function () {function request (url,opt) {function fn () {} var async = opt.async! = = false, method = opt.method | | 'GET', data = opt.data | | null, success = opt.success | | fn, failure = opt.failure | | fn; method = method.toUpperCase (); if (method = =' GET' & & data) {url + = (url.indexOf ('?) =-1?':'&') + data Data = null;} var xhr = window.XMLHttpRequest? New XMLHttpRequest (): new ActiveXObject ('Microsoft.XMLHTTP'); xhr.onreadystatechange = function () {_ onStateChange (xhr,success,failure);}; xhr.open (method,url,async); if (method = =' POST') {xhr.setRequestHeader ('Content-type',' application/x-www-form-urlencoded;');} xhr.send (data); return xhr } function _ onStateChange (xhr,success,failure) {if (xhr.readyState = = 4) {var s = xhr.status; if (s > = 200 & & s < 300) {success (xhr);} else {failure (xhr);}} else {} return {request:request};} ()

Send the parameter name=jack,age=20 to a servlet at the backend of the request below. Asynchronous and GET methods are used by default.

Ajax.request ('servlet/ServletJSON', {data:' name=jack&age=20', success: function (xhr) {/ / to do with xhr}, failure: function (xhr) {/ / to do with xhr}}) Thank you for reading, the above is the content of "how to create basic Ajax applications". After the study of this article, I believe you have a deeper understanding of how to create basic Ajax applications, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.