Ajax request background data
1. Preliminary preparation
Install the XAMPP software and run it. 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 setup of the XAMPP open source package makes it surprisingly easy to install and use.
2. Front-end and back-end data interaction
The foreground part of which "process.php?name=Herry", passes 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();
})
Background PHP part
The background receives the name value and returns "GET: your name is" to the foreground. $_GET['name']
<?php
if (isset($_GET['name'])) {
echo "GET: your name is". $_GET['name'];
}
?>
So in the end console at the front desk got: GET: Your name is Herry
3. Submit the normal form to PHP and Ajax
Normal form GET submit data to PHP
front section
<form action="process.php" method="GET">
<input type="text" name="name">
<input type="submit" value="submit">
</form>
Backend PHP part
<?php
if (isset($_GET['name'])) {
echo "GET: your name is". $_GET['name'];
}
?>
Enter the name Bucky in the form, and then click submit, the browser will package the data, pass it to the backend, and finally return the data we want in the backend----GET: Your name is Bucky. The page is refreshed during the whole process. After the data is clicked to submit, the page jumps to this URL http://localhost/ajax/process.php?name=Bucky
Ajax request background data GET
Ajax requests data asynchronously without refreshing the page. It can improve user experience and reduce the amount of network data transmission . Change the click event to the submit event (the form should use the submit event), and then cancel the default event.
front section
//Html part
<form id="getForm">
<input type="text"name="name" id="name1">
<input type="submit"value="submit">
</form>
//Javascript section
document.getElementById("getForm").addEventListener("submit",function(e){
e.preventDefault();//Prevent the default jump event
var name=document.getElementById("name1").value;//Get the input 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();
})
Backend PHP part
<?php
if (isset($_GET['name'])) {
echo "GET: your name is". $_GET['name'];
}
?>
Enter Bucky in the form, click submit, and finally display in the console: GET: Your name is Bucky. There is no page refresh in the whole process, which effectively improves page performance.
Normal form POST submit data to PHP
Similar to GET submission data
Front section
<form action="process.php" method="POST">
<input type="text" name="name">
<input type="submit" value="submit">
</form>
Backend PHP part
<?php
if (isset($_POST['name'])) {
echo "POST: your name is". $_POST['name'];
}
?>
Enter the name Bucky in the form, and then click submit, the browser will package the data and pass it to the background, and finally the background will return the data we want----POST: Your name is Bucky. The page is refreshed during the whole process. After the data is clicked and submitted, the page jumps to this URL http://localhost/ajax/process.php. Different from the GET method, the POST method data is not embedded in the url, so the security is relatively high.
Ajax request background data POST
There are two main differences between POST requests and GET:
① The post request must set the format content of the request header:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
② The post request parameters are placed in send, that is, the request body
xhr.send("name="+name" );
front section
//HTML part
<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);
})
Backend PHP part
<?php
if (isset($_POST['name'])) {
echo "POST: your name is". $_POST['name'];
}
?>
Enter the name Bucky in the form, then click Submit, and finally display in the console: POST: Your name is Bucky. The entire process page does not refresh.
4. Summary
1. Without the need to refresh the page, Ajax loads background data through asynchronous requests to improve 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.