前端之AJAX全接触

提示:继续上一节的CSS基础学习,AJAX(Asynchronous JavaScriptandXML)


前言

Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。改变了Web开发的格局。

传统网页(即不使用Ajax技术的网页),想要更新内容或者提交一个表单,就需要重新载入页面。

使用了Ajax技术的网页,通过在后台跟服务器进行少量的数据交换,网页就可以实现异部局部更新。

AJAX 的优势:

不需要插件的⽀持,原⽣ js 就可以使⽤

⽤户体验好(不需要刷新⻚⾯就可以更新数据)

减轻服务端和带宽的负担

AJAX的劣势:

搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索不到

要学习Ajax,我们需要了解三方面,HTML,JS,CSS


提示:以下是本篇文章正文内容,下面案例可供参考

一、Ajax概念介绍

Ajax 全名 async javascript and XML(异步JavaScript和XML),是前后台交互的能⼒,也就是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具。

Ajax的大致操作流程:

在这里插入图片描述
具体操作流程:

  • 首先通过PHP页面将数据库中的数据取出

  • 取出之后转成JSON格式的字符串,后利用Ajax把字符串返还给前台

  • 再利用JSON.parse解析通过循环添加到页面上

  • 那么反之,前端数据可以利用Ajax提交到后台

  • 但是后台是没有办法直接把这些数据插入到数据库中,所以要先提交到PHP页面上

  • 最后再 由 PHP将数据插入到数据库中

1、Ajax-同步和异步

Ajax是⼀个 默认异步执⾏机制的功能,AJAX分为同步(async = false)和异步(async = true)。

同步请求:

同步请求是指当前发出请求后,浏览器什么都不能做, 必须得等到请求完成返回数据之后,才会执行后续的代码。
相当于生活中的排队,必须等待前一个人完成自己的事,后一个人才能接着办。
举个就更具体的例子,就像我们在网上填写关于自己的个人信息,有很多内容,然后我们提交之后才会发现有几个空没有填,然后我们找来找去,填了哪一个之后,又提交,页面又提示我们没有填写完整。
也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。

异步请求:

默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。
举个具体的例子,就像我们在网上填写关于自己的个人信息,有很多内容,然后我们在填写的时候,没有填上的会直接提醒
一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。

2、Ajax-XMLHttpRequest对象

在 js 中有内置的构造函数来创建 Ajax 对象,创建 Ajax 对象以后,我们就使⽤ Ajax 对象的⽅法去发送请求和接受响应。

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象

XMLHttpRequest对象方法描述:

