前期准备

1、安装wampserver或者其他相似软件来搭建本地集成安装环境，我安装的是phpstudy 2、html、js、css等文件需要放置在phps研究中的万维网目录中，默认运行指数页面3、bootstrap.css

界面截图：

phps研究用起来很方便，如果你的电脑没有安装过php，那要先配置系统环境变量，将php.exe(在phps研究的安装目录里找)的路径添加进去，然后在煤矿管理局里输入php -v，出现服务器端编程语言(专业超文本预处理器的缩写)的安装版本等信息则说明安装成功。

然后新建一个项目在phps研究的万维网文件夹下，这里我取名为AjaxDemo。

index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title index/title link rel='样式表href=' https://cdn。bootscs。com/bootstrap/3。3 .7/CSS/bootstrap。量滴CSS '/样式.容器{宽度： 50%;边距-top : 30px；} .文本-危险{ margin-top : 6px；}/style/head body div class=' container ' div class=' panel panel-default ' div class=' panel-heading ' div class=' panel-title '员工查询/div/div class=' panel-body ' div class=' form-横置div class=' form-group ' label class=' col-MD-2 control-label '员工编号：/label div class='col-md-8 '输入类型=' text ' class=' form-control ' id=' keyword '/div class=' col-MD-1 '按钮类='btn btn-primary' id='search '查询/button/div/div class=' form-group '标签类=' col-MD-2控制标签'查询结果：/label p class=' text-danger col-MD-8 ' id=' search result '/p/div/div/div class=' container ' div class=' panel panel-default ' div class=' panel-heading ' div class=' panel-title '员工增加/div/div class=' panel-body ' div class=' form-横置div class=' form-group ' label class=' col-MD-2 control-label '员工编号：/label div class='col-md-8 '输入类型=' text ' class=' form-control ' id=' add-number '/div/div class=' form-group '标签class=' col-MD-2 '控制标签"员工姓名：/label div class='col-md-8 '输入类型=' text ' class=' form-control ' id=' add-name '/div/div class=' form-group ' label class=' col-MD-2 control-label '员工性别：/label div class='col-md-8 '输入类型=' text ' class=' form-control ' id=' add-sex '/div/div class=' form-group ' label class=' col-MD-2 control-label '员工职位：/label div class='col-md-8 '输入类型=' text ' class=' form-control ' id=' add-job '/div/div class=' form-group ' div class=' col-MD-offset-2 col-MD-1 '按钮类=' BTN BTN-主要' id='添加-搜索'增加员工/button/div/div class=' form-group ' label class=' col-MD-2 control-label '结果：/label p class=' text-danger col-MD-8 ' id=' add-result show '/p/div/div/div/script src=' http : staffmanage。 js '/script/body/HTMl staffmann age。射流研究…

实例化埃阿斯可分为五点，比较好记：

1、新一个XMLHttpRequest实例注意兼容低版本的工业管理学(工业工程)浏览器

