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

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

 <?php

 //设置页面内容，编码格式是utf8

 header("Content-Type:text/plain;charset=utf-8");

 //定义一个多维数组，每条员工信息为一个数组

 $staff = array(

     array('name' =>'杰伦' ,'number'=>'01' ,'sex'=>'男' ,'job'=>'总经理' ),

     array('name' =>'弈迅' ,'number'=>'02' ,'sex'=>'男' ,'job'=>'开发经理' ),

     array('name' =>'力宏' ,'number'=>'03' ,'sex'=>'男' ,'job'=>'产品经理' )

 );

 //判断请求方式，如果是get请求则进入search方法，post请求进入create方法

 //$_SERVER是超全局变量，在一个脚本文件的全部作用域都能使用

 //$_SERVER["REQUEST_METHOD"]返回页面使用的请求方法

 if($_SERVER["REQUEST_METHOD"] == "GET") {

     search();//搜索员工

 }elseif ($_SERVER["REQUEST_METHOD"] == "POST") {

     # code...

     create();//新建员工

 }

 //通过员工编号搜索员工

 function search(){

     //检查是否有员工编号的参数

     //issent检测变量是否设置，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) {

         # code...

         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;

     }

     echo "员工：".$_POST["name"]."信息保存成功！";

 }

 ?>

客户端的代码如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <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 for="">请输入员工性别：</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>

 <script type="text/javascript">

     document.getElementById("search").onclick=function(){

         //发送Ajax查询请求并处理

         //新建一个XHR对象

         var request = new XMLHttpRequest();

         //调用open方法(get方法，地址)地址上需要带一些参数

         request.open("GET","newPHP.php?number=" + document.getElementById("keyword").value);

         //使用send()方法发送请求

         request.send();

         //通过onreadystatechange事件来监听请求

         request.onreadystatechange=function(){

             //readyState=4则表示请求结束

             if(request.readyState === 4){

                 //status=200表示请求成功

                 if(request.status === 200){

                     //通过responseText来获取报文并赋给DOM，用来显示查询结果

                     document.getElementById("searchResult").innerHTML = request.responseText;

                 }else{

                     alert("发生错误" + request.status);

                 }

             }

         }

     }

     document.getElementById("save").onclick=function(){

         var request = new XMLHttpRequest();

         //调用open方法(post方法，地址)把参数直接传到send方法

         request.open("POST","newPHP.php");

         //构造参数data

         var data = "name=" + document.getElementById("staffName").value

                     + "&number=" + document.getElementById("staffNumber").value

                     + "&sex=" + document.getElementById("staffSex").value

                     + "&job=" + document.getElementById("staffJob").value;

         //设置content-type

         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("发生错误" + request.status);

                 }

             }

         }

     }

 </script>

 </body>

 </html>

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

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

Ajax_HTTP请求以及响应

Ajax的简单实现的更多相关文章

  1. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

  2. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. 第107天：Ajax 实现简单的登录效果

    使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...

  5. Django ajax的简单使用、自定义分页器

    一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...

  6. AJAX实现简单的注册页面异步请求

    p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...

  7. 让Ajax更简单

    之前写了一篇 ASP.NET中一种超简单的Ajax解决方案 最近把他拿出来更新了下,把demo也搞的更详细了一点 加入了blqw.Json,所以支持更多类型参数和返回值 优化了对exception的处 ...

  8. ASP.NET MVC Ajax.ActionLink 简单用法

    ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...

  9. AJAX 的简单用法：

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以 ...

  10. jquery中ajax的简单使用

    一.load() 这是最简单的一个函数,传入一个url他会异步加载该url的内容,然后将内容插入每一个选中的元素中,替换掉其中已经存在的内容. 所以最简单的用法是: $("#myDiv&qu ...

随机推荐

  1. Cookie测试的测试点

    1.禁止使用Cookie:设置浏览器禁止使用Cookie,访问网页后,检查存放Cookie文件中未生成相关文件: 2.Cookie寻出路径:按照操作系统和浏览器对Cookie存放路径的设置,检查存放路 ...

  2. [UOJ#128][BZOJ4196][Noi2015]软件包管理器

    [UOJ#128][BZOJ4196][Noi2015]软件包管理器 试题描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管 ...

  3. 【noip】noip201503求和（题解可能不完美，但绝对详细）

    3. 求和 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 题目描述   一条狭长的纸带被均匀划分出了n个格子,格子编号从1到n.每个格子 ...

  4. uva 11762 数学期望+记忆化搜索

    题目大意:给一个正整数N,每次可以在不超过N的素数中随机选择一个P,如果P是N的约数,则把N变成N/p,否则N不变,问平均情况下需要多少次随机选择,才能把N变成1? 分析:根据数学期望的线性和全期望公 ...

  5. 标准C程序设计七---13

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  6. android studio AndroidManifest

    一.目录结构 1. AndroidManifest.xml 它是一个清单文件,提供应用的基本信息 <?xml version="1.0" encoding="utf ...

  7. Netty构建游戏服务器(一)--基本概念与原理

    一,Netty是什么 1,Netty是由 JBOSS提供的一个 java开源框架. 2,Netty是JAR包,一般使用ALL-IN-ONE的JAR包就可以开发了. 3,Netty不需要运行在Tomca ...

  8. IntelliJ IDEA常用的快捷键（代码提示/注释代码/加入类注释和方法注释Javadoc）

    说明:IDEA的快捷键非常的多,但是下面这几种快捷键应该是最常用到的. 一.代码提示: [Ctrl]+[空格] 这个通常会与输入法开关冲突,解决方法是屏蔽输入法开关. 二.注释: 1.单行:[Ctrl ...

  9. vueSSR渲染原理

    优点:利于搜索引擎,解决白屏问题,因为正常情况下在index.html文件中只有一个简单的标签,没有内容,不利于爬虫搜索 场景:交互少,数据多,例如新闻,博客,论坛类等 原理:相当于服务端前面加了一层 ...

  10. HDU - 4630 No Pain No Game (线段树 + 离线处理)

    id=45786" style="color:blue; text-decoration:none">HDU - 4630 id=45786" style ...