Ajax 使用ajax加上get和post方法，通过后台加载数据，并在网页上进行显示案例+解释

Posted IT_Holmes

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax 使用ajax加上get和post方法，通过后台加载数据，并在网页上进行显示案例+解释 相关的知识，希望对你有一定的参考价值。

文章目录

学习Ajax之前必须有html，CSS，JS，jQuery(了解)的相关知识。

1.什么是Ajax？

Ajax在前端主要的功能是获取服务器的数据。

经常使用Ajax来进行异步加载，也就是不影响整个窗口的前提下，进行页面部分的加载改变。

Ajax异步!!!，Ajax的全称自然就是：Asynchronous(异步) javascript And XML

2.Ajax的使用 Get方法

在学习php基础语法时候，我们通过跳转到一个新的页面来实现，就像php语法的第7节一样。下面我们使用Ajax来，直接请求服务器发送数据，不需要跳转一个新的页面。

在元素JS中来实现Ajax主要的类就是XMLHttpRequest，它的使用一般有四个步骤：

1.创建XMLHttpRequest对象
2.准备发送网络请求
3.开始发送网络请求
4.指定回调函数

这里使用ajax，能够识别用户名是否已存在的例子：
例如：
首先，在wamp后台中，创建一个checkUsername.php，作为一个判断文件。

<?php 

	$username = $_GET["username"];
	//这里应该查询数据库，这里只是一个模拟数据库
	if($username == 'zhangsan'){
		echo "username exists";
	}else{
		echo "username OK";
	}

 ?>

再在wamp中，创建一个register.html，来作为前端访问的页面：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册界面</title>
	<script type="text/javascript">
		window.onload = function(){
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				var username = document.getElementById("username").value;
				//使用JS代码进行checkUsername.php这个文件的访问，将Username传递给这个文件
				//从这开始就使用ajax来操作了。
			//<!--第一步：创建XMLHttpRequest对象-->
				var xhr = new XMLHttpRequest();
			//<!--第二步：准备发送-->
				//这里的open方法有三个参数。
				//第一个参数，使用的什么方法。
				//第二个参数url，这里因为是get请求，所以url后面是要跟上参数的！！！
				//第三个参数，同步还是异步，true异步，false同步
				xhr.open("get","checkUsername.php?username="+username,true);
			//<!--第三步：执行发送-->
				xhr.send(null);
			//<!--第四步：指定回调函数-->
				xhr.onreadystatechange = function(){
					//responseText返回的是字符串
					var result = xhr.responseText;
					console.log(result);
					document.getElementById("result").innerText = result;
				};
			};
		};
	</script>
</head>
<body>
	<h1>注册界面</h1>
	<form action="register.php" method="get">
		用户名：<input type="text" name="username" id="username">
			<input type="button" value="验证用户名" id="btn">
			<span id="result"></span>
			<br>
		密码：<input type="password" name="password">
			<input type="submit" name="" value="提交">
	</form>
</body>
</html>

多看注释！！！！来理解代码。

3.Ajax的使用 Post方法

和上面一样，直接上例子，一定看注释！！

创建一个register.html，来作为前端访问的页面：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册界面</title>
	<script type="text/javascript">
		window.onload = function(){
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				var username = document.getElementById("username").value;
				//使用JS代码进行checkUsername.php这个文件的访问，将Username传递给这个文件
				//从这开始就使用ajax来操作了。
			//<!--第一步：创建XMLHttpRequest对象-->
				var xhr = null
				//由于IE6以下的版本是没有XMLhttpRequest这个对象的，所以做一个兼容性判断。
				if (window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				}else{
					//IE6以下版本，都是使用ActiveXObject
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			//<!--第二步：准备发送-->
				//这里的open方法有三个参数。
				//第一个参数，使用的什么方法。
				//第二个参数url，这里因为是get请求，所以url后面是要跟上参数的！！！
				//第三个参数，同步还是异步，true同步，false异步,默认异步
				// xhr.open("get","checkUsername.php?username="+username,true);
				xhr.open("post","checkUsername.php",true);
			//<!--第三步：执行发送-->
				//对于post请求，参数应该放到请求体当中
				var param = "username=" + username
				//设置xhr请求头信息，这个步骤仅仅是针对于post请求才有的！！！
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				xhr.send(param);
			//<!--第四步：指定回调函数-->
				xhr.onreadystatechange = function(){
					//readyState等于4代表的是xhr的完成相应
					if(xhr.readyState == 4){
						//status等于200，代表正常
						if(xhr.status == 200){
							//除了responseText还有xhr.responseXML,就是不同的格式。
							var result = xhr.responseText;
							console.log(result);
							document.getElementById("result").innerText = result;
						}
					}
				};
			};
		};
	</script>
