一直知道 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 文件里返回的值了