AJAX concepts AJAX is Asynchronous JavaScript And XML.

Asynchronous and asynchronous: The client and server communicate with each other on the basis.

The client must wait for a response from the server. The client cannot do anything else while waiting.

The client does not need to wait for a response from the server. While the server is processing the request, the client can do other things.

Ajax is a technology that allows you to update parts of a Web page without having to reload the entire page. Ajax enables Web pages to be updated asynchronously, with a small amount of data exchanged with the server in the background. This means that you can update parts of a Web page without reloading the entire page. Traditional Web pages (which don’t use Ajax) have to reload the entire page if you need to update something. Improve the user experience.

Native Ajax

//1. Create the core object var xmlHttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2. Create connection /* Parameters: 1. Request mode: GET, POST * GET mode, request parameters after the URL splicing. Send method is null * POST method, request parameters are defined in send method 2. 3. Synchronous or asynchronous request: true (asynchronous) or false (synchronous) */ xmlhttp.open("GET", "ajaxServlet? username=tom", true); //3. Send the request xmlhttp.send(); // When to receive and process the result of the response from the server // When the server responds successfully and then fetches // When the readystate of the XMLHttp object changes, the event onreadystatechange is emitted. XMLHTTP. Onreadystatechange = function () {/ / judgment readyState ready state is 4, If (xmlhttp.readyState == 4 && xmlhttp.status == 200) {// Get the result of the server response var responseText = xmlhttp.responseText; alert(responseText); }}

JQuery implements the basic syntax as follows in three ways:

$.ajax({key-value pair}) $.get() $.post() $.ajax()

$. Ajax ({url: "request path ", type:" request mode GET or POST", data: "GET request parameters or POST request parameters ", dataType: "format of response data ", success: Function (data) {// data is the data that comes back from the response}, error: function () {// the callback that will be executed if the response is wrong}});

Here is an example:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="button" Value =" SendAjaxByGet ()" <input type=" POST "value=" POST" value=" SendAjaxByPost ()" value=" POST </div> <script SRC ="js/jquery-3.3.1.min.js"></script> <script> function sendAjaxByGet() {$. Ajax ({url:" AjaxServlet1 "), Data :"username=zhangsan", dataType:"json", dataType:"json", Json success:function (data) {alert(data.msg) {alert(data.msg); }, error:function () {alert(" something went wrong...") {alert(" something went wrong..."); ); }})} function sendAjaxByPost() {$. Ajax ({url:" AjaxServlet1 ", // request path type:"POST", Data :{"username":"zhangsan"}, dataType:"json", dataType:"json", dataType:"json", Json success:function (data) {alert(data.msg) {alert(data.msg); }, error:function () {alert(" something went wrong...") {alert(" something went wrong..."); ); } }) } </script> </body> </html>

$.get() The basic syntax is as follows:

$. Get (url, [data], [callback], [type]); // url: callback (callback); // data: callback

Here is an example:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="button" Onclick ="sendAjaxByGet()"> </div> <script SRC ="js/ jquery-3.3.min.js "></script> <script> function $. Get(url, [data], [callback], [type]) * parameter: URL: request path * data: request parameter * callback: callback * type: $.get("ajaxServlet1", {username: "zhangsan"}, function (data) {alert(data.msg); }, "json") } </script> </body> </html>

$.post() The basic syntax is as follows:

$.post(url, [data], [callback], [type]); $.post(url, [data], [callback], [type]); Refers to the format type of the response data

Here is an example:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="button" If (value=" POST POST ")"> </div> <script SRC ="js/ jquery-3.3.min.js "></script> <script> function SendAjaxByPost () {/* * syntax: $.post(url, [data], [callback], [type]); $.post("ajaxServlet1", {username: "zhangsan"}, function (data) {alert(data.msg); }, "json") } </script> </body> </html>

Note that the back-end code used in this example is a Java Servlet, where AjaxServlet1.java looks like this:

@WebServlet("/ajaxServlet1") public class AjaxServlet1 extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); System.out.println(username); String json_str = "{\"msg\":\"ajax response success! \ "} "; response.getWriter().print(json_str); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); }}

Pictures from: online games