Ajax的简单实现

Ajax的实现需要服务器端和客户端配合来实现

下面看服务器端的代码，也就是用php编写的一个后台脚本文件

 1 <?php
 2 //设置页面内容，编码格式是utf8
 3 header("Content-Type:text/plain;charset=utf-8");
 4 //定义一个多维数组，每条员工信息为一个数组
 5 $staff = array(
 6     array('name' =>'杰伦' ,'number'=>'01' ,'sex'=>'男' ,'job'=>'总经理' ),
 7     array('name' =>'弈迅' ,'number'=>'02' ,'sex'=>'男' ,'job'=>'开发经理' ),
 8     array('name' =>'力宏' ,'number'=>'03' ,'sex'=>'男' ,'job'=>'产品经理' )
 9 );
10 //判断请求方式，如果是get请求则进入search方法，post请求进入create方法
11 //$_SERVER是超全局变量，在一个脚本文件的全部作用域都能使用
12 //$_SERVER["REQUEST_METHOD"]返回页面使用的请求方法
13 if($_SERVER["REQUEST_METHOD"] == "GET") {
14     search();//搜索员工
15 }elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
16     # code...
17     create();//新建员工
18 }
19 //通过员工编号搜索员工
20 function search(){
21     //检查是否有员工编号的参数
22     //issent检测变量是否设置，empty判断值是否为空
23     //超全局变量$_GET和$_POST用来收集表单数据
24     if(!isset($_GET["number"])||empty($_GET["number"])){
25         echo "参数错误";
26         return;
27     }
28     //函数之外声明的变量拥有Global作用域，只能在函数以外进行访问
29     //需要用global关键词，才能访问函数内的全局变量
30     global $staff;
31     //获取number参数
32     $number = $_GET["number"];
33     $result = "没有员工。";
34     //遍历staff数组，查找key值为number的员工是否存在
35     foreach ($staff as $value) {
36         # code...
37         if($value["number"] == $number){
38             $result="找到员工：员工编号：".$value["number"].
39                     ",员工姓名：".$value["name"].
40                     ",员工性别：".$value["sex"].
41                     ",员工职位：".$value["job"];
42             break;
43         }
44     }
45     echo $result;
46 }
47 
48 //创建员工
49 function create(){
50     //判断信息是否写全
51     if(!isset($_POST["name"]) || empty($_POST["name"])
52      || !isset($_POST["number"]) || empty($_POST["number"])
53      || !isset($_POST["sex"]) || empty($_POST["sex"])
54      || !isset($_POST["job"]) || empty($_POST["job"])){
55         echo "参数错误，员工信息填写不全";
56         return;
57     }
58     
59     echo "员工：".$_POST["name"]."信息保存成功！";
60 }
61 
62 ?>

客户端的代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     <h1>员工查询</h1>
13     <label>请输入员工编号：</label>
14     <input type="text" id="keyword">
15     <button id="search">查询</button>
16     <p id="searchResult"></p>
17 
18     <h1>员工新建</h1>
19     <label>请输入员工姓名：</label>
20     <input type="text" id="staffName"><br>
21     <label>请输入员工编号：</label>
22     <input type="text" id="staffNumber"><br>
23     <label for="">请输入员工性别：</label>
24     <select id="staffSex">
25         <option>男</option>
26         <option>女</option>
27     </select><br>
28     <label>请输入员工职位：</label>
29     <input type="text" id="staffJob"><br>
30     <button id="save">保存</button>
31     <p id="createResult"></p>
32 
33 
34 <script type="text/javascript">
35     document.getElementById("search").onclick=function(){
36         //发送Ajax查询请求并处理
37         //新建一个XHR对象
38         var request = new XMLHttpRequest();
39         //调用open方法(get方法，地址)地址上需要带一些参数
40         request.open("GET","newPHP.php?number=" + document.getElementById("keyword").value);
41         //使用send()方法发送请求
42         request.send();
43         //通过onreadystatechange事件来监听请求
44         request.onreadystatechange=function(){
45             //readyState=4则表示请求结束
46             if(request.readyState === 4){
47                 //status=200表示请求成功
48                 if(request.status === 200){
49                     //通过responseText来获取报文并赋给DOM，用来显示查询结果
50                     document.getElementById("searchResult").innerHTML = request.responseText;
51                 }else{
52                     alert("发生错误" + request.status);
53                 }
54             }
55         }
56     }
57 
58     document.getElementById("save").onclick=function(){
59         var request = new XMLHttpRequest();
60         //调用open方法(post方法，地址)把参数直接传到send方法
61         request.open("POST","newPHP.php");
62         //构造参数data
63         var data = "name=" + document.getElementById("staffName").value
64                     + "&number=" + document.getElementById("staffNumber").value
65                     + "&sex=" + document.getElementById("staffSex").value
66                     + "&job=" + document.getElementById("staffJob").value;
67         //设置content-type
68         request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
69         request.send(data);
70         request.onreadystatechange=function(){
71             if(request.readyState === 4){
72                 if(request.status === 200){
73                     document.getElementById("createResult").innerHTML = request.responseText;
74                 }else{
75                     alert("发生错误" + request.status);
76                 }
77             }
78         }
79     }
80 </script>
81 </body>
82 
83 </html>

具体的一些属性比如responseText，一些方法response.open

想要具体了解这些，可以看我之前的一篇：

Ajax_HTTP请求以及响应

posted @ 2017-04-27 11:09  rookieM  阅读(340)  评论(0)  编辑  收藏  举报