使用原生ajax訪問後臺數據並將其展示在前端頁面中（小菜鳥本身整理玩的，大神勿噴）

時間 2019-11-17

標籤使用原生 ajax 訪問後臺數據將其展示前端頁面菜鳥本身整理欄目 Ajax 简体版

原文原文鏈接

首先你要有php的環境，關於php環境的搭建，php本地站點的搭建，此處再也不重複請看這裏：http://www.cnblogs.com/Gabriel-Wei/p/5950465.html
咱們把wamp打開，而且在Dreamweaver裏面新建一個phpStudy站點。
這篇文章咱們須要兩個文件，一個test.html前端的頁面，一個tigong.php數據的提供頁，下面分別進行介紹。
tigong.php
咱們在Dreamweaver,phpStudy站點下面，新建一個tigong.php頁面，裏面內容以下：
```
1 <?php
2 echo"hello Tom";
3 ?>
```
爲了讓裏面支持中文，咱們加入這句話header("content-type:text/html;charset=utf-8")，此時的tigong.php以下javascript
```
<?php
header("content-type:text/html;charset=utf-8");
echo"Hello 李明";
？>
```
用咱們的瀏覽器跑一下，如圖：

將地址欄的信息地址複製一份，用postman測一下數據，若是不知道什麼是postman，請自行百度，後面的數據交互文章會一直用到postman。（簡而言之，postman就是測試一下給的接口能不能正常接收數據），如圖：

tigong.php文件準備好了，接下來咱們寫咱們的前端頁面。php

test.html 咱們設置爲點擊按鈕獲取數據

<!doctype html>
<html>
<head>
<script type="text/javascript">
 window.onload=function(){
     var bt1=document.getElementById("bt1");
     var div1=document.getElementById("div1");
     //給bt1綁定事件，一會作onload完畢之後裝在數據
     bt1.onclick=function(){
         //第一步：建立ajax對象
         //寫兼容
         if(window.XMLHttpRequest){
             var xmlHttp=new XMLHttpRequest();
             }else{
                               //兼容IE6
                 var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
                 }
         //第二步：獲取要放送的數據。這個例子沒有
         //第三步：設置一下要發送的方式和請求目標地址
         xmlHttp.open("GET","tigong.php");
         //第三個參數不寫默認是異步
         
         //第四步：設置請求的編碼
         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                  
         //第五步：監控整個過程，綁定onreadystatechange事件，總共調了四次0-1.1-2.2-3.3-4，咱們須要的是4和200
         xmlHttp.onreadystatechange=function(){
             if(xmlHttp.readyState==4 && xmlHttp.status==200){
                 //後臺數據輸出什麼，咱們的responseText就獲得什麼
                 div1.innerHTML=xmlHttp.responseText;
                 }
             };
        //第六步：發送請求
        xmlHttp.send();
         };         
     };
</script>
<meta charset="utf-8">
<style>
 #div1{
     background:#f00;
     color:#fff;
     font-weight:bold;
     width:200px;
     height:200px;
     }
img{
    width:200px;
    }
</style>
<title>ajax</title>
</head>
<div id="div1">
  <!--在數據沒有過來的時候，咱們顯示一張loading的圖片，百度搜loading一大推-->
  <img src="images/1.gif"> 
</div><br>
<input type="button" id="bt1" value="點擊獲取數據">
<body>
</body>
</html>