方法描述
abort()停止当前请求
getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回
getAllResponseHeader(“header”)返回指定首部的串值
open(“method”,“URL”,[asyncFlag],['userName"],[“password”])建立对服务器的调用。method参数可以是GET、post或者PUT。URL参数可以是相对URL或绝对URL。这个方法还包括三个可选参数,是否异步,用户名,密码
send(content)向服务器发送请求
setRequestHeader(“header”,'value")把制定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送(‘post’方法一定要)

2.1、创建XMLHttpRequest对象

var xhr=new XMLHttpRequest();
//ie7以上
var request;
if(windows.XMLHttpRequest){
   request=new XMLHttpRequest();
}else{
   request=new ActiveXObject("Microsoft.XMLHTTP");
}
//ie6以下

2.2、Ajax-HTTP请求

之前在博客CTF学习之0基础入门笔记(二)中已经详细解读过,这里稍微再提一下。

HTTP是计算机通过网络进行通信的规则,使我们用户通过浏览器向web服务器请求信息和服务。HTTP是一种无状态(不建立持久联系)协议,也就是服务端不保存建立连接的信息。

一个完整的HTTP请求过程,通常有7个步骤:

1、建立TCP连接

2、Web浏览器向Web服务器发送请求和命令

3、Web浏览器发送请求头信息

4、Web服务器应答

5、Web服务器发送应答头信息

6、Web服务器向浏览器发送数据

7、Web服务器关闭TCP连接

一个HTTP请求一般由四部分组成:

1、HTTP请求的动作或方法,比如是GET或者POST请求

2、正在请求的URL,总得知道请求的地址是什么吧

3、请求头,包含一些客户端换进信息,身份验证信息等

4、请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等

GET:一般用于信息获取,明文对所有人可见,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符。

POST:一般用于修改服务器上的资源,对所发送的信息的数量无限制。

一个HTTP响应一般由三部分组成:

1、一个数字和文字组成的状态码(具体可见CTF学习之0基础入门笔记(二)),用于显示请求是成功还是失败

2、响应头,响应头也和请求头一样包含许多有用的信息,例如服务器类型、日期时间、内容类型和长度等
3、响应体,也就是响应正文

2.3、Ajax-XMLHttpRequest发送请求

1、open(method,url,async)

method:发送请求方法,不区分大小写,一般用大写

url:请求地址,可以是绝对地址,也可以是相对地址

async:代表请求是同步(false)还是异步(ture)

2、send(string)

如果用GET请求,string可以不加参数,或者NULL。

如果是POST请求,string需要填写。

举个例子:

request.open("GET","get.php",true);
request.send();

request.open("POST","post.php",ture);
request.send();

request.open("POST","create.php",ture);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=林翠花&sex=男");

2.4、Ajax-XMLHttpRequest获得响应

responseText:获取字符串形式的响应数据
responseXML:获得XML形式的响应数据
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader():获取所有的响应报头
getResponseHeader():查询响应中的某个字段的值

readyState属性:

0:请求初始化,open还没有调用

1:服务器连接已建立,open已经调用了

2:请求已接收,也就是接收到头信息了

3:请求处理中,也就是接收到响应主体了

4:请求已完成,且响应已就绪,也就是响应完成了

var request=new XMLHttpRequest();//new一下
request.open("GET","get.php",ture);
request.send();//请求
request.onreadystatechange=function(){
if(request.readyState===4&&request.statue===200){//对服务做监听
//做一些事情
request.responseText
}
}

二、Ajax的简单例子(Ajax+PHP)

1、Ajax-例子简介

1、查询员工信息,可以通过输入员工编号查询员工基本信息;
2、新建员工信息,包含员工姓名,员工编号,员工性别,员工职位。

上面这些,我们静态页面可以很好实现,但在这里我们要实现第二个要求,就需要用到了PHP。

首先,纯html页面,用来实现员工查询和新建的页面;
其次,PHP页面,用来实现查询员工和新建员工的后台接口。

1.1、PHP是什么:

PHP是一种创建动态交互性站点服务器端脚本语言

像我们知道的HTML、JS使用在客户端,是浏览器的脚本语言,可以做一些页面的呈现和特效,但是我们开发一个网站,我们要在上面存一些东西,这些明显就满足不了我们的需求。

比如我们开发一个新闻站点,站点比较复杂,每个新闻不可能存在我们的电脑里面,这个不太现实,我们需要有一个地方单独去存储,每个用户通过网站查询自己想要看到的新闻,那么这个存储新闻的地方需要有“存”和“取”这样的功能,这些功能我们一般都会用服务器端脚本语言开发,像是PHP,JAVA,来开发一个后台,然后可能用一个数据库,像是MySQL来存储内容。

而PHP是比较受欢迎的服务器端脚本语言,它本身是开源而且免费使用广泛,比如我们常常用来搭建BLOG的WORDPRESS也是用PHP开发的,而且入门简单

1.2、PHP都能够做什么(几乎兼容所有的web服务器,数据库):

PHP能够生成动态内容;

PHP能够创建、打开、读取、写入、删除以及关闭服务器上的文件;

PHP能够接收表单数据;

PHP能够发送并取回cookie;

PHP能够添加、删除、修改数据库中的数据;

PHP能够限制用户访问网站中的某些页面;

PHP能够对数据进行加密解密;

……

2、Ajax-服务器端实现

2.1、了解了PHP,那么我们怎么来运行PHP:

我们需要有一个Web服务器来运行和承载PHP程序,一般来说我们都会在本地部署一个Web服务器用来测试,通过本地的Web服务器我们可以及时查看我们编写的PHP代码的实际效果,对于初学者来说,建立一个PHP环境比较复杂,最简单的方式就是选择一个一体化的软件包,这里推荐XAMMP(下载地址:https://www.apachefriends.org/download.html),它是一个功能强大的集成软件包,包含了web服务器,apache,MySQL数据库,PHP语言支持。

等XAMMP安装完成之后,我们需要在Dreamweaver配置Web服务器用于本地测试(具体配置方法可点开超链接看看),其实Dreamweaver本身就支持XAMMP的配置。

配置完之后,我们进入DW页面之后,新建一个站点和服务器:

1、点击站点,新建站点。
在这里插入图片描述
2、然后会弹出一个框,站点名字可以自己取,保存的目录,我们需要找到XAMMP文件(我的目录名是XAMMP-shuju)里面的htdocs,然后再在htdocs文件下新建一个文件夹,命名为Ajaxdemo
在这里插入图片描述
3、然后点击左侧 选项框里的服务器,在一个超大框下面有一个小加号,点击一下在这里插入图片描述
4、网络选择本地/网络在这里插入图片描述
5、服务器文件夹选择刚刚第二步的文件夹,Web URL填写http://localhost:8080/Ajaxdemo
在这里插入图片描述
6、点击高级选项,里面的服务器模型选择PHP MySQL。在这里插入图片描述
7、在保存之前,到基本选项框下,将远程的对号取消,勾上测试,再点击保存,这样一个站点就建好了。

下面我们可以在这个新建好的站点下新建一个文件:在这里插入图片描述
1、可以将新文件命名为text.php,输入代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
	<h1>这是一个测试页面
	<?php
		echo "hello world"
	?>
	</h1>
</body>
</html>

2、然后打开浏览器预览,这里就是PHP运行成功后的结果了。在这里插入图片描述
在这里插入图片描述
这里浅略讲解一下刚刚的PHP代码:

PHP脚本以<?php 开头,以?>结尾;

PHP文件的默认文件扩展名是.php;

PHP语句以分号结尾()。

2.2、接着最开始我们说的例子的服务端代码

然后接着最开始我们说的例子,这是服务端代码我在这里给它命名为(service.php):

<?php
/*设置页面内容是html编码格式utf-8,
设置后可以防止页面放返回的值乱码,
header里面就是告诉客户端,我们服务端
响应的内容格式是什么?
*/
header("Content-Type:text/plain;charset=utf-8");//告诉服务器相应的文本格式指什么,这里的格式是纯文本
//header("Content-Type:application/json;charset=utf-8");//格式是json子符串
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-Type:text/html;charset=utf-8");
//header("Content-Type: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和S_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;
	}
	//TODO:获取POST表单数据并保存到数据库
	
	//提示保存成功
	echo "员工:".$_POST['name']."信息保存成功!";	
}
 
?>

3、PHP服务器端代码测试

服务器端的代码我们已经写完了,但是这个代码写的对不对,能不能运行,我们需要进行一下测试,我们需要在没有客户端的情况下,就对服务端的一些请求进行一些测试。

这是怎么做到的呢?我们需要一个工具,叫做Fiddler(具体的Fiddler下载、安装、使用、教程,可点击超链接),它可以监听电脑上所有发出的http请求,监听它们传出的值和响应回来的值,当然在这里面它还可以去模拟。

怎么来使用这个工具呢

1、首先点开右上方的composer在这里插入图片描述2、然后在我们之前建立的服务端的地址给填写里面,这里我们用GET请求,然后点击Execute
在这里插入图片描述
3、然后做左边就会有一条记录,我们双击一下,因为没有参数,这里的运行结果达到了我们的预期;
在这里插入图片描述
在这里插入图片描述
4、接着我们在URL中加入一个参数?number=,然后给number加一个值,我们可以试试1,有在这里插入图片描述
因为我们刚刚约定了三个员工,对应仨个数,分别是101,102,103,而1不属于其中,所以“没有找到员工”,如果我们给1改成102,看看运行结果:在这里插入图片描述
这也就是说,我们的GET请求服务端是没有问题的,接着我们换一个POST请求,这里要注意,我们在前面说过,post请求
需要加上Content-Type:application/x-www-form-urlencoded(告诉服务器这是一个post请求,请求的内容是通过URL这种方式发送过来的),因为是POST请求,我们这里不需要参数,然后我们直接调用一下,发现返回错误。在这里插入图片描述
为什么呢?因为我们压根就没有填写,这里我们要填写一下信息:name=欧阳锋&number=104&sex=男&job=测试经理,也就是我们的请求正文,
在这里插入图片描述

然后我们运行一下,可以看到服务器还是返回出了结果。
在这里插入图片描述

4、客户端实现

说完了服务端的实现,我们现在来讲讲客户端的实现。

客户端的实现,首先我们需要新建一个文件,我们在DW中新建一个HTML的静态页面,把它做一个保存。

在这里插入图片描述
我们要实现不仅仅是这一个静态页面,我们要创建的是要通过上面的按钮来使用Ajax异步的方式发送请求,调用后台的服务方法,然后把服务方法返回来的值显示在页面上,这个显示是局部刷新这样的结果内容。那么,这样需要怎么做呢?

其实我们前面已经提到了,核心就是创建XMLHttpRequest对象,并发送异步请求,接着监听服务器的响应结果,并把它呈现在页面上。

主要分为两个部分,一个是员工查询,一个是员工创建,具体代码如下:

<!dOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax的demo</title>
<style type="text/css">
	body,input,button,select,h1{
		font-size: 15px;
		line-height: 1.2;
	}
</style>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<br />
<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>请选中员工性别:</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查询请求并处理
		var request = new XMLHttpRequest();
		request.open("GET","service.php?number="+document.getElementById("keyword").value);//因为我将前面的服务端PHP代码和我这个客户端HTML代码放在了一个目录下,所以就直接写了,要注意这个请求还需要带一个地址,地址上还需要带一个参数,也就是员工编号参数number,那number又是从上面员工查询下面的keyword来取的,所以说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()
	{
		// alert(1);
		//发送Ajax查询请求并处理
		var request = new XMLHttpRequest();
		request.open("POST","service.php");//open方法第三个参数不用传,默认异步
		var data = "name=" + document.getElementById("staffName").value
		           + "&number=" + document.getElementById("staffNumber").value
		           + "&sex=" + document.getElementById("staffSex").value
		           + "&job=" + document.getElementById("staffJob").value;
		 //设置http头信息,告诉web服务器我们发送的是一个表单,然后才能发送,必须位置open和send方法之间          
		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>

运行一下可以得到:
在这里插入图片描述

三、JSON格式

1、JSON基本概念

JSON:JavaScript对象表示法(JavaScript Object Notation)。

JSON是存储和交换文本信息的语法,类似于XML。它采用键值对的方式来组织,易于人们阅读和编写,同事也易于及其解析和生成。

JSON是独立于语言的,也就是不管什么语言,都可以解析JSON,只需要按照JSON的规则来就行。

1.1、JSON与XML比较:

1、JSON的长度和XML格式比起来很短小,在网络传输的过程中,可以大大的减少带宽;

2、JSON读写的速度更快;

3、JSON可以使用JavaScript内建的方法直接进行解析,转换成JavaScript对象,十分方便。

1.2、JSON语法规则

JSON数据的书写格式是:名称/值对。(数据要用英文逗号来分隔
名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:比如“name”:“郭靖”,这里和JavaScript不一样,JavaScript不需要加引号。

JSON的值还可以是下面这些类型:

数字(整数或者浮点型),比如123,1.23;

字符串(在双引号中);

逻辑值(ture或false);

数组(在方括号中);

对象(在花括号中);

null(表示这个键值没有值)。

{
   "staff":[
   //staff是名称,这里的数组是值对,这个数组又是有三个小的阶层对象组成,每个对象里面又有两个属性
        {"name":"洪七","age":70},
        {"name":"郭靖","age":35},
        {"name":"黄蓉","age":30},
   ]
}

2、JSON解析、格式化和校验工具

那么JSON的格式怎么在js中解析呢,一般来说js中解析JSON有两种方式,eval和JSON.parse,我们在浏览器的控制台中演示这两种方式。

2.1、JSON解析

2.1.1、eval的演示:

首先我们建立一个JSON字符串,注意放在一行里面,否则会报错,然后建立一个jsonobj,我们通过eval的方式解析这样的一个JSON字符串。
怎么样来解析呢?通过eval( '(' + jsondata + ')')。解析之后呢?我们可以alert其中的一个属性,比如staff,因为staff是一个数组,所以我们可以取它的数组中的第一个值,name,然后会弹出来一个图片演示中的洪七,这就是解析成功了。

var jsondata = '{"staff":[{ "name":"洪七","age":70 },{ "name":"郭靖","age":35 },{ "name":"黄蓉","age":30 }]}';
var jsonobj = eval( '(' + jsondata + ')');
alert(jsonobj.staff[0].name);

在这里插入图片描述

2.1.2、JSON.parse的演示

JSON.parse的方式效果其实和eval差不多,只需要注意第二行的改变。

var jsondata = '{"staff":[{ "name":"洪七","age":70 },{ "name":"郭靖","age":35 },{ "name":"黄蓉","age":30 }]}';
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

在这里插入图片描述

2.1.3、那么这两种方式我们选哪一个呢?

再给大家举个例子:

假如说我们把这个JSON字符串稍微做一下改动,把里面的里面洪七的age的70改成alert(123),这时候我们使用eval的方法来看一下:

var jsondata = '{"staff":[{ "name":"洪七","age":alert(123) },{ "name":"郭靖","age":35 },{ "name":"黄蓉","age":30 }]}';
var jsonobj = eval( '(' + jsondata + ')');
alert(jsonobj.staff[0].name);

运行之后会发现,先弹出123,点击确认,然后弹出洪七。这说明eval解析的方式,不光解析了JSON字符串,而且还执行了JSON字符串里面的一些方法

在这里插入图片描述在这里插入图片描述
但是用第二种方式呢?

var jsondata = '{"staff":[{ "name":"洪七","age":alert(123) },{ "name":"郭靖","age":35 },{ "name":"黄蓉","age":30 }]}';
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

大家会发现什么都不弹出来了,在控制台还弹出了错误,告诉我们这样写不合法,语法错误。在这里插入图片描述
也就是说eval解析中不会去看我们JSON字符串是否合法,而且JSON字符串里的一些方法会直接执行,这是非常的危险,作为js程序员要牢记在代码中,无论何时我们使用eval方法时都是非常危险的,除非我们可以确保eval中的参数是可以控制的,安全的,尤其是我们用eval去解析第三方的JSON数据有可能会包含恶意代码,而且JSON.parse还可以给我们汇报一些关于JSON字符串里面的错误,既安全又方便,所以我们在实际应用中最好使用JSON.parse

2.2、JSON的格式化,校验

虽然JSON的这种格式比较简短,语法也比较的简单,但是我们在写起来的时候有很多的符号,非常容易出错,所以把JSON字符串进行格式化,校验,就显得必不可少。

这里我推荐一款在线的JSON校验工具JSONLint(地址:jsonlint.com).

我们把刚才的JSON字符串{"staff":[{ "name":"洪七","age":alert(123) },{ "name":"郭靖","age":35 },{ "name":"黄蓉","age":30 }]}拿过来,粘贴在里面,直接点击校验(validate JSON),它就能直接校验出我们JSON字符串里的语法错误,比如说alert(123),这肯定是不行的。

在这里插入图片描述
然后我们给alert(123)改成70,就通过了。
在这里插入图片描述
接着我们就把刚才的例子用JSON的方式去改写一下,在改写之前,我们做一个格式上的约定,我们约定所有从服务器上返回的JSON字符串应该长成:

{
    "success": true,
    "msg": "xxx"
}

它有两个属性,一个是success,它代表是否成功,这个成功不是我们刚刚指的请求是否出错,而是代表是否正确的去执行,比如说我们的参数错误,就代表不成功,说明我们的参数就没有给全,更别提执行了,当我们参数正确的情况下,能正确执行之后,我们这个返回的成功应该是true,也就是这是我们逻辑成功的一个标志。在我们使用AJAX来进行服务器请求和服务器响应的过程中,我们经常会做这样的一个标记的约定。一般我们把这个success作为请求是否成功,把msg作为请求的返回值,甚至我们还可以再加上一些属性,比如说data,作为请求返回的数据,而msg只作为success为false时的给出的一些错误信息,或者我们可以把msg改为errormsg等等。

这个约定是要前后都遵守,而且都按照这个约定来编程,这样就可以大大简化我们的一些错误的判断。

这里我们就简单的用success代表是否正确,而msg代表返回的信息,要做到这一点,我们需要对服务端进行一些小小的改造,如何改造呢?我们将之前所有的返回值都采用{"success":false/true,"msg":"返回的信息"}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>service</title>
</head>

<body>
	<?php
/*设置页面内容是html编码格式utf-8,
设置后可以防止页面放返回的值乱码,
header里面就是告诉客户端,我们服务端
响应的内容格式是什么?
*/
//header("Content-Type:text/plain;charset=utf-8");//告诉服务器相应的文本格式指什么,这里的格式是纯文本
header("Content-Type:application/json;charset=utf-8");//格式是json子符串
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-Type:text/html;charset=utf-8");
//header("Content-Type: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和S_POST用于收集表单数据
	if(!isset($_GET["number"]) || empty($_GET["number"]))
	{
		echo '{"success":false,"msg":"参数错误"}';
		return;
	}
 
	//函数之外声明的变量拥有Global作用域,只能在函数以外进行访问.
	//global关键字用于访问函数内的全局变量
	global $staff;
 
	//获取number参数
	$number = $_GET["number"];
	$result = '{"success":false,"msg":"没有找到员工"}';
 
	//遍历$staff多维数组,查询key值为number的员工是否存在,如果存在,则修改返回结果
	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":true,"msg":"参数错误,员工信息填写不全"}';
		return;
	}
	//TODO:获取POST表单数据并保存到数据库
	
	//提示保存成功
	echo '{"success":true,"msg":"员工:'.$_POST['name'].'信息保存成功!"}';	
}
 
?>
</body>
</html>

下面改造我们的客户端:
怎么改造呢?我们客户端就不能直接输出服务器端的JSON文本,如果直接输出会出现下面图片中的情况:
在这里插入图片描述
我们会直接把这个服务器端返回的JSON字符串直接显示出来,这样对于用户使用很不友好,我们需要判断是否成功,来显示对应的内容。怎么判断呢?要想判断我们需要声明一个变量,然后去parse服务器端传来的内容,parse之后,直接读取属性,JSON字符串成了JSON对象,我们就可以进行判断。

<!dOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax的demo</title>
<style type="text/css">
	body,input,button,select,h1{
		font-size: 15px;
		line-height: 1.2;
	}
</style>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<br />
<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>请选中员工性别:</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查询请求并处理
		var request = new XMLHttpRequest();
		request.open("GET","service.php?number=" + document.getElementById("keyword").value);//因为我将前面的服务端PHP代码和我这个客户端HTML代码放在了一个目录下,所以就直接写了,要注意这个请求还需要带一个地址,地址上还需要带一个参数,也就是员工编号参数number,那number又是从上面员工查询下面的keyword来取的,所以说number的参数取值是document.getElementById("keyword").value
		request.send();//发出请求
		//监听事件
		request.onreadystatechange = function()
		{
			if(request.readyState === 4)
			{
				if(request.status === 200)
				{
					var data = JSON.parse(request.responseText);
					if(data.success){
						document.getElementById("searchResult").innerHTML = data.msg;
					}else{
						document.getElementById("searchResult").innerHTML = "出现错误:" + data.msg;
					}
					//都成功后更新页面信息,获取服务器响应结果然后赋值页面标签
					
				}
				else
				{
					//抛异常,弹出错误码
					alert("发生错误:" + request.status);
				}
			}
		}
	}
 
	//创建员工
	document.getElementById('save').onclick = function()
	{
		// alert(1);
		//发送Ajax查询请求并处理
		var request = new XMLHttpRequest();
		request.open("POST","service.php");//open方法第三个参数不用传,默认异步
		var data = "name=" + document.getElementById("staffName").value
		           + "&number=" + document.getElementById("staffNumber").value
		           + "&sex=" + document.getElementById("staffSex").value
		           + "&job=" + document.getElementById("staffJob").value;
		 //设置http头信息,告诉web服务器我们发送的是一个表单,然后才能发送,必须位置open和send方法之间          
		request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		request.send(data);//发出请求
		//监听事件
		request.onreadystatechange = function()
		{
			if(request.readyState === 4)
			{
				if(request.status === 200)
				{
					var data = JSON.parse(request.responseText);
					if(data.success){
						document.getElementById("createResult").innerHTML = data.msg;
					}else{
						document.getElementById("createResult").innerHTML = "出现错误:" + data.msg;
					}
					//都成功后更新页面信息,获取服务器响应结果然后赋值页面标签
					
				}
				else
				{
					//抛异常,弹出错误码
					alert("发生错误:" + request.status);//服务器地址错误会返回错误码
				}
			}
		}
	}
 
 
</script>
 
</body>
</html>

四、jQuery中的AJAX

了解了Ajax本身的原理,也了解了JSON字符串来进行信息的传递,通常来说呢,我们不会直接的原生的去实现Ajax请求,我们常常会在页面中用第三方的Ajax库,比如jQuery之类的,这些Ajax库已经封装了类似于Ajax请求的方法,这样我们在实际请求中可以不用再去关注浏览器的兼容性和实现,也可以很方便的调用这些第三方库里面的这一些方法,可以大大的简化我们的操作,这里我们以jQuery为例介绍一下怎么实现Ajax。

jQuery本身提供了一个Ajax方法,用这方法就可以实现Ajax请求,如何来实现呢?其实jQuery的Ajax给出了很多设定值。我们可以通过一个常用的设定值,就可以完成一个简单的请求,并且来得知它是不是成功,还是失败。

下面列出了Ajax方法非常常用的一些设置:

type:类型,“POST”或“GET”,默认为“GET”

url:发送请求的地址

data:是一个对象,连同请求发送到服务器的数据

dataType:预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,一般我们采用JSON格式,可以设置为“JSON”

success:是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串

error:是个方法,请求失败时调用此函数。传入XMLHttpRequest对象

那么,我们用jQuery来改写一下刚才的例子(这里我就不下载jQuery的库到本地了,我们直接引用一个在线的地址,这个在线的地址在BootCDN的静态资源库,它包含了我们常用的一些库,比如我们的jQuery),引用了之后呢,我们需要对jQuery进行初始化,我们采用这个方法$(document).ready(function(){ });,也就是页面载入完毕之后,我们执行内部的一些事情。

<!dOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax的demo</title>
<style type="text/css">
	body,input,button,select,h1{
		font-size: 15px;
		line-height: 1.2;
	}
</style>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<br />
<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>请选中员工性别:</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 src="http://apps.bdimg.com/libs/jquery/1.11./jquery.js"></script>
<script>
$(document).ready(function(){
    $("#search").click(function(){
		$.ajax({
			type:"GET",
			url:"service.php?number=" + $("keyword").val(),
			dataType:"json",
			success:function(data){
				if(data.success){
					$("#searchResult").html(data.msg);
				}else{
					$("#searchResult").html("出现错误" + data.msg);
				}
			},
			error:function(jqXHR){
				alert("发生错误:" + jqXHR.status);
			}
		});
	});
	$("#save").click(function(){
		$.ajax({
			type:"POST",
			url:"service.php",
			dataType:"json",
			data:{
				name:$("#staffName").val(),
				number:$("#staffNumber").val(),
				sex:$("#staffSex").val(),
				job:$("#staffJob").val(),
			},
			success:function(data){
				if(data.success){
					$("#createResult").html(data.msg);
				}else{
					$("#createResult").html("出现错误" + data.msg);
				}
			},
			error:function(jqXHR){
				alert("发生错误:" + jqXHR.status);
	
});
	
 
</script>
 
</body>
</html>

五、跨域

一个域名地址的组成:

http://        www        .       abc,com    :      8080       /       scripts/jquery.js
协议          子域名                主域名            端口号              请求资源地址

1、处理跨域方式–代理

当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。
不同域直接相互请求资源,就算做“跨域”,比如:http://www.abc.com/index.html请求http://www.efg.com/service.php

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。什么是跨域呢?简单的理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或者是c.a.com域名下的对象

www.abc.com/index.html 调用 www.abc.com/service.php (非跨域)

www.abc.com/index.html调用 www.efg.com/service.php (跨域)

www.abc.com/index.html调用 bbs.abc.com/service.php (跨域)

www.abc.com/index.html调用www.abc.com:81/service.php(跨域)

www.abc.com/index.html调用 https://www.abc.com/service.php(跨域)

再补充说明一下子域名这个概念。

比如我们有一个主域名abc.com,那么它的子域名有多种,也可以是很多级,比如二级,或者比如三级。这些都统称为它的子域名。那么它的子域名只要不相同,都会被认作为跨域

那我们处理跨域都有哪些方法呢?因为这是一个非常常见的问题。我们总是需要跨域来访问,当我们网站比较大的时候,可能要全国都要去部署。可能我们一个服务器在上海,一个服务器在北京,一个在广州,一个在深圳,甚至于一个在国外,那么处理跨域第一个最常见的方法,就是在同域名的Web服务器上,创建一个代理。比如说我们北京的Web服务器,往北京要想调用上海的服务,我们不从前端直接调用上海服务,我们从前端直接调用北京的同名服务。举个例子来说,在上海服务器上,有一个服务,那我们在北京服务器上也建一个这个服务。北京这个服务干什么呢?其实是从后端访问上海的这个服务,然后把服务的响应值获取过来,返回给前端,也就是北京的这个服务是在后端做了一个代理,这样前端只需要访问北京的这样一个代理的服务,也就相当于访问了上海这样一个服务。当然这种代理已经属于后台的技术。

2、处理跨域方式–JSONP

处理跨域呢,还有第二个方法,就是处理JSONP。JSONP呢?可以去解决主流浏览器他们的get请求,跨越数据访问的问题。
它的原理是什么呢?它的原理是这样的。

在www.aaa.com页面中:
<script>
function jsonp(json){
     alert(json["name"]);
}
</script>
<script src="http://www.bbb.com/jsonp.js"></script>
在www.bbb.com页面中;
jsonp({'name':'洪七','age':24});

在某个域名的页面中,我们可以这样声明一段js代码。也就是我们定义这样一个方法。然后在下面呢我们可以去载入另外一个域名上面的js,也就是说就是说我们scrip这样一个标签,它是可以向不同的那个命名去提交HTTP请求的。然后载入了另外一个域名,这个js方法呢它可能是直接去调用第一个域名上面声明的这样一个方法,也就是说对域名去声明,避免去调用。

其实这种处理方式和我们的XMLHttpRequest,这样一个Ajax方式就没有太大关系。它只是借用了这个scrip这样一个标签节点,它可以跨域去访问,去获取的一个特性。

我们我们来看一看怎么样来使用。使用的方法非常简单,在get请求这一段代码中,我们需要修改一下dataType,把它从json改为jsonp,接着我们再增加一个属性,这个属性名字就叫jsonp。而它的值我们可以任意写,比如在这里我们写上callback。

<!dOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax的demo</title>
<style type="text/css">
	body,input,button,select,h1{
		font-size: 15px;
		line-height: 1.2;
	}
</style>
</head>
<body>
	<h1>员工查询</h1>
	<label>请输入员工编号:</label>
	<input type="text" id="keyword">
	<br />
	<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>请选中员工性别:</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 src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script>
	$(document).ready(function(){
		$("#search").click(function(){
			$.ajax({
				type:"GET",
				url:"http://http://127.0.0.1:8080/Ajaxdemo/service.php?number=" + $("#keyword").val(),
				dataType:"jsonp",
				jsonp:"callback",
				success:function(data){
					if(data.success){
						$("#searchResult").html(data.msg);
					}else{
						$("#searchResult").html("出现错误" + data.msg);
					}
				},
				error:function(jqXHR){
					alert("发生错误:" + jqXHR.status);
				}
			});
		});
		$("#save").click(function(){
			$.ajax({
				type:"POST",
				url:"http://http://127.0.0.1:8080/Ajaxdemo/service.php",
				dataType:"json",
				data:{
					name:$("#staffName").val(),
					number:$("#staffNumber").val(),
					sex:$("#staffSex").val(),
					job:$("#staffJob").val(),
				},
				success:function(data){
					if(data.success){
						$("#createResult").html(data.msg);
					}else{
						$("#createResult").html("出现错误" + data.msg);
					}
				},
				error:function(jqXHR){
					alert("发生错误:" + jqXHR.status);
				}
			});
		});
   
	});


	</script>
 
</body>
</html>

也就是说我们对代码做了两处改动,第一处改动把dataType从json改成了jsonp,第二处改动是增加了一个jsonp的属性,把它起了一个值,叫callback,当然我们也可以起任意值callback123等等。

这是对前端的改造。

我们同样在这个get请求的处理中,获取到callback。为什么这里是back呢?注意我们在前端把这个参数取的名字是callback,所以我们后端需要获取到它,如果我们在前端把这个参数取的名字是callback123,那么我们后端就需要获取callback123。也就是说这个值是我们参数的名称。

那么我们要对返回值做一个改造。刚才我们也介绍了jsonp这样一种方式,我们的返回值需要用括号把我们要返回的json对象的值用括号括起来,前面加上我们获取到的这个参数的值。同样的,上面也是这样操作。大家注意php代码中连接字符串使用点号,不像我们js代码中用的是加号,这一点需要大家去注意。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>service</title>
	</head>

<body>
	<?php
/*设置页面内容是html编码格式utf-8,
设置后可以防止页面放返回的值乱码,
header里面就是告诉客户端,我们服务端
响应的内容格式是什么?
*/
//header("Content-Type:text/plain;charset=utf-8");//告诉服务器相应的文本格式指什么,这里的格式是纯文本
header("Content-Type:application/json;charset=utf-8");//格式是json子符串
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-Type:text/html;charset=utf-8");
//header("Content-Type: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()
{
	$jsonp = $_GET["callback"];
	//检查是否有员工编号的参数
	//isset检测变量是否设置;empty判断值是否为空
	//超全局变量$_GET和S_POST用于收集表单数据
	if(!isset($_GET["number"]) || empty($_GET["number"]))
	{
		echo '{"success":false,"msg":"参数错误"}';
		return;
	}
 
	//函数之外声明的变量拥有Global作用域,只能在函数以外进行访问.
	//global关键字用于访问函数内的全局变量
	global $staff;
 
	//获取number参数
	$number = $_GET["number"];
	$result = $jsonp.'({"success":false,"msg":"没有找到员工"})';
 
	//遍历$staff多维数组,查询key值为number的员工是否存在,如果存在,则修改返回结果
	foreach ($staff as $value) {
		if($value["number"] == $number)
		{
			$result = $jsonp.'({"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;
	}
	//TODO:获取POST表单数据并保存到数据库
	
	//提示保存成功
	echo '{"success":true,"msg":"员工:'.$_POST['name'].'信息保存成功!"}';	
}
 
?>
</body>
</html>

后台代码就改造完了,我们刷新页面试一下吧。

大家会发现我们在这里实现跨域只是对get的请求进行了改造。并没有去改造post请求,这是什么原因呢?其实,就是这种原理大家也已经发现了,它只能对get的请求起到效果。

3、处理跨域方式–XHR2

HTML5为我们提供的XMLHttpRequest Level2已经实现了跨域访问已经其他的一些新功能,但是十分可惜,IE10以下版本还没有提供这样一个XMLHttpRequest的支持,并不是说IE10以下不支持,而是不支持XMLHttpRequest Level2的这样一个新版本的支持,如果你忽略IE,当然就可以采用这样一个方法。

这个这个方法非常简单。我们在服务器端把刚才的改动给撤销,然后回到服务端,做一些小小的改动即可。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>service</title>
	</head>

<body>
	<?php
/*设置页面内容是html编码格式utf-8,
设置后可以防止页面放返回的值乱码,
header里面就是告诉客户端,我们服务端
响应的内容格式是什么?
*/
//header("Content-Type:text/plain;charset=utf-8");//告诉服务器相应的文本格式指什么,这里的格式是纯文本
header("Content-Type:application/json;charset=utf-8");//格式是json子符串
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-Type:text/html;charset=utf-8");
//header("Content-Type: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和S_POST用于收集表单数据
	if(!isset($_GET["number"]) || empty($_GET["number"]))
	{
		echo '{"success":false,"msg":"参数错误"}';
		return;
	}
 
	//函数之外声明的变量拥有Global作用域,只能在函数以外进行访问.
	//global关键字用于访问函数内的全局变量
	global $staff;
 
	//获取number参数
	$number = $_GET["number"];
	$result = '{"success":false,"msg":"没有找到员工"}';
 
	//遍历$staff多维数组,查询key值为number的员工是否存在,如果存在,则修改返回结果
	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;
	}
	//TODO:获取POST表单数据并保存到数据库
	
	//提示保存成功
	echo '{"success":true,"msg":"员工:'.$_POST['name'].'信息保存成功!"}';	
}
 
?>
</body>
</html>

总结

这里就是AJAX的全部介绍,下面前端继续扬帆起航!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
管理系统前端是一个重要的任务,它可以通过使用JavaScriptAJAX技术来实现。在前端开发中,JavaScript是一种用于在网页上添加动态功能和交互性的编程语言,而AJAX是一种用于在不刷新整个网页的情况下向服务器发送和接收数据的技术。 通过使用前端JavaScriptAJAX,我们可以实现以下功能: 1. 数据交互:通过AJAX技术,我们可以在不刷新整个页面的情况下向服务器发送请求,获取数据并将其显示在页面上。这使得管理系统能够实时更新数据,并与用户的操作保持同步。 2. 表单验证:在管理系统中,通常会涉及到大量的表单输入。通过使用JavaScript来验证表单数据的有效性,我们可以确保用户输入的数据符合我们的要求,并在用户提交表单之前进行必要的验证。 3. 动态加载内容:在管理系统中,我们可能需要在页面上显示大量的数据,而不是在一开始就将所有内容加载到页面中。通过使用AJAX技术,我们可以实现在用户请求时动态加载内容,从而提高页面的加载速度和用户体验。 4. 异步提交数据:在管理系统中,我们可能需要将用户的数据提交到服务器进行处理。通过使用AJAX技术,在用户提交数据时,我们可以在后台发送请求并处理数据,而无需刷新整个页面。 总而言之,管理系统前端使用JavaScriptAJAX可以为用户提供实时更新数据、表单验证、动态加载内容和异步提交数据等功能。这些功能将使管理系统更加高效和用户友好。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值