</head>
<body>
	<h1>注册界面</h1>
	<form action="register.php" method="post">
		用户名：<input type="text" name="username" id="username">
			<input type="button" value="验证用户名" id="btn">
			<span id="result"></span>
			<br>
		密码：<input type="password" name="password">
			<input type="submit" name="" value="提交">
	</form>
</body>
</html>

对readyState和status的解释：

在这里插入图片描述

另一个不变，checkUsername.php

<?php 

	$username = $_POST["username"];
	//这里应该查询数据库，这里只是一个模拟数据库
	if($username == 'zhangsan'){
		echo "username exists";
	}else{
		echo "username OK";
	}

 ?>

这里解释以下，第2步骤，准备发送阶段的open方法中的服务端地址如何确定，一般开发人员会提供一份接口文档,里面会详细的告诉你地址参数什么的。

4.使用Ajax完成唯一性案例操作

话不多说，直接上代码。

创作一个register.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>register</title>
	<script type="text/javascript">
		window.onload = function(){
			var username = document.querySelector("#username");
			var email = document.querySelector("#email");
			var phone = document.querySelector("#phone");

			//onblur,事件在对象失去焦点时发生。
			username.onblur = function(){
				var usernameValue = username.value;
				console.log(usernameValue);
				//这里比较用户名username和服务器数据库里面内容。
				//往后使用ajax来实现。
				var xhr = null;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.open("get","./server/checkUsername.php?uname="+usernameValue,true);
				xhr.send(null);
				xhr.onreadystatechange = function(){
					if (xhr.readyState==4) {
						if (xhr.status==200) {
							//responseText返回的是字符串
							//responseXML返回的是XML格式
							var result = xhr.responseText;
							console.log(result);
							var username_result = document.querySelector("#username_result");
							if (result == "NO") {
								username_result.innerText = "user已经注册！！";
							}else{
								username_result.innerText = "user可以使用。";
							}
						}
					}
				}
			};

			email.onblur = function(){
				var emailValue = email.value;
				var xhr = null;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					xhr = ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.open("post","./server/checkEmail.php",true);

				var param = "e="+ emailValue;
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xhr.send(param);

				xhr.onreadystatechange = function(){
					if (xhr.readyState==4 && xhr.status==200) {
						var result = xhr.responseText;
						var email_result = document.querySelector("#email_result");
						if (result==0) {
							email_result.innerText = "邮箱可用";
						}else{
							email_result.innerText = "邮箱不可用";
						}
					}
				};
			};

			phone.onblur = function(){
				var phoneValue = phone.value;

				var xhr = null;
				if (window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.open("post","./server/checkPhone.php",true);
				
				var param = "phonenumber="+phoneValue;
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xhr.send(param);

				xhr.onreadystatechange = function(){
					if (xhr.readyState==4) {
						if (xhr.status==200) {
							//xhr.responseText是一个字符串
							var result = xhr.responseText;
							//如果得到的像一个字符串形式，可以把他转化为对象，方便我们获取里面的值。
							resultObject = JSON.parse(result)
							var phone_result = document.querySelector("#phone_result")
							if (resultObject.status == 0 ) {
								//代表手机号码可用
								phone_result.innerText = resultObject.message.tips+","+resultObject.message.phonefrom;
							}else if (resultObject.status == 1) {
								//代表手机号码不可用
								phone_result.innerText = resultObject.message;
							}
						}
					}
				}
			};

		}
	</script>
</head>
<body>
	<h1>注册界面</h1>
	<form action="">
		用户名：<input type="text" id="username"><span id="username_result"></span><br>

		邮箱：<input type="text" id="email"><span id="email_result"></span><br>

		手机号码：<input type="text" id="phone"><span id="phone_result"></span>
	</form>
</body>
</html>

再准备三个服务器php文件，

checkEmail.php：

<?php 
	$email = $_POST["e"];
	if ($email == 'xxx@qq.com') {
		echo '1';
	}else{
		echo '0';
	}
 ?>

checkPhone.php文件：

<?php 
	$phone = $_POST["phonenumber"];

	if ($phone == '139') {
		echo '{"status":1,"message":"手机号已经被使用"}';
	}else{
		echo '{"status":0,"message":{"tips":"手机号可用","phonefrom":"中国电信"}}';
	}
?>

checkUsername文件：

<?php 
	$username = $_GET["uname"];
	//这里应该查询数据库，这里只是一个模拟数据库
	if($username == '123'){
		echo "NO";
	}else{
		echo "OK";
	}
 ?>

上面就是完成了一个用户名，电话，电子邮箱的一个唯一性检验，一定要多看注释，联合前面。

以上是关于Ajax 使用ajax加上get和post方法，通过后台加载数据，并在网页上进行显示案例+解释 的主要内容，如果未能解决你的问题，请参考以下文章

Ajax get和post区别

AJAX get() 和 post() 方法

ajax get，post，ajax基础使用

ajax get，post，ajax基础使用

jquery实现Ajax

4.27 jQuery AJAX get() 和 post() 方法