Ajax asynchronous loading and parsing example sharing

This article mainly introduces Ajax asynchronous loading to everyone in detail, what is Ajax asynchronous loading, and how to implement Ajax asynchronous loading. Interested friends can refer to it. I hope it can help you.

AJAX (Asynchronous JavaScript and XML, asynchronous JavaScript and XML). It's not a new programming language, but a new way of using existing standards, the art of exchanging data with the server and updating parts of a web page without reloading the entire page.
So, let us enter the world of AJax together.

Basic Syntax

Before learning Ajax, we must clarify our needs, which is to interact with the server asynchronously and update page information without refreshing the page. Using Ajax is actually very simple, we just need to follow certain steps.
•Create an Ajax object (the native one needs to determine the type of the current browser)
•Set the callback function (a function triggered after completing the interaction with the server)
•Open the request and send it. (The code writing is slightly different depending on the request method)
•The client obtains feedback data and updates the page

Get the Ajax object

Different browsers have different requirements for Ajax Support is inconsistent, so we have to treat it differently.

Set the callback function

The purpose of setting the callback function is to add the obtained data information after Ajax completes the interaction with the server onto the page.

Usually we specify the onreadystatechange function as our callback processing function.

Related to the interaction between Ajax and the server, there is the following status information for our reference during the coding process.

.readystate

There are several commonly used values ​​​​about the loading status:
•0: The request is not initialized
•1: The server connection has been established
•2: The request has been received
•3: The request is being processed
•4: The request has been completed and the response is ready

.status

The status information of the loading result is:
•200: “OK”

•404: “This page was not found”

Start interaction

When talking about interaction, the two parties that come to mind are the two parties. That is the interaction between our ajax client and server. So we need to clearly request the location of the data on the server

open(method,url,async)

The use of url will differ according to the method, which we must clear. As for the asynchronous parameter, generally speaking, false can be used for requests with a small amount of data, but it is recommended to use true for asynchronous loading to avoid excessive pressure on the server.

•GET method

This method is very simple, just specify the location of the url on the server. It is very important to understand the red part here. We must specify the URL as the location of the request on the server, usually using an absolute path.

// 对Servlet来说指定其注解上的位置即可
xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
  xmlhttp.send();

•POST method

When using the POST method, we need an additional process. For example:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 在send方法中指定要传输的参数信息即可
xmlhttp.send("fname=Bill&lname=Gates");

Client update page

For Ajax, as the name suggests. Data is transmitted in xml form. But for now, that's no longer the only form. So how do we update the obtained data to the web page? There are two ways:
•If the response from the server is not XML, use the responseText attribute.
document.getElementById("myp").innerHTML=xmlhttp.responseText;

•If the response from the server is XML and needs to be parsed as an XML object, use the responseXML attribute:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
 {
 txt=txt + x[i].childNodes[0].nodeValue + "<br />";
 }
document.getElementById("myp").innerHTML=txt;

Example experience

After understanding these basic syntaxes, we can simply apply them in actual development. In order to better complete this experiment, I first made a simple JavaWeb to handle our Ajax requests.

Using Servlet method

AjaxServlet.java

package one;

import java.io.IOException;
import java.io.PrintWriter;

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

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;

 /**
  * @see HttpServlet#HttpServlet()
  */
 public AjaxServlet() {
  super();
  // TODO Auto-generated constructor stub
 }

 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  *  response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  //response.getWriter().append("Served at: ").append(request.getContextPath());
  String userinput = request.getParameter("userinput");
  System.out.println("客户端连接！");
  System.out.println("请求信息为：" + userinput);
  PrintWriter out = response.getWriter();
  if(userinput.equals("") || userinput.length()<6) {
   response.setContentType("text/html;charset=UTF-8");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Content-Type", "text/html;charset=utf-8");
   out.write("<h3>the length of input string must be more than 6!</h3>");
  }else{
   response.setContentType("text/html;charset=UTF-8");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Content-Type", "text/html;charset=utf-8");
   out.println("<h3>Correct!</h3>");
  }
  out.close();
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  *  response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  doGet(request, response);
 }

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
 <display-name>Test</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>

 <servlet>
 <servlet-name>AjaxServlet</servlet-name>
 <servlet-class>one.AjaxServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>AjaxServlet</servlet-name>
 <url-pattern>/servlet/AjaxServlet</url-pattern>
 </servlet-mapping>
