Ajax asynchronous interaction

What is AJax

What role does Ajax play?

Ajax Principle Implementation --> Implemented with js Code

<script type="text/javascript">
function loadName(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlHttp.onreadystatechange=function(){
            //alert(xmlHttp.readyState+"  "+xmlHttp.status);
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);
          }
        }
        
        xmlHttp.open("get","getAjaxName",true);
        xmlHttp.send(); //Send the request to the server
    }
</script>

Analytical Knowledge Points (get and post submission)

• XMLHttpRequest object:

• xmlHttp.onreadystatechange event:

• xmlHttp.open(method,url,async)

• xmlHttp.send(string)

• If you need POST data like HTML forms, use setRequestHeader() to add HTTP headers. Then, in the send() method, specify the data you want to send:

<script>
    //2. Sending requests
	request.open( "POST", "/day16/DemoServlet01", true );

	//If you don't have data, just write this line.
	request.send();
	
	//If you want to bring data, write the following two lines
	
	//If you use the post mode with data, add a header to indicate that the submitted data type is a url-encoded form data
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	//Past with data, write form data in send method. 
	request.send("name=aobama&age=19");
</script>

Corresponding case: Ajax username validation

• Case preparation

• code implementation

1. jiaoyan.jsp front-end page

<script type="text/javascript">
    function cc() {
        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }else {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange = function (){
            //We specify that when the response is ready to execute this method, the response is ready: readyState = 200, status = 200
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                //Get the corresponding data in the form of strings sent from the background
                var name = xmlHttp.responseText;
                //Determine whether the username exists
                if(name == 1){
                    //Insert data into selected elements
                    document.getElementById("span1").innerHTML = "<font color='red'>User name already exists</font>";
                }else {
                    document.getElementById("span1").innerHTML="<font color='green'>User name available</font>";
                }
            }
        }
        xmlHttp.open("post","UserJiaoyanServlet",true);
        //If it is submitted in post mode and the data is to be passed, add a header to tell the server that this is a form data encoded by utl
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        var username = document.getElementById("name").name;
        var value = document.getElementById("name").value;
        xmlHttp.send(username+"="+value);
    }
</script>
---------------------------------------------------------------------------
<tr>
    <td>Full name</td>
    <td>
    	<input type="text" id="name" name="username" onblur="cc()"><span id="span1"></span>
    </td>
</tr>

• dao layer implementation code

public class UserDaoImpl implements UserDao {
    @Override
    public int findUser(String name) throws SQLException {
        DataSource dataSource = JDBCUtil.getDataSource();
        QueryRunner queryRunner = new QueryRunner(dataSource);
        Long aLong = (Long) queryRunner.query("select count(*) from user where username = ?", new ScalarHandler(), name);
        int i = aLong.intValue();
        return i;
    }
}

User Jiaoyan Servlet. Java - --- servlet layer

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //1. Get the reference user name
            String username = request.getParameter("username");

            //2. Query the database to see if the username already exists, return 1 exists, return 2 does not exist.
            UserService userService = new UserServiceImpl();
            int i = userService.findUser(username);

            //3. Pages before the response transfer data, without redirection and server internal jump, directly input data.
            PrintWriter writer = response.getWriter();
            //Pay attention to using println method, which can input integer type directly and receive integer type at the front end.
            //Instead of using write() method, it can only output to the front-end string.
                writer.println(i);
        } catch (SQLException e) {
            e.printStackTrace();
        }
 }

Ajax Implementation Principle --> jQuery Implementation

js code is encapsulated to make it less code and more convenient to use. js files need to be imported.
Writing Ajax in js code is too cumbersome. Use jquery directly

Analytical Knowledge Points (get & post submission & load () loading)

• get request

1. Syntax format: $. get(url,collback);

1. Example

<script type="text/javascript">
	$("#btn").click(function{
		$get("url",function(data,status){
			data:The content of the existing request page, the data returned
			status:The status of a successful request(true/false)
		});
	});
</script>

• post request

1. Request grammar: $. post(url,data,collback);

1. Example

<script type="text/javascript">
	$("#btn").click(function{
		var data1 = {
    		name:"Donald Duck",
    		city:"Duckburg"
  		}
		$post("url",data1,function(data,status){
			data:The content of the existing request page, the data returned by the page
			status:The status of a successful request( success/false)
		});
	});
</script>

• load() load

1. Syntax format $("select"). load(url,data,collback)

The load() method is to assign the data sent by the server to the alternate elements.
With text(), the method assigns

1. Example

<script type="text/javascript">
	$("button").click(function(){
	  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
	  	responseTxt:The content of the result returned after the function call is successful
	  	statusTxt:The status of successful execution success
	  	xhr:Contained XMLHttpRequest object
	    if(statusTxt=="success")
	      alert("External content loading was successful!");
	    if(statusTxt=="error")
	      alert("Error: "+xhr.status+": "+xhr.statusText);
	  });
	});
</script>

• extend

The function of html() and text() methods in jquery can be realized by innerHTML itself in js

Corresponding Case 1: Imitate Baidu Tips

Corresponding Case 2: Provincial-Municipal Interaction