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)