Front and Background Interaction About AJAX

I learned AJAX a while ago, and then I learned to interact with the background.
Here, we want to know what we're going to use to deliver - form form

Form form form

Here the form primarily submits data as post and get
And the nature of post and get I mentioned in the previous section
We have POST and GET methods. Most of us use GET methods. GTE is simpler and faster than POST. It's time for POST to send large amounts of data (GET places some of the user's parameters, such as account password, behind url, while POST does not, so POST is more stable and reliable than GET).
For example, if we set the button to type=submit, you can submit (the key is that the button is placed in the form form)

    <form action="" method="GET">
        
        
        <button type="submit">Land</button>
    </form>

The method above is GET and POST, and the action is where you interact
We'll submit the data when we click this button
Another example

<form action="" method="post/get">
    <input type="text" name="username" placeholder="username">
    <input type="password" name="password" placeholder="password">
    <input type="submit">
  </form>

This is the most basic submission that will refresh or jump the page

AJAX

With ajx we need to send requests using the XMLHttpRequest object

 var xmlhttp;
 
 if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

So let's define an XMLHttpRequest object and use it to send data. Here's an example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    window.onload = function (ev) {
      var oBtn = document.querySelector("button");
      oBtn.onclick = function (ev1) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET" , "AA.txt" , true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function (ev2) {
          if (xmlhttp.readyState === 4) {
            if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) {
              alert(xmlhttp.responseText);
            }
            else {
              console.log("No data was received from the server");
            }
          }
        }
      }
    }  
  </script>
</head>

<body>
  <button>Send Request</button>
</body>

</html>

In the appeal we sent the request with the XMLHttpRequest object, and when the status code and the request succeeded, we received the server's data.

There is also a websocket method for front-end and back-end interaction (there are more after learning nodeJS) but it is not yet possible to do so, just a little bit.

Tags: IE

Posted on Fri, 30 Aug 2019 21:05:26 -0700 by fred12ned