AJAX（一）

var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari...
}else{
request = new ActiveXObject("Microsoft.XMLHTTP"); //IE6，IE5
}else{
alert("No XHR object available.");
}

function(){
if(tyof XMLHttpRequest != "undefined"){
return new XMLDocument();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXSting != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML.XMLHttp"],i,len; for(i=,len=versions;i<len;i++){
try{
new ActiveXObj(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
//------
}
}
}
return new ActiveXObject(arguments.callee.activeXString));
}esle{
throw new Error("No XHR object available.");
}
}

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();

var request = new XMLHttpRequest();
requset.open("POST","post.php",true);
request.send();

var request = new XMLHttpRequest();
request.open('POST', 'post.php', true) // 默认true异步操作
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //一般发送表单信息 需做该声明
request.send('name=foodoir&sex=男');

//先new一个xmlHttpRequest对象，再调用open方法，再发送一些数据，最后对这个响应进行监听。
var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
// 为request注册监听事件
request.onreadystatechange = function(){
if(request.readyState === && request.status === ){
// 当请求成功时，执行...
...
}
}

var xhr = CreateXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == ){//检测XHR的readyState属性
if((xhr.status >= && xhr.status <= ) || xhr.status == ){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful:" + xhr.status);
}
}
};
xhr.open("GET","get.php",true);
xhr.send(null);

<?php
//echo "hello world";//这是一个纯PHP的文件，
//设置页面内容是html编码格式是utf-8,这样防止页面返回的值是乱码
//text/plain; application/json;text/xml;text/html;application/javascript;这都是高度客户端
//服务器响应过来的内容它的格式是什么。text/plain;是代表格式是纯文本，application/json;是代表格式是json字符串header("Content-Type:text/plain;charst = utf-8");
//header("Content-Type:application/json;charst = utf-8");
//header("Content-Type:text/xml;charst = utf-8");
//header("Content-Type:text/html;charst = utf-8");
//header("Content-Type:application/html;charst = 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();
}else if($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}//通过员工编号搜索员工
function search(){
//在PHP中，超全局变量，也就是我们理解的全局变量，它可以在一个脚本的全部作用域中都可以用，
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值为否为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
//首先我们检查一下参数里边有没有员工的编号，如果没有员工的编号，我们是没法搜索员工的，所以我们用这种方式来
//检查一下我们的GET的url参数中有没有number这么一个字段，isset是检查变量是否设置，也就是这个number变量有没有
//empty代表这个变量是否为空，在这里，如果这个变量没有或者为空，我们都显示参数错误：echo "参数错误";
//也就是说页面直接返回“参数错误”,在浏览器中预览一下，我们没有任何参数的情况下，代表的是一个get请求，当我们没有
//加number参数的时候。它会直接返回参数错误，当然如果有参数错误，就直接查询了。查询，就把这个number参数获取到
if(!isset($_GET["number"]) || empty($_GET["number"])){
echo"参数错误";
return;
}//函数之外声明的变量拥有Global作用域，只能在函数以外进行访问
//global关键词用于访问函数内的全局变量
global $staff;
//获取number参数
$number = $_GET["number"];
$result = "没有找到员工。";//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则返回结果
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;
}
//TODO：获取POST表单数据并保存到数据库//提示保存成功
echo "员工：".$_POST["name"]."信息保存成功！";
}?>

GET http://localhost/php/09-21/01.php HTTP/1.1
Host: localhost
Proxy-Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2816.0 Safari/537.36
Accept: */*
Referer: http://localhost/php/09-21/01.html
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: zh-CN,zh;q=0.8

POST http://localhost/php/09-21/01.php?number=101 HTTP/1.1
Host: localhost
Content-type: application/x-www-form-urlencoded
Proxy-Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2816.0 Safari/537.36
Accept: */*
Referer: http://localhost/php/09-21/01.html
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: zh-CN,zh;q=0.8
Content-Length: 54

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

document.getElementById('search').onclick = function(){
//发送ajax请求并处理
var request = new XMLHttpRequest();
//request.open("GET","01.php")
request.open("GET","01.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status === 200){
document.getElementById("searchResult").innerHTML = request.responseText;
}else{
alert("发生错误："+request.status);
}
}
};
};document.getElementById('save').onclick = function(){
var request = new XMLHttpRequest();
request.open("POST","01.php");
var data = "name=" + document.getElementById("staffName").value
+ "&number=" + document.getElementById("staffNumber").value
+ "&sex=" + document.getElementById("staffSex").value
+ "&job=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在send方法中这段代码是很重要的
request.send(data);
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status === 200){
document.getElementById("createResult").innerHTML = request.responseText;
}else{
alert("发生错误"+request.status);
}
}
};
};

<?php
header("Content-Type:application/json;charset = utf-8");$staff = array
(
array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>"总经理"),
array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"开发工程师"),
array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>"产品经理"),
);
if($_SERVER["REQUEST_METHOD"] == "GET"){
search();
}else if($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}
function search(){
if(!isset($_GET["number"]) || empty($_GET["number"])){
echo '{"success":false,"msg":"参数错误"}';
return;
}
global $staff;
$number = $_GET["number"];
$result = '{"success":false,"msg":"没有找到员工"}';
foreach ($staff as $value) {
if($value["number"] == $number){
$result = '{"success":true,"msg":"找到员工：员工编号：'.$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 '{"success":false,"msg":"参数错误，员工信息填写不全"}';
return;
}
echo '{"success":true,"msg":"员工：'.$_POST["name"].'信息保存成功！"}';
}
?>