The front and back ends are separated. You must know Ajax

1. ajax overview

If the traditional web page needs to update the content, it must reload the whole web page. Whenever a user sends a request to the server, even if only a little local content needs to be updated, the server will refresh the whole page. The disadvantages of this approach are:

  • Performance will be reduced (a little content, refresh the whole page!)

  • The user's operation page will be interrupted (the whole page is refreshed)

1) What is Ajax

Ajax, namely "Asynchronous Javascript And XML", refers to a web page development technology for creating interactive web page applications. Ajax = Asynchronous Javascript And XML.

Ajax is a technology that allows the client to communicate asynchronously with the server when interacting with the server [without refreshing the whole browser]

2) The role of Ajax

Ajax can make web pages update asynchronously. This means that a part of a web page can be updated (local update) without reloading the whole web page.


3) Ajax benefits

  • Reduce the burden on the server and obtain data as needed.
  • No refresh to update the page, reducing the actual and psychological waiting time of users.
  • Only some pages are updated to make effective use of bandwidth
  • Mainstream browsers support Ajax

4) Asynchronous and synchronous

  • How the browser accesses the server
    • Synchronous access: the client must wait for the response from the server, and cannot perform other operations during the waiting process
    • Asynchronous access: the client does not need to wait for the response of the service. During the waiting period, the browser can perform other operations

2. Implementation of ajax in JS mode (understand)

ajax of JS: first appeared. Use an XmlHttpRequest object. It is specially used for sending ajax requests and receiving responses

Send a request using ajax, receive a response using ajax, and refresh the page using JS.

  • Disadvantages:

    • If you use AJAX technology of JS, you need to write a lot of complex code in order to realize simple functions.
    • JS AJAX code, browser compatibility is poor.

The front-end JS code can be copied

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>

    <script>
        function run() {
            //1. Create core objects
            var xmlhttp;

            //2. Judge browser type
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }



            //3. Establish connection
            /**
             * Three parameters:
             *      1.Request method: get post
             *      2.The path to the requested resource
             *      3.Asynchronous yes or no
             */
            xmlhttp.open("GET","/login?username=tom",true);

            //4. Send request
            xmlhttp.send();

            //5. Get response results
            /**
             * When do I get the response data?
             *      Get after the server responds successfully
             */
            //Listen for readyState state changes
            xmlhttp.onreadystatechange=function() {
                //readyState==4, the response is ready, and the 200 access is successful
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    //Get response data
                    var text = xmlhttp.responseText;
                    alert(text);
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="Send asynchronous request" onclick="run()"><br>
    Local refresh <input type="text">
</body>
</html>

Backend Servlet

@WebServlet("/login")
public class LoginServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //1. Get request data
        String username = req.getParameter("username");

        //Print username
        System.out.println(username);
        resp.getWriter().write(username);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

3. ajax of jQuery framework

3.1 introduction to ajax of jQuery framework

jquery is an excellent js framework, which naturally encapsulates the native ajax of js. The operation method of the encapsulated ajax is simpler and more powerful

There are several jquery methods related to ajax operation, but three are often used in development: POST GET AJAX

3.2 GET request method

Load information via remote HTTP GET request. This is a simple GET request function. For complex Ajax parameter settings, please use $ ajax

Get request mode syntax

$.get(url,data,callback,type)

  • Parameter 1: url request path
  • Parameter 2: data carried in data request
    Format: key=value or {username = 'baby', pwd:666}
  • Parameter 3: callback function after successful callback response
  • Parameter 4: data type of type response text html xml json

Code example

//Send asynchronous request in JQuery get mode
function run2() {
    //1. Parameter 1 url
    var url = "/login";

    //2. parameter 2 data
    var data = {username:"jack"};

    //3. Send get request
    $.get(url,data,function (param) {
        //Content body of data response
        alert("Response successful! Response data: " + param);
    },"text");
}

3.3 POST request mode

Load information via remote HTTP POST request. This is a simple POST request function. For complex Ajax parameter settings, please use $ ajax

Post request mode syntax

‚Äč $.post(url,data,callback,type)
The four parameters are the same as the get method, but the difference is the request method

Code example

//Send asynchronous request in JQuery post mode
function run3() {
    //1. Parameter 1 url
    var url = "/login";

    //2. Parameter 2 data
    var data = {username:"lucy"};

    //3. Send get request
    $.post(url,data,function (param) {
    	//Content body of data response
    	alert("Response successful! Response data: " + param);
    },"text");
}

3.4 Ajax request mode

The $. ajax() method can set the underlying parameters in more detail. This method is usually used for requests that cannot be completed by other methods.

ajax request mode syntax:

  • Method 1: jQuery ajax({[settings]})
  • Mode 2: $ ajax({})

settings is a js literal object in the form of key value pair {name:value,name:value}. The common name attribute names are as follows:

Code example

//Send request in Ajax mode
function run4() {
 	$.ajax({
	 	url:"/login",
 		async:true, //Asynchronous
 		data:{username:"tom"},
 		type:"POST", //Request mode
 		dataType:"text", //The data type of the returned data
 		success:function (param) {
 			alert("Response successful!! " + param)
 		},
 		error:function () {
 			alert("Response failed!!")
 		}
 	});
}

4. Case: check whether the user name has been registered

Requirement: the user enters the user name, and after the mouse is removed, the user will judge the user name and prompt whether the user name is available


Steps:

  1. Prepare the Servlet, verify the user name, and return the result (available or not)
  2. For the page input box, bind the mouse removal event
  3. Make an asynchronous request and get the response result
  4. Add HTML code dynamically according to the results

Background Servlet

@WebServlet("/checkName")
public class CheckNameServelt extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        //Get name
        String username = req.getParameter("username");

        //Encapsulate data
        HashMap<String,Object> map = new HashMap<>();

        //Determine whether the user exists
        if("tom".equals(username)){
            map.put("flag",true);
            map.put("msg","User name already occupied!");
            String data = JSON.toJSONString(map);
            resp.getWriter().print(data);
        }else{
            //User name is not used
            map.put("flag",false);
            map.put("msg","User name can be used!");
            String data = JSON.toJSONString(map);
            resp.getWriter().print(data);
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

Foreground JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>
    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
        $(function() {
            $("#username").blur(function () {

                //Get user name
                var name = $(this).val();

                //Judge that the user name is not empty
                if(name != null && name != ""){
                    $.ajax({
                        url:"/checkName",
                        type:"GET",
                        data:{username:name},
                        dataType:"json",
                        success:function (data) {
                            if(data.flag){
                                //Set span content body
                                $("#spanMsg").html("<font color='red'>" + data.msg+ "</font>");

                            }else if(!data.flag){
                                $("#spanMsg").html("<font color='green'>"+ data.msg + "</font>");
                            }
                        },
                        error:function () {
                            alert("Request processing failed!")
                        }
                    });

                }
            })
        });

    </script>
</head>
<body>
<form action="#" method="post">

    user name: <input type="text" id="username" name="username" placeholder="enter one user name">
    <span id="spanMsg" style="color:red"></span><br>

    password: <input type="text" name="password" placeholder="Please input a password"><br>
</form>

</body>
</html>

Case source code download: Ajax - sample code

Tags: Front-end Ajax

Posted by irishpeck on Thu, 14 Apr 2022 15:17:12 +0930