var xhrif(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest()；} else { xhr=新ActiveX对象(' Microsoft .XMLHTTP’)；} 2、打开(方法、url、asyn) XMLHttpRequest对象的打开()方法有3个参数，第一个参数指定是得到还是开机自检，第二个参数指定统一资源定位器地址，第三个参数指定是否使用异步，默认是没错，所以不用写。

3*若是邮政请求还要加上请求头setRequestHeader("内容类型"、"应用程序/x-www-form-urlencoded”)

4、发送调用发送()方法才真正发送请求获取请求不需要参数，开机自检请求需要把身体部分以字符串或者表单数据对象传进去。

5、onReadyStateChange

6、响应文本

//查询员工方法var okeywood=document。getelementbyid('关键字'),//员工编号oSearchBtn=文档。getelementbyid(' search ')，//查询按钮oSearchRes=文档。getelementbyid('搜索结果')；//反馈结果显示//查询员工按钮点击事件osearchbtn。onclick=function(){ search staff()；} //创建查询员工方法函数search staff(){//var xhr=new XMLHttpRequest()；//标准写法和工业管理学(工业工程)写法混在一起，可以兼容低版本的工业管理学(工业工程)浏览器var xhrif(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest()；} else { xhr=新ActiveX对象(' Microsoft .XMLHTTP’)；} xhr.open('GET '，' serverjson.php？number=' okeywood。值)；xhr。send()；//当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState===4判断请求是否完成，如果已完成，再根据状态===200判断是否是一个成功的响应。xhr。onreadystatechange=function(){ if(xhr。readystate==4){ if(xhr。status=200){ var data=JSON。解析(xhr。response text)；//json解析方法JSON.parse或者eval('(' xhr。responsetext ')')osearchres。innerhtml=数据。味精；} } } } //增加员工var oAddnumber=文档。getelementbyid(' add-number ')，//员工编号oAddname=文档。getelementbyid(' add-name ')，//员工姓名oadsex=文档。getelementbyid(' add-sex ')，//员工性别oAddjob=文档。getelementbyid(' add-job ')，//员工职位oAddSearch=document。getelementbyid(' add-search ')，//增加员工按钮oAddResult=文档。getelementbyid(' add-resultshow ')；//反馈结果显示//增加员工按钮点击事件oaddsearch。onclick=function(){ createStaff()；} //创建增加员工方法函数createStaff(){ var xhr；if(xhr .XMLHttpRequest){ xhr=new XMLHttpRequest()；} else { xhr=新ActiveX对象(' Microsoft .XMLHTTP’)；} xhr.open('POST '，' serverjson。PHP’)；//这里注意键=值的等于号两边不要出现空格，会出现错误var数据=' name=' oaddname。值' number=' oaddnumber。value ' sex=' oaddsex。value ' job=' oaddjob。价值；//在打开和派遣之间设置内容类型xhr。setrequestheader(' Content-Type '，' application/x-www-form-URL编码')；xhr.send(数据);xhr。onreadystatechange=function(){ if(xhr。readystate==4){ if(xhr。status=200){ var data=JSON。解析(xhr。response text)；if(数据。成功){ oaddresult。innerhtml=数据。味精；} else { oAddResult.innerHTML='出现错误：' data.msg} }else{ alert('发生错误!'xhr.status) } } } }serverjson.php

？Php//将页面内容设置为html，编码格式设置为UTF-8头('内容类型：文本/纯文本；charset=utf-8 ')；//标头(' Content-Type:应用程序/JSON；charset=utf-8 ')；//标题(' Content-type : text/XML；charset=utf-8 ')；//标题(' Content-type : text/html；charset=utf-8 ')；//标头(' Content-Type:应用程序/JavaScript；charset=utf-8 ')；//定义包含员工信息的多维数组。每个员工信息都是一个数组$staff=array (array('name'='齐宏'，' number'='101 '，' sex'='男'，' job'='总经理')，array('name'=' 102 '，' sex'='男'，' job'='开发工程师')，array(' name '='黄蓉'，' number'='103 '，' sex'='女'，' job'='产品经理')//判断是否是get请求，搜索；如果是开机自检请求，请创建一个新的。//$_SERVER是一个超级全局变量，可以在脚本的所有范围内使用。如果($ _ SERVER[' REQUEST _ METHoD ']==' get '){ search()；} else if($ _ SERVER[' REQUEST _ METHoD ']==' POST '){ create()；}//按员工号搜索员工函数search(){ //检查是否有员工号的参数//isset检测变量是否设置；空判断值是否为空。//超全局变量$_GET和$_POST用于收集表单数据，如果(！isset($ _ get[' number '])| | empty($ _ get[' number ']){ echo ' { success ' : false，' msg' : '错误参数' } '；返回；}//在函数外声明的变量具有全局作用域，只能在函数外访问。//global关键字用于访问函数中的全局变量global $ staff//GET number参数$ number=$ _ GET[' number ']；$ result=' {'success' : false，' msg' : '未找到员工。'}';//遍历$staff的多维数组，找出键值为number的员工是否存在。如果是，请将返回结果foreach($ staff as $ value){ if($ value[' number ']==$ number){ $ result=' { ' success ' : true。Msg': '找到员工：员工编号：'。$value['number']。员工姓名：'。$value['name']。员工性别：'。$value['sex']。员工职位：'。$ value ['作业。打破；} } echo $结果；}//create employee函数create(){ //判断信息是否填写完整if(！isset($_POST['name']) ||空($_POST['name']) ||！isset($_POST['number']) ||空($_POST['number']) ||！isset($_POST['sex']) ||空($_POST['sex']) ||！isset($ _ post[' job '])| | empty($ _ post[' job ']){ echo ' { success ' : false，' msg' : '参数错误，员工信息不完整' } '；返回；} //TODO:获取POST表单数据保存到数据库//提示保存成功。echo“{ success }”: true，“msg”:“employee:”。$_POST['name']。“信息保存成功！”}';}?摘要

整个过程大致如图所示：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。