ajax

1.1 What is ajax:

Ajax, or "Asynchronous Javascript And XML", refers to a web development technology for creating interactive web applications.Ajax = Asynchronous JavaScript and XML (a subset of Standard Generalized Markup Language). Ajax = Asynchronous JavaScript and XML (a subset of Standard Generalized Markup Language). By exchanging a small amount of data with the server in the background, Ajax enables asynchronous updating of web pages.This means that it is possible to update a part of a web page without reloading the entire page (no-refresh technology). Traditional web pages (which do not use Ajax) must reload the entire web page if they need to update content.

1.2 Ajax application scenarios：

1.2.1 Check whether the user name has been registered:

Many sites have a registration page with a user name is automatically detected whether the existence of friendly tips, the function of the overall page is not refreshed, but can still asynchronous data exchange with the server to query the user input user name exists in the database.

1.2.2 Provincial and municipal linkage drop-down box linkage:

Many sites exist to enter the user's address of the operation, in the completion of the address input, the user's province is the drop-down box, when selecting a different province will appear in different urban areas to choose, this is the most common provincial and municipal linkage effect.

1.2.3 Contentauto-complete：

Whether it is Baidu, which focuses on search, or Taobao, which searches for products within a site, there is a search function. When you enter a query keyword into the iSearch box, the entire page is not refreshed, but it will display relevant query fields based on the keyword, and this process is asynchronous.

Baidu's search complement function:

Taobao's search complement function:

1.3 Difference between synchronous and asynchronous methods：

Synchronous way to send a request: send a request, need to wait for the response to return, and then can send the next request, if the request does not respond, can not send the next request, the client will always be in the waiting process.

Asynchronous way to send a request: send a request, do not need to wait for the response to return, at any time you can send the next request, that is, do not need to wait.

1.4 Principle analysis of Ajax：

The AJAX engine sends asynchronous requests without refreshing the browser's address bar：

Using JavaScript to get the browser's built-in AJAX engine (XMLHttpRequest object)

Determining the request path and request parameters using js

The AJAX engine object sends the request based on the request path and request parameters.

The server receives the request from the Ajax engine for processing：

Server gets request parameter data

Server handles the request business (calling business layer code)

The server responds with data to the Ajax engine

The Ajax engine obtains the data from the server response and updates it to a specific location on the browser page by executing a JavaScript callback function.：

Get the server response data by setting a callback function to the Ajax engine.

Use JavaScript to locally modify the data on the page by displaying the response data at a specified location for the purpose of a local refresh.

2.1 js native Ajax：

Steps for js native Ajax development:

establishAjaxengine object

because ofAjaxEngine object binding listener (listens that the server has responded with data to the engine)

Binding submission address

Send Request

The response data is processed inside the listener




<!DOCTYPE html>



<html lang="en">



<head>



    <meta charset="UTF-8">




    <title>Title</title>




    <style type="text/css"></style>




    <script type="text/javascript" src="js/jquery-3.3."></script>




    <script type="text/javascript">




        //Synchronize requests for click events




        function sendRequest() {



            //js brush address bar request server side




            location.href = "Ajax1Servlet?name=admin&password=123abc";



        }



        



        // Asynchronous request for click events




        function sendAsynRequest() {



            //1. Create ajax engine object




            var xmlHttp = new XMLHttpRequest();



            //2. Setting up callback functions for the purpose of processing data returned completely by the server




            xmlHttp.onreadystatechange = function () {



                /**




                 * This callback function what to call it? It is called when the status code of the ajax engine object communicating with the server changes.



                 * ajax engine object communication status code with the server, range 0~4



                 * :: 0: request not initialized



                 * :: 1: Server connection established



                 * :: 2: Request received



                 * :: 3: Requests are being processed



                 * :: 4: Request completed and response ready



                 * This callback function is called a total of 4 times, but only the status code 4 represents the server response to complete data completion.



                 * :: Communication transmutation code 4 for ajax engine and 200 for http.



                 */



                if(xmlHttp.readyState==4 && xmlHttp.status==200){



                    // Get response data




                    var content = xmlHttp.responseText;



                    alert(content);



                }



            }



            //3. Setting the request path and request parameters




            /**




             * (method,url)



             * :: method, request method, get or post request



             * :: url: request path



             */



            xmlHttp.open("get","Ajax1Servlet?name=admin&psw=abc123");



            //4. Send request




            xmlHttp.send();



        }



    </script>




</head>



<body>



<input type="button" value="Send synchronization request" onclick="sendRequest();"/>



<input type="button" value="Send asynchronous request" onclick="sendAsynRequest();"/>



</body>



</html>





package ;



 




import ;




import ;




import ;




import ;




import ;




import ;



 



@WebServlet(name = "Ajax1Servlet", urlPatterns = "/Ajax1Servlet")




public class Ajax1Servlet extends HttpServlet {



    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {



        doGet(request, response);



    }



 



    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {



        // Get request parameters




        String name = ("name");



        String password = ("password");



        // Print out




        ("name="+name);



        ("password="+password);



        //Output data front-end




        ().write("hello js ajax");



    }



}

2.2 Ajax engine connection state readyState value 0~4 change process：

Holds the state of the XMLHttpRequest. It changes from 0 to 4.

0: Request not initialized

1: Server connection established

2: Request received

3: Requests being processed

4: The request is complete and the response is ready

A status value of 4 here only indicates that a response was received from the server Server ProcessingajaxThe request is over, but it does not mean that the response from the server was obtained correctly.Need to work with http status code 200Two conditions will indicate that the correct server response was obtained. Only if these two conditions are met can the correct response data be fetched.




 = function(){



			if( == 4){



				if( == 200){



alert("Response data" + );



				}



			}



		};

ajax

For more information, search or swipe the code to follow the public number: number to say Cloud