php環境搭建及xhr交互 · 前端技術總結

## 一、下載wamp php開發環境搭建，以經典為例wamp（window、apache、php、mysql），到于lamp現在先不需要了解那么多，想知道的可以去[百度一下](http://www.baidu.com)。 wampserver下載【https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=wampserver&oq=xampp&rsv_pq=b181dbb90000a531&rsv_t=e91fDEy9jPp4DqImwCo8X9cnK0euGUEmZIHbIETct9Z3yETe38YQnRdmO4w&rqlang=cn&rsv_enter=1&inputT=117517&sug=wampserver&rsv_sug3=57&rsv_sug1=60&rsv_sug7=100&rsv_n=1&bs=xampp】 ![](https://box.kancloud.cn/9564ee64e3f5bfc2dae4f2f8da49a3c9_596x484.jpg) 下載完雙擊安裝到指定盤符就行了。。接下來就是運行打開服務了 ![](https://box.kancloud.cn/39d26a9f9715ca1dcedfd4ec969599ad_268x212.jpg) 直接啟動所有服務就行了，啟動后就可以以localhost或127.0.0.1訪問網站了然后我們進入網站根目錄(www) 目錄結構 ![](https://box.kancloud.cn/0953e7da00b641e1ba3eb44db2227779_117x66.jpg) ## 二、GET方式請求數據 test.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var xhr = new XMLHttpRequest(); xhr.open('get', './test.php', true); xhr.responseType = 'json'; xhr.send(null); xhr.onreadystatechange = function() { if(xhr.status===200 && xhr.readyState===4) { console.log(xhr.response); } } </script> </body> </html> ~~~ test.php ~~~ <?php $data = array( "name"=>"tom", "age"=>24 ); echo json_encode($data); ~~~ 返回結果 ![](https://box.kancloud.cn/53924fe62a3073ca1eb939c7cb372ccd_276x43.jpg) ## 三、GET工作傳參并獲取數據 test.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var xhr = new XMLHttpRequest(); xhr.open('get', './test.php?name=tom', true); xhr.responseType = 'json'; xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.send(null); xhr.onreadystatechange = function() { if(xhr.status===200 && xhr.readyState===4) { console.log(xhr.response); } } </script> </body> </html> ~~~ test.php ~~~ <?php $name = $_GET['name']; $data = array( "name"=>$name, "age"=>24 ); echo json_encode($data); ~~~ 下面post方式的就不這里展示了，想了解的可以看下深入理角ajax 目錄 ## 四、為什么要配置host？相信作為前端我們會經常遇到后端要我們先配置host才能訪問接口，因為這個后端使用了虛擬主機下面我們來看下虛擬主機的配置先找到apache\conf\extra\httpd-vhosts.conf配置文件按照示例，加一個虛擬主機 ~~~ <VirtualHost www.vfradar.com:8080> DocumentRoot DocumentRoot D:\xampp\htdocs\variflightRadar\public </VirtualHost> ~~~ 再找到C:\Windows\System32\drivers\etc\host文件可以window+r打開運行窗口，輸入drivers進入drivers目錄寫下這行一句 ~~~ 127.0.0.1 www.vfradar.com ~~~ 然后重啟apache服務就可以使用 http://www.vfradar.com:8080 來訪問下，如果你在這個項目下寫了接口http://www.vfradar.com:8080/api/getFlower?id=23 那么別人調用這個接口就需要加上上面的host配置了。。。注：虛擬主機需要在同一個網段下才能相互使用。。查看本機ip，命令->ipconfig 用這個ip也可以代替127.0.0.1 ![](https://box.kancloud.cn/2daa6c08817a81be57061c6ebe96d988_553x377.jpg) ## 四、轉接口，這個在項目中也有可能用到，那就是如果要后端不好溝通或者后端很忙，而接口又需要跨域，這里我們就要想辦法去自己實現了。。可以考濾下載chrome插件，搜索allow-control-allow-origin下載，當然這個需要翻墻 ![](https://box.kancloud.cn/4e4232cb2e06b551c267a0dbb6354972_412x412.jpg) 不這樣做的話，我們就看下這篇文章了。。傳送門：[前端之php curl獲取接口數據](https://segmentfault.com/a/1190000010873975?_ea=2447569) ## 五、[php從mysql取數據](http://www.runoob.com/php/php-mysql-select.html)