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

What are the learning points of Ajax? in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Ajax: Asynchronous JavaScript and Xml, asynchronous js scripts and xml are often used to implement asynchronous refresh of partial pages, which is of great help to improve the user experience. Xml has more advantages in multiple languages, but Ajax technology actually uses Json objects rather than Xml to process data.

History of Ajax

Ajax belongs to Web front-end development technology and has a very close relationship with javascript. Ajax is a technology to realize asynchronous communication without refresh, and this technology can be implemented in many ways. NetScape, the originator of the browser, first invented LiveScript scripting language, which is used to enrich the expression of web page elements and make web pages show dynamic effects. Subsequent revisions and upgrades led to the birth of the JavaScript language. At the same time, Microsoft also saw the prospect of the Internet and began to set foot in the Internet industry, launching the JScript language. Unfortunately, it is not as mature as JavaScript and its development is slow. In the end, Microsoft's determination to the Internet contributed to MS's long and tortuous acquisition of NS.

It is mentioned here that dynamic HTML language (Dynamic Hyper Text Markup Language) places javascript in the element node of the Dom tree to provide dynamic display behavior for elements.

Ajax code thinking

Create a request object

Configure the request object and send it to the server

Server reply request object

(1) create a request object as an object to communicate with the server:

Function createRequest () {try {var request=new XMLHttpRequest ();} catch (tryMS) {try {request=new ActiveXObject ("Msxml2.XMLHTTP");} catch (otherMS) {try {request=new ActiveXObject ("Microsoft.XMLHTTP");} catch (failed) {request=null;}} return request;}

Note: ActiveXObject is a Microsoft-specific programming object, and there are two different versions supported by different browsers. XMLHTTP is a set of API that can transmit or receive XML and other data through http protocol in scripting languages such as Javascript.

When you get the request object request, it has these properties:

The commonly used one is onreadystatechange,readyState,responseText,status.

(2) configure the request object and send it to the server:

Var request=createRequest (); request.open ("GET", url,true); request.onreadystatechange=showResponse;request.send (null)

The open,send methods all come from the prototype XMLHttpRequest of the request object. Open _ _ proto__:XMLHttpRequest and you can see:

The open () method has three parameters, the first is the method used to send the request (GET or POST, the difference will be summarized later), the second is to specify the url of the server-side script (this file can be any type of file), and the third parameter specifies whether to process asynchronously (default true async)

The send () method sends the request to the server.

I noticed here that the response content of the console output is different depending on the location of the request.onreadystatechange=showResponse; code. Come to think of it, the output must be different when the callback function joins the task queue, such as the current position.

Request.onreadystatechange=showResponse; after open, before send, when the code parses to request.onreadystatechange=showResponse;, the readyStates=1 (the request has been connected with the server has been established). After that, when readyStates changes from 1 to 2, the callback function showResponse joins the task queue waiting to be executed, the readyState changes from 2 to 3, the callback function showResponse joins the task queue for the second time, readyState changes from 3 to 4, and the callback function joins the queue again. So it is guessed that when the main code is executed, the console will output "request sent, server received, after send", "request in progress", "request completed"; indeed:

(3) if the server responds to the request object, js can process the response content:

Function showResponse () {if (request.readyState==0) {console.log ('request not initialized, before calling open');} else if (request.readyState==1) {console.log ('request made, server connection established, before send after open');} else if (request.readyState==2) {console.log ('request sent, server received, after send');} else if (request.readyState==3) {console.log ('request in progress') } else if (request.readyState==4) {console.log ('request completed'); if (request.status==200) {/ / process request.responseText;}

The above code is just to track readyState changes, and the actual project code doesn't cost so much. Here is the actual main code:

Function showResponse () {if (request.readyState==4) {if (request.status==200) {/ / processing request.responseText;}

What problem does ps:Ajax solve?

As we all know, when the client requests a page from the server, the server first dynamically calculates and generates the page, and then sends it to the client. The client browser compiles and renders the page sequentially.

In the absence of Ajax: if the page has a user authentication control, when the client browser renders the user authentication control, it will wait for the verification result from the server, and then continue to render the page elements after receiving the result. This verification process usually requires operations such as reading the database, which is the so-called synchronization method. And in this way, it will cause the fake death state of the web page.

After using Ajax: the same validation control, after the client submits the validation request, it continues to render other elements sequentially. When the verification result is obtained, javascript modifies the DOM object in memory on the client side and presents it to the user (note: only the DOM object in memory is modified here, but the page file received by the client has not been modified). In this way, using the asynchronous method, there will be no suspended animation, and the client will save time when waiting for the server to return the result.

The answers to the questions about Ajax learning points are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.