Ajax-3. Ajax 的基本使用场景

最新推荐文章于 2024-03-05 23:02:03 发布

凡小多

最新推荐文章于 2024-03-05 23:02:03 发布

阅读量152

点赞数

分类专栏： Ajax 文章标签： ajax javascript html

本文链接：https://blog.csdn.net/wgh4318/article/details/120408227

版权

Ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Ajax 实现局部刷新的4个步骤

在这里插入图片描述

//1、创建XMLHttpRequest这个对象,这个步骤中需要注意兼容处理
let xhr = null;
if (window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
} else {
	//IE6浏览器
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

//2、准备发送
// open(请求方式，地址，同步或异步)	true 默认为异步 false 同步
// 地址有多个参数用 & 连接
//比如：open("get","check.php?username="+uname+"&password="+pw)
//3、执行发送
// send()

// get 请求发送方式
//xhr.open("get","checkUsername.php?username=" + username,true);
//xhr.send(null);

// post 请求发送方式
xhr.open("post", "checkUsername.php", true);
let param = "username=" + username;
//对于post请求来说的话，我们的参数应该放到请求体中
//设置xhr的请求头信息，这个步骤仅仅是针对于post请求才有的
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(param);

//4、设置回调函数
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			//得到数据
			//xhr.responseXML
			let result = xhr.responseText;
			console.log(result);
			document.getElementById("result").innerText = result;
		}
	}
};

【验证唯一性】

register.html 页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册界面</title>
	<script type="text/javascript">
		window.onload = function(){

			let username = document.querySelector("#username");
			let email = document.querySelector("#email");
			let phone = document.querySelector("#phone");
			
			// 用户名唯一性验证
			username.onblur = function(){
				let usernameValue = username.value;
				//将 username 提交给服务器，有服务器进行唯一性的校验
				//1、创建对象 兼容处理
				let xhr = null;
				if(window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				} else {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2、准备发送
				xhr.open("get","./server/checkUsername.php?uname=" + usernameValue,true);
				//3、执行发送
				xhr.send(null);
				//制定回调函数
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4) {
						if(xhr.status == 200) {
							let result = xhr.responseText;
							let username_result = document.querySelector("#username_result");
							if(result == "ok") {
								username_result.innerText = "用户名可以使用";
							} else {
								username_result.innerText = "用户名已经被注册";
							}
						}
					}
				};
			};
			// 邮箱唯一性验证
			email.onblur = function(){
				let emailValue = email.value;
				let xhr = null;
				if(window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				} else {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				let param = "e=" + emailValue;
				xhr.open("post","./server/checkEmail.php",true);
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xhr.send(param);

				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4) {
						if(xhr.status == 200){
							let result = xhr.responseText;
							let email_result = document.querySelector("#email_result");
							if(result == 0) {
								//邮箱可用
								email_result.innerText = "邮箱可以使用";
							} else {
								email_result.innerText = "邮箱不可以使用";
							}
						}
					}
				};
			};
			// 手机号唯一性验证
			phone.onblur = function(){
				let phoneValue = phone.value;
				//1 2 3 4
				let xhr = null;
				if(window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				} else {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}

				xhr.open("post","./server/checkPhone.php",true);
				let params = "phonenumber="+phoneValue;
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xhr.send(params);

				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							//xhr.responseText就是一个字符串
							let result = xhr.responseText;

							//希望将result这样的一个字符串转化为对象，方便我们获取里面的一些值
							// 将 json 格式的字符串转换为对象
							result = JSON.parse(result);
							let phone_result = document.querySelector("#phone_result");
							if(result.status == 0) {
								//代表手机号码可用
								phone_result.innerText = result.message.tips + "," + result.message.phonefrom;
							} else if(result.status == 1) {
								//代表手机号码不可用
								phone_result.innerText = result.message;
							}
						}
					}
				};
			};




		};
	</script>
</head>
<body>

	<h1>注册界面</h1>
	<form action="">
		用户名：<input type="text" id="username" autocomplete="off"><span id="username_result"></span><br>
		邮箱:<input type="email" id="email" autocomplete="off"><span id="email_result"></span><br>
		手机号码：<input type="tel" id="phone" autocomplete="off"><span id="phone_result"></span><br>
	</form>
	
</body>
</html>

checkUsername.php 页面

<?php 
	//sleep(5);
	$username = $_GET["uname"];
	if($username == 'zhangsan') {
		echo "error";
	} else {
		echo "ok";
	}
 ?>

checkEmail.php 页面

<?php 
	$email = $_POST["e"];
	if($email == 'zhangsan@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":"中国电信"}}';
	}
 ?>

演示图
在这里插入图片描述

凡小多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax-3. Ajax 的基本使用场景

Ajax 实现局部刷新的4个步骤//1、创建XMLHttpRequest这个对象,这个步骤中需要注意兼容处理let xhr = null;if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();} else { //IE6浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP");}//2、准备发送// open(请求方式，地址，同步或异步) true 默认为异步 false 同步// 地
复制链接

扫一扫