一、PHP的安装
01：安装： wampserver集成环境
02：如何知道自己安装好了：--在浏览器输入 http://localhost 出现页面便代表安装成功
03：修改端口号--- Apache - httpd.conf（这个文件） - ctrl+H（查找80就好）---然后修改自己想要的端口号（比如8080）-最后重启（Restart All service）
04：配置多个站点
第一步： Apache - httpd.conf（这个文件）--- ctrl+H寻找httpd-vhosts 修改 Include conf/extra/httpd-vhosts.conf 把前面的#去掉（若是没有就不用修改）---- ctrl+H寻找online 然后# onlineoffline tag - don't remove 下面添加以以下的代码--- Require local Require local Oeder Deny,Allow
Allow form all
注意点;若是添加了Require local Oeder Deny,Allow Allow form all 后重启是橙色的话，则需要把Require local Oeder Deny,Allow Allow form all这三行代码换做下面的两行代码 Require all granted Require host ip
第二步： Apache - httpd.vhosts.conf（这个文件）
原先只有以下代码：
# Virtual Hosts
#
<VirtualHost *:80>
ServerName localhost
ServerAlias localhost
DocumentRoot "${INSTALL_DIR}/www"
<Directory "${INSTALL_DIR}/www/">
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
Require local
</Directory>
</VirtualHost>
然后啊-就复制上面一段代码，并且添加监听 listen 1905（1905为端口号），还有修改路径（文件路径，不能出现空格和中文）
listen 1905
<VirtualHost *:1905>
ServerName localhost
ServerAlias localhost
DocumentRoot "C:\Users\Administrator\Desktop\ajax"
<Directory "C:\Users\Administrator\Desktop\ajax">
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
#Require local
Require all granted
</Directory>
</VirtualHost>
ajax
（1）：ajax的运用
ajax的应用：能够实现局部数据的实时更新的；
有着以下很多应用---百度搜索关键字，导航，翻页、懒加载（上拉，加载更多）等等作用
（2）：ajax的代码
（1）：ajax的步骤
HTML:
用户名：<input type="text" id="name" value=""><span id="inf"></span><br />
<input type="button" value="注册">
ajax请求分为四步：
第一步：告诉ajax你要做什么？
首先创建一个XMLHttpRequest对象进行http通信，然后利用open（）方法，告诉ajax你需要利用什么方式(get/post)，路径(处理的数据文件php或者json)，是否异步（一般为true）？
（“GET”方式的安全性比“POST”的要低，包含机密信息的话，建议用post数据提交方式；在做数据查询是，建议用“GET”方式，而在做数据添加、修改、删除时，建议用“POST”方式 )
let xhr = new XMLHttpRequest();
var data = 'time=' + new Date() + '&name=' + txtVal;（时间戳，为了防止同时请求同一资源，发生缓存）
xhr.open('get', 'api/02checkName.php?' + data, true);
第二步：ajax帮你发生请求
xhr.send(null); //2，ajax发送数据
第三步：后端数据处理，调用接口 php或者json文件
前端用什么请求，就用什么请求获得数据，但是这边需要先拿到数据后，echo 输出一下，以免出错，再写后面的逻辑。
<?php
//接受前端传递的数据，判断用户名是否存在，返回是否存在的标志
//isset()方法，判断是否传递值过来了
// $name = $_GET['name']; //
$name = isset($_GET['name'])? $_GET['name'] : "";
//前端有那个什么方式获取数据，就用什么方式接受数据
// echo $name;//拿到数据，马上给前端，验证是否成功
$arr = array('andy','pink','blue','yellow'); //假数据
// in_array() 函数搜索数组中是否存在指定的值。第一个参数为查询的值，第二个为数组
if(in_array($name,$arr)){ //如果有这个值，证明不可以被注册，返回的是0
echo '0';
}else{
echo '1';
}
?>
第四步：调用接口，渲染数据
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。（4: 请求已完成，且响应已就绪）
status（状态）里面--（200: "OK" 404: 未找到页面）；
注意点：xhr.responseText ---这个是ajax提交请求后，处理结束后,返回一串数据给前端,返回值一般是0或者1（0代表失败，1代表成功）
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
var str = xhr.responseText;
// console.log(str);
if (str == '1') {
inf.innerHTML = '用户名可以注册';
inf.style.color = '#58bc58';
} else {
inf.innerHTML = '该用户名太受欢迎了';
inf.style.color = 'red';
}
}
}
（2）：ajax的post请求
HTML:
用户名：<input type="text" id="name" value=""><span id="inf"></span><br />
<input type="button" value="注册">
PHP:
<?php
//接受前端传递的数据，判断用户名是否存在，返回是否存在的标志
//isset()方法，判断是否传递值过来了
$name = isset($_POST['name']) ? $_POST['name'] : '';//前端有那个什么方式获取数据，就用什么方式接受数据
// echo $name;//拿到数据，马上给前端，验证是否成功
$arr = array('andy','pink','blue','yellow');
if(in_array($name,$arr)){
// 存在，不给注册
echo '0';
}else{
// 存在，给注册
echo '1';
}
?>
JS:
(function () {
let name = document.getElementById('name');
let inf = document.getElementById('inf');
// 失去焦点的时候就验证， 用户名是否存在
name.onblur = () => {
let txtVal = name.value.trim();
let reg = /^[a-zA-Z0-9_-]{3,8}$/;
if (reg.test(txtVal)) {
//非空
//url?name=pink&&age=19
let xhr = new XMLHttpRequest();
var data = '&name=' + txtVal;
xhr.open('post', 'api/04check-post.php?time=' + new Date(), true);
// 注意点：post发送需要设置头信息
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data); //2
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
var str = xhr.responseText;
// console.log(str);
if (str == 'yes') {
inf.innerHTML = '用户名可以注册';
inf.style.color = '#58bc58';
} else {
inf.innerHTML = '该用户名太受欢迎了';
inf.style.color = 'red';
}
}
}
} else {
inf.innerHTML = '请输入3到8为的用户名';
}
};
})();
（3）：ajax的伪jq封装函数
JS:
// 封装ajax 方案2
function ajax2(opt) {
function extend(obj1, obj2) { //配置参数obj2，若是有配置参数，则优先利用配置参数
for (var key in obj2) {
obj1[key] = obj2[key];
}
}
//默认参数
var defaults = {
async: true
}
//后面是有默认参数
extend(defaults, opt);
var xhr = new XMLHttpRequest();
if (defaults.type.toLowerCase() == 'get') {
//get请求
if (defaults.data) {
defaults.url += '?' + defaults.data;
}
xhr.open(defaults.type, defaults.url, defaults.async);
xhr.send(null);
} else {
//post请求
xhr.open(defaults.type, defaults.url, defaults.async);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 注意点：post发送需要设置头信息
xhr.send(defaults.data);
}
//返回接受的数据
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (defaults.success) { //如果有数据就返回
defaults.success(xhr.responseText);
}
} else {
alert('错误http状态码:' + xhr.status);
}
}
}
}
注意点：调用该ajax2（{}）方法：
里面有着四个参数，第一个参数type: 类型；第二个参数url:路径；第三个参数data:数据；第四个参数success：回调函数function (str) { 里面写逻辑或者样式等 }
// 调用函数
(function () {
let name = document.getElementById('name');
let inf = document.getElementById('inf');
// 失去焦点的时候就验证， 用户名是否存在
name.onblur = () => {
let username = name.value.trim();
if (username) {
// 非空，就发生ajax请求
ajax2({
type: 'get',
url: 'api/02checkName.php',
data: 'name=' + username,
success: function (str) {
//console.log(str);
if (str == '1') {
inf.innerHTML = '用户名可以注册';
inf.style.color = '#58bc58';
} else {
inf.innerHTML = '用户名已经被注册了';
inf.style.color = 'red';
}
}
})
} else {
inf.innerHTML = '请输入用户名';
inf.style.color = 'red';
}
}
})();
