Ajax role

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast dynamic web pages.

By exchanging small amounts of data with the server behind the scenes, AJAX can make asynchronous page updates. This means that, for certain parts of the page to be updated without reloading the entire page.

Traditional web page (do not use AJAX) If you need to update the entire page surface content, essential overloaded.

There are many applications that use AJAX Case: Sina Weibo, Google Maps and so on.

Synchronous and asynchronous difference;

package web_Servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    String username=request.getParameter("username");
    String password=request.getParameter("password");
    System.out.println(username);
    System.out.println(password);
    if("whr".equals(username)&&"123".equals(password)){
        response.getWriter().write("sucess");
    }else{
        response.getWriter().write("failure");
    }
}

}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   function login(){
       var username=document.getElementById('username').value;
       var password=document.getElementById('password').value;
       var params='username='+username+'&password='+password; 
    
       //3.url
       URL = var '? pageContext.request.contextPath $ {} / the LoginServlet' + the params; 
      
       // use ajax get request transmitted
        // 4.1 Creating a request object 
       var = Request new new the XMLHttpRequest ();
        // 4.2 methods call get request
        / / call the open method are asynchronous, to true 
       the request.open ( 'GET', URL, to true ); 
       request.send (); 
       // accept response server 
       request.onreadystatechange = function () { 
           the console.log ( 'preparatory state code - '+ request.readyState +': response status code - '+ request.status);
            IF (request.readyState. 4 && == Request.== 200 is Status ) {
                // receiving server response data
              alert( request.responseText);
           }
       }
       
   }




</script>
</head>
<body>
<form  action="${pageContext.request.contextPath}/LoginServlet">
   用户名：<input type="text" name="username" id="username"><br>
    密码： <input type="password" name="password" id="password"><br>
   <input type="button" value="提交" onclick="login()">


</form>

</body>
</html>

Run shot:

What is AJAX?

Guess you like