初学 Ajax（涉及 php)

一直知道

ajax

但是尚未真正了解，这次看了慕课网的《Ajax全接触》，算是有所收获，入了个门。
需要用到php，因为 Ajax也是向服务器请求（不知道这么解释对不对），所以还需要配置环境，我用的是 phpstudy ，很简单好用
请先了解过 http
（没创建数据库，所以并没有真正的保存）

随便写个静态页面


<h1>员工查询</h1><label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p><h1>员工新建</h1><label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>

写一个叫 server.php 的页面，作用是响应前端发送的请求

    
<?php//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); //定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array(array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理"));//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){create();
}//通过员工编号搜索员工
function search(){//检查是否有员工编号的参数//isset检测变量是否设置；empty判断值为否为空//超全局变量 $_GET 和 $_POST 用于收集表单数据if (!isset($_GET["number"]) || empty($_GET["number"])) {echo "参数错误";return;}//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。//global 关键词用于访问函数内的全局变量global $staff;//获取number参数$number = $_GET["number"];$result = "没有找到员工。";//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果// 把 $staff 循环给新的变量 $value， 然后可以做一些操作foreach ($staff as $value) {if ($value["number"] == $number) {$result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] . "，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];break;}}echo $result;
}//创建员工
function create(){//判断信息是否填写完全if (!isset($_POST["name"]) || empty($_POST["name"])|| !isset($_POST["number"]) || empty($_POST["number"])|| !isset($_POST["sex"]) || empty($_POST["sex"])|| !isset($_POST["job"]) || empty($_POST["job"])) {echo "参数错误，员工信息填写不全";return;}// 没做数据库: 获取POST表单数据并保存到数据库//提示保存成功echo "员工：" . $_POST["name"] . " 信息保存成功！";
}

现在开始是js部分

// GET 请求的查询
document.getElementById("search").onclick = function() { // 创建一个 XMLHttpRequest对象（老版本 ie5\6 是 ActiveXObject)var request = new XMLHttpRequest();// 开始一个GET 请求， server.php就是上面的那个php 文件， true表示异步 默认就是true。// GET 请求都是用 url来传输，所以就获取输入在 #keyword 中的数字， 来和php 中的 $number 对应查找request.open("GET", "server.php?number="   document.getElementById("keyword").value, true);/***  open() 和 send() 是一起使用的*  用来向 open() 中的请求体（server.php) 发送请求*  具体请自行搜索 send()的语法，比较长*/request.send();/***  send() 后会触发 onreadystatechange *  结束时会把 readyState 变成4*  而页面正确时的 status 是200*  所以，依此做一个判断*/request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { // responseText 是 server.php 的返回值document.getElementById("searchResult").innerHTML = request.responseText;} else {alert("发生错误："   request.status);}} }}// POST 请求的保存
document.getElementById("save").onclick = function() { var request = new XMLHttpRequest();request.open("POST", "server.php");// 是保存， 所以获取各值， & 是连接数据的格式？var data = "name="   document.getElementById("staffName").value "&number="   document.getElementById("staffNumber").value "&sex="   document.getElementById("staffSex").value "&job="   document.getElementById("staffJob").value;// POST 请求时，在 open() send() 中间要设立一个头信息request.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 将 data 传送过去request.send(data);request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText;} else {alert("发生错误："   request.status);}} }}

一个简单的Ajax 差不多就是这样了

数据还可以用JSON 的方式，仅需要改动几个地方

 // php 中 将 echo 的值改成 JSON格式，例如：if (!isset($_GET["number"]) || empty($_GET["number"])) {echo $jsonp . '({"success":false,"msg":"参数错误"})';return;}// js 中// 触发 onreadystatechange 后， 它的回调函数里创建一个调用了 JSON.parse 方法的变量来保存 server.php的返回值，例如：var data = JSON.parse(request.responseText);// data.success 的 success 也是 php 里设定的// alert 一下alert(data);  //  出了两个 object...// 那试试 console.log 吧console.log(data);  // Object {success: true, msg: "找到员工：员工编号:101, 员工姓名：洪七，员工性别：男, 员工职位：总经理"}if (data.success) {document.getElementById('searchResult').innerHTML = data.msg;} else {document.getElementById('searchResult').innerHTML = '出现错误：'   data.msg;}// 这样就可以调用 php 文件里返回的值了