First, preliminary preparation

Get XAMPP installed and up and running. The code in this article is based on the XAMPP development environment, a completely free and easy-to-install Apache distribution that includes MariaDB, PHP, and Perl. The XAMPP open source package is set up to make installation and use surprisingly easy.

Two, front and background data interaction

Process.php? Name =Herry “, passing the name data to the background

 document.getElementById("button").addEventListener("click".function () {
        var xhr = new XMLHttpRequest();
        xhr.open("GET"."process.php? name=Herry".true);
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200) {
                var data = xhr.responseText;
                console.log(data)
            }
        };
        xhr.send();
    })
Copy the code

$_GET[‘name’] $_GET[‘name’] $_GET[‘name’]

<? phpif (isset($_GET['name']) {echo "GET: Your name is.". $_GET['name'];
   	}
?>
Copy the code

GET: Your name is Herry

Third, normal form submission to PHP and Ajax submission

The normal form GET submits data to PHP

The foreground part

<form action="process.php" method="GET">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>
Copy the code

Background PHP

<? phpif (isset($_GET['name']) {echo "GET: Your name is.". $_GET['name'];
   	}
?>
Copy the code

Enter the name Bucky and click Submit. The browser packs up the data and passes it to the background. The background returns the data we want —-GET: Your name is Bucky. In the process of the whole page refresh, data, after click the submit page jump to the http://localhost/ajax/process.php? name=Bucky

Ajax requests background data GET

Ajax requests data asynchronously without refreshing the page. It improves user experience and reduces the amount of network data transmission. Change the Click event to submit (the form should use a Submit event) and cancel the default event.

The foreground part

//Html section <form id="getForm">
    <input type="text"name="name" id="name1">
    <input type="submit"value="Submit"> </form> //Javascript part document.getelementById ("getForm").addEventListener("submit".function(e){ e.preventDefault(); Var name= document.getelementById ("name1").value; Var XHR = new XMLHttpRequest(); xhr.open("GET"."process.php? name="+name,true);
        xhr.onreadystatechange=function () {
            if (  xhr.status == 200&&xhr.readyState == 4) {
                var data = xhr.responseText;
                console.log(data);
            }
        }
            xhr.send();
    })
Copy the code

Background PHP

<? phpif (isset($_GET['name']) {echo "GET: Your name is.". $_GET['name'];
   	}
?>
Copy the code

Enter Bucky in the form, click Submit, and the console displays: GET: Your name is Bucky. The page is not refreshed during the whole process, effectively improving page performance.

A normal form POST submits data to PHP

Similar to the front end of GET submitting data

<form action="process.php" method="POST">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>
Copy the code

Background PHP

<? phpif (isset($_POST['name']) {echo POST: What's your name?. $_POST['name'];
       	}
?>
Copy the code

Enter the name Bucky and click Submit. The browser packs up the data and sends it to the background. The background returns the data we want —-POST: Your name is Bucky. In the process of the whole page refresh, data, after click the submit page jump to the http://localhost/ajax/process.php. Unlike GET, POST data is not embedded in the URL, which is more secure.

Ajax requests background data POST

POST requests differ from GET in two main ways:

Post request must set the format of the request header:

xhr.setRequestHeader("Content-type"."application/x-www-form-urlencoded");  
Copy the code

② Post request parameters are placed in send, namely, the request body

xhr.send("name="+name");Copy the code

The foreground part

//HTML section <form id="postForm">
    <input type="text"name="name" id="name2">
    <input type="submit"value="Submit"> </form> //Javascript part document.getelementById ("postForm").addEventListener("submit".function (e) {
        e.preventDefault();
        var name=document.getElementById("name2").value;
        var params = "name="+name;
        var xhr = new XMLHttpRequest();
        xhr.open("POST"."process.php".true);
        xhr.setRequestHeader("Content-type"."application/x-www-form-urlencoded");
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200) { var data = xhr.responseText; console.log(data); }}; xhr.send(params); })Copy the code

Background PHP

<? phpif (isset($_POST['name']) {echo POST: What's your name?. $_POST['name'];
        }
?>
Copy the code

Enter the name Bucky, click Submit, and the console displays: POST: Your name is Bucky. The page is not refreshed during the whole process.

Four,

1. Ajax loads background data through asynchronous requests without the need to refresh the page, improving user experience and page performance. 2. The GET parameter is passed through the URL, and the POST is placed in the Request body, which is more secure.