从零开始学 Web 之 Ajax（四）接口文档，验证用户名唯一性案例
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公众号：Web前端之巅
- 博客园：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
接口文档的使用
需求：使用接口文档验证用户名、邮箱、手机的唯一性
接口文档
当前端界面需要从服务器获取数据的时候，其实就是眼访问一个 URL 地址，指定特定的参数即可。这个 URL 对应的是 php 或者 jsp 等都是服务器开发人员已经开发好了。服务器开发人员开发好相关的接口之后，会提供一份接口文档给前端开发人员，在接口中会详细说明你要获取什么数据，访问什么地址，传入什么参数等等内容，下面就是一个简单接口文档的内容：
验证用户名唯一性的接口
| 地址 | /server/checkUsername.php |
|---|---|
| 作用描述 | 验证用户名是否可用 |
| 请求类型 | get 请求 |
| 参数 | uname |
| 返回的数据格式 | 普通字符串 |
| 返回数据说明 | 返回 ok：代表用户名可用； 返回 error：代表用户名不可用。 |
验证邮箱唯一性的接口
| 地址 | /server/checkEmail.php |
|---|---|
| 作用描述 | 验证邮箱是否可用 |
| 请求类型 | post 请求 |
| 参数 | e |
| 返回的数据格式 | 数字 |
| 返回数据说明 | 返回 0：代表邮箱可用； 返回 1：代表邮箱不可用。 |
验证手机号唯一性的接口
| 地址 | /server/checkPhone.php |
|---|---|
| 作用描述 | 验证手机号是否可用 |
| 请求类型 | post 请求 |
| 参数 | phonenumber |
| 返回的数据格式 | json格式 |
| 返回数据说明 | 如下： |
手机号可用情况下返回如下：
{
"status":0,
"message":{
"tips":"手机号可用",
"phonefrom":"中国电信"
}
}
手机号不可用情况下返回如下：
{
"status":1,
"message":"手机号已被注册"
}
示例代码
<!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>
<div id="dv">
<h1>用户注册</h1>
用户名：<input type="text" name="username"><span id="user-span"></span><br>
邮箱：<input type="text" name="email"><span id="email-span"></span><br>
手机：<input type="text" name="phone"><span id="phone-span"></span><br>
</div>
<script>
// 获取所有元素
var userObj = document.getElementsByName("username")[0];
var emailObj = document.getElementsByName("email")[0];
var phoneObj = document.getElementsByName("phone")[0];
var userSpanObj = document.getElementById("user-span");
var emailSpanObj = document.getElementById("email-span");
var phoneSpanObj = document.getElementById("phone-span");
//用户名文本框失去焦点事件
userObj.onblur = function () {
// 获取文本内容
var userText = this.value;
var xhr = new XMLHttpRequest();
xhr.open("get", "./server/checkUsername.php?uname="+userText, true);
xhr.send(null);
xhr.onreadystatechange = function () {
if(this.readyState == 4) {
if(this.status == 200) {
if(this.responseText == "ok") {
userSpanObj.innerHTML = "用户名可用";
} else if(this.responseText == "error") {
userSpanObj.innerHTML = "用户名不可用";
}
}
}
};
};
//邮箱文本框失去焦点事件
emailObj.onblur = function () {
// 获取文本内容
var emailText = this.value;
var xhr = new XMLHttpRequest();
xhr.open("post", "./server/checkEmail.php", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("e="+emailText);
xhr.onreadystatechange = function () {
if(this.readyState == 4) {
if(this.status == 200) {
console.log(this.responseText);
if(this.responseText == 0) {
emailSpanObj.innerHTML = "邮箱可用";
} else if(this.responseText == 1) {
emailSpanObj.innerHTML = "邮箱不可用";
}
}
}
};
};
//手机号文本框失去焦点事件
phoneObj.onblur = function () {
// 获取文本内容
var phoneText = this.value;
var xhr = new XMLHttpRequest();
xhr.open("post", "./server/checkPhone.php", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("phonenumber="+phoneText);
xhr.onreadystatechange = function () {
if(this.readyState == 4) {
if(this.status == 200) {
var val = JSON.parse(this.responseText);
// console.log(val.status);
if(val.status == 0) {
phoneSpanObj.innerHTML = val.message.tips + " " + val.message.phonefrom;
} else if(val.status == 1) {
phoneSpanObj.innerHTML = val.message;
}
}
}
};
};
</script>
</body>
</html>
书写以上代码的过程中，完全不需要查看对应的 php 文件，只需要查看接口文档就可以搞定。
代码第一步封装
上面验证用户名，邮箱和手机号的时候，都是使用的 Ajax 的四部操作，有很多代码冗余，所以将 Ajax 的四步操作封装在一个函数中很有必要的。
<!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>
<div id="dv">
<h1>用户注册</h1>
用户名：<input type="text" name="username"><span id="user-span"></span><br>
邮箱：<input type="text" name="email"><span id="email-span"></span><br>
手机：<input type="text" name="phone"><span id="phone-span"></span><br>
</div>
<script>
// Ajax 四步操作的封装函数
function myAjax(type, url, param, async, dataType, callback) {
var xhr = null;
// 兼容性处理
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if((type == "get") || (type == "GET")) {
if(param && param != "") {
url += "?" + param;
}
xhr.open(type, url, async);
xhr.send(null);
} else if((type == "post") || (type == "POST")) {
xhr.open(type, url, async);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(param);
}
if(async) {
xhr.onreadystatechange = function () {
if(this.readyState == 4) {
if(this.status == 200) {
if(dataType == "xml") {
callback(this.responseXML);
} else if(dataType == "json") {
callback(JSON.parse(this.responseText));
} else {
callback(this.responseText);
}
}
}
};
} else {
if(this.readyState == 4) {
if(this.status == 200) {
if(dataType == "xml") {
callback(this.responseXML);
} else if(dataType == "json") {
callback(JSON.parse(this.responseText));
} else {
callback(this.responseText);
}
}
}
}
}
// 获取所有元素
var userObj = document.getElementsByName("username")[0];
var emailObj = document.getElementsByName("email")[0];
var phoneObj = document.getElementsByName("phone")[0];
var userSpanObj = document.getElementById("user-span");
var emailSpanObj = document.getElementById("email-span");
var phoneSpanObj = document.getElementById("phone-span");
//用户名文本框失去焦点事件
userObj.onblur = function () {
// 获取文本内容
var userText = this.value;
myAjax("get", "./server/checkUsername.php", "uname="+userText, "true", "text", function (result) {
if(result == "ok") {
userSpanObj.innerHTML = "用户名可用";
} else if(result == "error") {
userSpanObj.innerHTML = "用户名不可用";
}
});
};
//邮箱文本框失去焦点事件
emailObj.onblur = function () {
// 获取文本内容
var emailText = this.value;
myAjax("post", "./server/checkEmail.php", "e="+emailText, "true", "text", function (result) {
if(result == 0) {
emailSpanObj.innerHTML = "邮箱可用";
} else if(result == 1) {
emailSpanObj.innerHTML = "邮箱不可用";
}
});
};
//手机号文本框失去焦点事件
phoneObj.onblur = function () {
// 获取文本内容
var phoneText = this.value;
myAjax("post", "./server/checkPhone.php", "phonenumber="+phoneText, "true", "json", function (result) {
if(result.status == 0) {
phoneSpanObj.innerHTML = result.message.tips + " " + result.message.phonefrom;
} else if(result.status == 1) {
phoneSpanObj.innerHTML = result.message;
}
});
};
</script>
</body>
</html>
仍然存在的问题：
1、参数的顺序不可改变；
2、参数没有默认值，所有的参数必须传递。
代码进一步封装
将需要传入的参数做成一个对象，这个对象所有的有默认参数，如果没有传入一些参数的话，使用默认参数代替；如果传入了相关参数，则覆盖掉默认参数。
<!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>
<div id="dv">
<h1>用户注册</h1>
用户名：<input type="text" name="username"><span id="user-span"></span><br>
邮箱：<input type="text" name="email"><span id="email-span"></span><br>
手机：<input type="text" name="phone"><span id="phone-span"></span><br>
</div>
<script>
function myAjax2(obj) {
var defaults = {
type: "get",
url: "#",
dataType: "",
data: {}, // 参数有可能多个，用对象保存
async: true,
success: function (result) {
console.log(result);
}
};
for(var key in obj) {
defaults[key] = obj[key];
}
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var param = "";
for(var attr in defaults.data) {
param += attr + "=" + defaults.data[attr] + "&" // 比如：uname=zhangsan&pwd=123
}
// 最后一个参数后面去掉 &
if(param) {
param = param.substring(0, param.length-1);
}
if((defaults.type == "get") || (defaults.type == "GET")) {
defaults.url += "?" + param;
}
xhr.open(defaults.type, defaults.url, defaults.async);
if((defaults.type == "get") || (defaults.type == "GET")) {
xhr.send(null);
} else if((defaults.type == "post") || (defaults.type == "POST")) {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(param);
}
if(defaults.async) {
xhr.onreadystatechange = function () {
if(this.readyState == 4) {
if(this.status == 200) {
if(defaults.dataType == "xml") {
defaults.success(this.responseXML);
} else if(defaults.dataType == "json") {
defaults.success(JSON.parse(this.responseText));
} else {
defaults.success(this.responseText);
}
}
}
};
} else {
if(this.readyState == 4) {
if(this.status == 200) {
if(defaults.dataType == "xml") {
defaults.success(this.responseXML);
} else if(defaults.dataType == "json") {
defaults.success(JSON.parse(this.responseText));
} else {
defaults.success(this.responseText);
}
}
}
}
}
// 获取所有元素
var userObj = document.getElementsByName("username")[0];
var emailObj = document.getElementsByName("email")[0];
var phoneObj = document.getElementsByName("phone")[0];
var userSpanObj = document.getElementById("user-span");
var emailSpanObj = document.getElementById("email-span");
var phoneSpanObj = document.getElementById("phone-span");
//用户名文本框失去焦点事件
userObj.onblur = function () {
myAjax2({
url: "./server/checkUsername.php",
type: "get",
data: {uname: this.value},
success: function (result) {
if(result == "ok") {
userSpanObj.innerHTML = "用户名可用";
} else if(result == "error") {
userSpanObj.innerHTML = "用户名不可用";
}
}
});
};
//邮箱文本框失去焦点事件
emailObj.onblur = function () {
myAjax2({
url: "./server/checkEmail.php",
type: "post",
data: {e: this.value},
success: function (result) {
if(result == 0) {
emailSpanObj.innerHTML = "邮箱可用";
} else if(result == 1) {
emailSpanObj.innerHTML = "邮箱不可用";
}
}
});
};
//手机号文本框失去焦点事件
phoneObj.onblur = function () {
myAjax2({
url: "./server/checkPhone.php",
type: "post",
dataType: "json",
data: {phonenumber: this.value},
success: function (result) {
if(result.status == 0) {
phoneSpanObj.innerHTML = result.message.tips + " " + result.message.phonefrom;
} else if(result.status == 1) {
phoneSpanObj.innerHTML = result.message;
}
}
});
};
</script>
</body>
</html>
进一步封装后的函数为： myAjax2({})； 里面是一个对象。使用默认对象的方式，不仅可以解决传入参数顺序不一致的问题；还可以解决不传参数时默认值的问题。
从零开始学 Web 之 Ajax（四）接口文档，验证用户名唯一性案例的更多相关文章
- 从零开始学 Web 之 Ajax（五）同步异步请求，数据格式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax（七）跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax（二）PHP基础语法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax（三）Ajax 概述，快速上手
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax（六）jQuery中的Ajax
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax（一）服务器相关概念
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Web API 自动生成接口文档
1.添加NuGet程序包 Microsoft ASP.NET Web API 2.2 Help Page (这是微软官方的) A Simple Test Client for ASP.NET ...
- Asp.Net Core 轻松学-利用 Swagger 自动生成接口文档
前言 目前市场上主流的开发模式,几乎清一色的前后端分离方式,作为服务端开发人员,我们有义务提供给各个客户端良好的开发文档,以方便对接,减少沟通时间,提高开发效率:对于开发人员来说,编写接口文档 ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
随机推荐
- ubuntu输入法
一直都是使用搜狗的,但是感觉一直都不兼容.经常输入一串文字导致输入法崩溃 比如 ‘外显’waixian就崩了. 而且会出现fcitx 100%cpu占用的情况 pkill fcitx &&am ...
- Quartz.Net进阶之二：关于触发器的更多信息
与作业一样,触发器相对容易使用,但是在您可以充分利用Quartz.NET之前,确实需要了解和理解各种可自定义的选项. 此外,如前所述,您可以选择不同类型的触发器来满足不同的调度需求. 1.常见触发器属 ...
- Python中的urllib
urllib提供了一系列URL的功能. Get urllib的request模块可以非常方便的抓取URL内容,也就是发送一个GET请求到指定的页面,然后返回HTTP响应: 例如,对豆瓣的一个URLht ...
- playframework链接MySQL数据库的问题
Scala 在米国已经发展的如火如荼,有些人甚至说Scala将成为未来语言的头号交椅.简洁的代码和表达式的写法让很多人倍感舒适,函数式和面向对象的编程范式也让其能在多种场合游刃有余的被使用.加之它是跑 ...
- Python3基础知识之数据结构List和Tuple
问题:今天学习python数据结构中的List和Tuple. 目标:了解二者的区别,学会一般的应用 相关知识:列表(List) : 类似于 .NET ArrayList / List.元组(Tuple ...
- OpenCV-可视化界面Image Watch
平台:Win10 x64+vs2015专业版+opencv-3.4.1-vc14_vc15 一直觉得OpenCV在调试方面不如MATLAB灵活方便,没成想OpenCV官方早就推出了一个叫Image W ...
- 13. The Impact of New Technology on Business 新科技对商务的影响
13. The Impact of New Technology on Business 新科技对商务的影响 (1) New technology links the world as never b ...
- Unity3D中播放视频的方法
播放视频其实和贴图非常相像,因为播放视频用到的 MovieTexture 属于贴图 Texture 的子类.Unity3D 支持的视频格式有很多,但是还是建议使用 ogv 格式的视频,使用其他格式依然 ...
- 下划线字符串camel
const camel = (str) => { let slices = str.split('_'); let result = []; for(let i = 1, len = slice ...
- Codeforces Round #514 (Div. 2) B - Forgery
这个题我一开始没思路,最后也没思路 2个小时一直没思路 本来还想解释题意的,写了半天发现解释的不是很清楚,你还是google翻译一下吧 这个题解法是这样的: 首先,给你图案里面有很多的点,每个点的周围 ...