初学 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 文件里返回的值了

视频中还有讲到 jQuery中的Ajax写法 和 jQuery中跨域时怎么请求

jQuery 的写法很简单， 比原生的简便太多了。 我也就不总结啦，

若有不合适之处， 还望指点一二

(:з」∠)