- 首先你要有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如下
<?php header("content-type:text/html;charset=utf-8"); echo"Hello 李明"; ？>
用我們的瀏覽器跑一下，如圖：
將地址欄的信息地址復制一份，用postman測一下數據，如果不知道什么是postman，請自行百度，后面的數據交互文章會一直用到postman。（簡而言之，postman就是測試一下給的接口能不能正常接收數據），如圖：
tigong.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>
如圖所示：
可以看到，我們的php頁面里面的數據回來了。
點擊之后：
- 查看一下chrome的開發工具
在network監控里面選擇all，可以查看所有文件，如果沒有，就刷新一下頁面，
點擊tigong.php