</web-app>

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
</head>
<body>
<p>
 <h2>AJAX Test</h2>
 <input type="text" name="userinput" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)">
 <br>
 <span id="ajax_result"></span>
 <script>
 getResult = function(str){
  var httpxml;
  if(0 == str.value.length) {
   document.getElementById("ajax_result").innerHTML = "Nothing"; 
  } 
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  }else{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function(){
   if(4 == xmlhttp.readyState && 200 == xmlhttp.status) {
    document.getElementById("ajax_result").innerHTML = xmlhttp.responseText;
   }
  }

  xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
  xmlhttp.send();

  }
 </script>
</p>
</body>
</html>

Experimental results
•When the length is less than 6:

•When the length is greater than or equal to 6:

Use JSP method

receiveParams.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<% 
  //接收参数 
  String userinput = request.getParameter("userinput"); 
  //控制台输出表单数据看看 
  System.out.println("userinput =" + userinput); 
  //检查code的合法性 
  if (userinput == null || userinput.trim().length() == 0) { 
    out.println("code can&#39;t be null or empty"); 
  } else if (userinput != null && userinput.equals("admin")) { 
    out.println("code can&#39;t be admin"); 
  } else { 
    out.println("OK");
  } 
%>

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
</head>
<body>
<p>
 <h2>AJAX Test</h2>
 <input type="text" name="userinput" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)">
 <br>
 <span id="ajax_result"></span>
 <script>
 getResult = function(str){
  var httpxml;
  if(0 == str.value.length) {
   document.getElementById("ajax_result").innerHTML = "Nothing"; 
  } 
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  }else{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function(){
   if(4 == xmlhttp.readyState && 200 == xmlhttp.status) {
    document.getElementById("ajax_result").innerHTML = xmlhttp.responseText;
   }
  }

  //xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
  xmlhttp.open("GET","receiveParams.jsp?userinput="+str.value,true);
  xmlhttp.send();

  }
 </script>
</p>
</body>
</html>

The effect is consistent.

Ajax in JQuery

The previous introduction is the native Ajax implementation. We still need to do a lot of work, and JQuery helps us complete the platform-independent work. We only need Just focus on the development of business logic. It is more convenient and simpler to directly use jquery's .post or .get or .ajax method. The js code is as follows:
•.POST method

 $.post("./newProject",{newProjectName:project_name},
   function(data,status){
  //alert("data:" + data + "status:" + status);
  if(status == "success"){
   var nodes = data.getElementsByTagName("project");
   //alert(nodes[0].getAttribute("name"));
   for(var i = 0;i < nodes.length;i ++){
    $("#project_items").append("<option value=\"" + (i+1) + "\">" + nodes[i].getAttribute("name") + "</option>"); 
   }
  }

 })

•.ajax method

 $(function(){
  //按钮单击时执行
  $("#testAjax").click(function(){

    //Ajax调用处理
   $.ajax({
    type: "POST",
    url: "test.php",
    data: "name=garfield&age=18",
    success: function(data){
      $("#myp").html('<h2>'+data+'</h2>');
     }
   });

   });
 });

•.get method

 $(document).ready(function(){
 $("#bt").click(function(){
 $.get("mytest/demo/antzone.txt",function(data,status){
  alert("Data:"+data+"\nStatus:"+status);
 })
 })
})

Summary

Today's demonstration is very necessary for the actual development process to verify user input data on the server side, or to update the page immediately while reducing network traffic. It is also widely used and can effectively improve user experience.

This case should be used as a starting point to add asynchronous loading to your application.

Related recommendations:

Javascript vue.js table paging, ajax asynchronous loading of data

javascript - Ajax asynchronous loading, Event triggering problem

phpIf you capture ajax asynchronously loaded content

The above is the detailed content of Ajax asynchronous loading and parsing example sharing. For more information, please follow other related articles on the PHP Chinese website!