mirror of
https://github.com/Daotin/Web.git
synced 2024-10-30 04:24:45 +08:00
483 lines
18 KiB
Markdown
483 lines
18 KiB
Markdown
>大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
|
||
>
|
||
> - github：https://github.com/Daotin/Web
|
||
> - 微信公众号：[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
|
||
> - 博客园：http://www.cnblogs.com/lvonve/
|
||
> - CSDN：https://blog.csdn.net/lvonve/
|
||
>
|
||
> 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
|
||
|
||
|
||
|
||
|
||
|
||
# 一、接口文档的使用
|
||
|
||
需求：使用接口文档验证用户名、邮箱、手机的唯一性
|
||
|
||
|
||
|
||
## 1、接口文档
|
||
|
||
当前端界面需要从服务器获取数据的时候，其实就是眼访问一个 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":"手机号已被注册"
|
||
}
|
||
```
|
||
|
||
|
||
|
||
## 2、示例代码
|
||
|
||
```html
|
||
<!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 文件，只需要查看接口文档就可以搞定。
|
||
|
||
|
||
|
||
## 3、代码封装
|
||
|
||
上面验证用户名，邮箱和手机号的时候，都是使用的 Ajax 的四部操作，有很多代码冗余，所以将 Ajax 的四步操作封装在一个函数中很有必要的。
|
||
|
||
```html
|
||
<!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、参数没有默认值，所有的参数必须传递。
|
||
|
||
|
||
|
||
## 4、代码进一步封装
|
||
|
||
将需要传入的参数做成一个对象，这个对象所有的有默认参数，如果没有传入一些参数的话，使用默认参数代替；如果传入了相关参数，则覆盖掉默认参数。
|
||
|
||
```html
|
||
<!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({})； 里面是一个对象。使用默认对象的方式，不仅可以解决传入参数顺序不一致的问题；还可以解决不传参数时默认值的问题。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
 |