Ajax請求後臺數據

1、前期準備

安裝好XAMPP軟件，並運行起來。本文代碼是基於XAMPP開發環境，XAMPP是徹底免費且易於安裝的Apache發行版，其中包含MariaDB、PHP和Perl。XAMPP開放源碼包的設置讓安裝和使用出奇容易。

2、先後臺數據交互

前臺部分 其中「process.php?name=Herry」，向後臺傳遞name數據

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();
    })
複製代碼

後臺PHP部分 後臺接收了name數值，並向前臺返回了"GET: 你的名字是". $_GET['name']

<?php 
   	if (isset($_GET['name'])) {
   		echo "GET: 你的名字是". $_GET['name'];
   	}
?>
複製代碼

因而最後前臺console裏面獲得：GET: 你的名字是Herry

3、正常表單提交到PHP與Ajax方式提交

正常表單GET提交數據到PHP

前臺部分

<form action="process.php" method="GET">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>
複製代碼

後臺PHP部分

<?php
   	if (isset($_GET['name'])) {
   		echo "GET: 你的名字是". $_GET['name'];
   	}
?>
複製代碼

表單輸入名字Bucky，而後點擊提交後，瀏覽器將數據打包後，傳遞給後臺,最後後臺返回咱們想要的數據----GET: 你的名字是Bucky。整個過程當中頁面有刷新，數據點擊提交後，頁面跳轉到這個網址http://localhost/ajax/process.php?name=Bucky

Ajax請求後臺數據GET

Ajax異步請求數據，無需刷新頁面。能夠提升用戶體驗，較少網絡數據的傳輸量。click事件改爲submit事件（表單應該用submit事件），而後取消默認事件。

前臺部分

//Html部分
<form id="getForm">
    <input type="text"name="name" id="name1">
    <input type="submit"value="提交">
</form>
//Javascript部分
 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();
    })
複製代碼

後臺PHP部分

<?php
   	if (isset($_GET['name'])) {
   		echo "GET: 你的名字是". $_GET['name'];
   	}
?>
複製代碼

在表單輸入Bucky，點擊提交，最後在console顯示：GET: 你的名字是Bucky。整個過程頁面無刷新，有效提升頁面性能。

正常表單POST提交數據到PHP

與GET提交數據差很少 前臺部分

<form action="process.php" method="POST">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>
複製代碼

後臺PHP部分

<?php
   	if (isset($_POST['name'])) {
       	echo "POST: 你的名字是". $_POST['name'];
       	}
?>
複製代碼

表單輸入名字Bucky，而後點擊提交後，瀏覽器將數據打包後，傳遞給後臺,最後後臺返回咱們想要的數據----POST: 你的名字是Bucky。整個過程當中頁面有刷新，數據點擊提交後，頁面跳轉到這個網址http://localhost/ajax/process.php。與GET方式提交不一樣的是，POST方法數據並無內嵌在url中，這樣安全性比較高。

Ajax請求後臺數據POST

POST請求與GET主要有兩點不一樣：

①post請求必定要設置請求頭的格式內容：

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
複製代碼

②post請求參數放在send裏面，即請求體

xhr.send("name="+name" ); 複製代碼

前臺部分

//HTML部分
<form id="postForm">
    <input type="text"name="name" id="name2">
    <input type="submit"value="提交">
</form>
//Javascript部分
  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);
    })
複製代碼

後臺PHP部分

<?php
     if (isset($_POST['name'])) {
        echo "POST: 你的名字是". $_POST['name'];
        }
?>
複製代碼

表單輸入名字Bucky，而後點擊提交後，最後在console顯示：POST: 你的名字是Bucky。整個過程頁面無刷新。

4、總結

1.在不須要從新刷新頁面的狀況下，Ajax 經過異步請求加載後臺數據，提升用戶體驗和頁面性能。 2.GET參數經過URL傳遞，POST放在Request body中，後者安全性比較高。