Details on the encapsulation and principles of js native Ajax and jsajax

Details on the encapsulation and principles of js native Ajax and jsajax

Principles and concepts

AJAX is "Asynchronous Javascript And XML" (Asynchronous Javascript And XML). It is a technology used to create fast dynamic web pages.

Dynamic Web page: A web page that allows you to modify data at any time using the server language in combination with the database.

Static web pages, with the generation of html code, the page content and display effect will basically not change-unless you modify the Page code.

AJAX = Asynchronous Javascript and XML (subset of standard General Markup Language ).

AJAX is the art of exchanging data with the server and updating some webpages without reloading the entire page.

Ajax advantages

AJAX uses asynchronous data transmission (HTTP request) between the browser and the Web server, so that the webpage can request a small amount of information from the server, rather than the whole page.

AJAX can make Internet applications smaller, faster, and more friendly.

AJAX is a browser technology independent of Web server software.

AJAX is based on the following Web standards:

The Web standards used by JavascriptXMLHTMLCSS in AJAX have been well defined and supported by all mainstream browsers. AJAX applications are independent of browsers and platforms.

Web applications have many advantages over desktop applications. They can involve a wide range of users, which are easier to install, maintain, and develop.

However, Internet applications are not as comprehensive and user-friendly as traditional desktop applications.

Through AJAX, Internet applications can be improved and more friendly.

Asynchronous Ajax

Asynchronous:Compared with synchronization, the timer we have learned is asynchronous, that is, other programs do not need to wait until all the timer code is executed. Because the timer may execute code in an infinite loop, if you wait for the timer to complete the execution, other code will never run. Therefore, asynchronous programming is independent from other code. That is, the ajax mentioned above is independent from the browser platform.

Tip:Events are also executed asynchronously, and the code is executed only when something happens.
Synchronization: Most of the code we wrote except the timer and event are executed simultaneously. That is, the code block is executed from top to bottom.

How Ajax works

Ajax core object XMLHttpRequest
Var _ hr = new window. XMLHttpRequest ();
The instantiated object is sent to the server.
Send a request and wait for the server to respond
After the server response is complete, the client reprocesses it.
The response data of the server.
The Ajax request server has five statuses.
0: Before the server is requested
1: indicates the corresponding open method for opening the remote server Link
2: indicates the send Method for sending data to the server
3: The server response process is not over.
4: The server response is complete.

/*** Create an XMLHttpRequest object * @ param _ method Request method: post | get * @ param _ url remote server address * @ param _ async asynchronous? * @ param _ parameter: send data to the server * @ param _ callBack function */function parameterDeal (_ parameter) {var _ sender = ""; if (_ parameter instanceof Object) {for (var k in _ parameter) {_ sender + = k + "=" + _ parameter [k] + "&";} return _ sender. replace (/\ & $/g, "") ;}else {return _ parameter ;}} function createXMLHttpRequest () {t Ry {return new window. XMLHttpRequest ();} catch (e) {try {return new ActiveXObject ("MSXML2.XMLHTTP. 6.0 ");} catch (e) {try {return new ActiveXObject (" MSXML2.XMLHTTP. 3.0 ");} catch (e) {try {return new ActiveXObject (" MSXML2.XMLHTTP ");} catch (e) {try {return new ActiveXObject (" Microsoft. XMLHTTP ");} catch (e) {throw new Error (" This browser version is too low and has been eliminated by most markets. Please upgrade it !!! "); Return ;}}}} function ajaxRequest (_ method, _ url, _ async, _ parameter, _ callBack) {var _ ajax = createXMLHttpRequest (); if (_ ajax) {_ ajax. onreadystatechange = function () {if (_ ajax. readyState = 4 & _ ajax. status = 200) {_ callBack (_ ajax. responseText) ;}}_ ajax. open (_ method, _ url, _ async); _ ajax. setRequestHeader ("content-type", "application/x-www-form-urlencoded; charset = UTF-8"); _ ajax. send (parameterDeal (_ parameter ));}}

This is a encapsulated native Ajax. In the process of use, you only need to create a new js file and put the code in it. Do not change anything. After the HTML page is introduced, call the ajaxRequest () function and pass in the parameters you want to use.

This method is purely a personal package. If you have a simpler method, please share it with me!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.