前后端数据交互（入门篇）
很多第一次听说Ajax技术的人可能比较茫然，也不知道这个东西是用来干嘛的。举个例子，比如我们要在淘宝注册一个账号，需要填写用户名手机号邮箱等等的信息，在还有没Ajax的几年前我们每次注册账号都需要把所有信息填完，然后提交，完了我们一点提交就发现，这会儿账户名已经被注册了，
OMG 这时就要全部重新填写，写完一提交邮箱又重复了，反复几遍下来，才终于注册好一个账户，非常的麻烦浪费时间。当Ajax出现后，现在几乎所有网页的表单提交都使用了这个技术，又例如当我们在注册一个淘宝账号时，如果用户名被占用了会马上在输入框右侧出现红色警示文字“该用户名已被注册”...相同其他条目也是。这样一来就极大提高了提交效率，并且不需要服务器一遍又一遍重新加载整个浏览器页面，节约了客户等待时间。
为了方便初学者学习，代码摘自MOOC网
首先到
http://www.apachefriends.org/download.html
下载XAMPP（一个包含 MySQL、PHP 和 Perl 的 Apache功能强大的建站集成软件包）打开control.exe然后startApache。如果无法开启则在config第一项将端口80改为8080
新建Ajax站点，
在DW里写两个文件，一个是服务端的，一个客户端
服务器：
//设置页面内容是html编码格式是utf-8
header("Content-Type:text/plain;charset=utf-8");
//header("Content-Type:application/json;charset=utf-8");
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-Type:text/html;charset=utf-8");
//header("Content-Type:text/application/javascript;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的员工是否存在，如果存在，则修改返回结果
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;
}
//TODP:获取POST表单数据并保存到数据库
//提示保存成功
echo"员工：".$_POST["name"]."信息保存成功!";
}
?>
HTML
JS
document.getElementById("search").onclick=function(){
//发送Ajax查询请求并处理
var request=new XMLHttpRequest();
request.open("GET","server.php?number="+document.getElementById("keyword").value);//GET请求要把一些参数传到URL里面
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("searchResult").innerHTML=request.responseText;
}else{
alert("发生错误:"+reqyest.status)}
}
}
}
document.getElementById("save").onclick=function(){
//发送Ajax查询请求并处理
var request=new XMLHttpRequest();
request.open("POST","server.php"); //POST请求是把参数传到send()里
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");//炒鸡重要！！！
request.send(data);
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("createResult").innerHTML=request.responseText;
}else{
alert("发生错误:"+reqyest.status)}
}
}
}
文件目录
2016.5.25
网友评论