大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

在这里我会从 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格式
返回数据说明 如下： 
  1. 手机号可用情况下返回如下：
  2. {
  3.   "status":0,
  4.   "message":{
  5.     "tips":"手机号可用",
  6.     "phonefrom":"中国电信"
  7.   }
  8. }
  9. 手机号不可用情况下返回如下：
  10. {
  11.   "status":1,
  12.   "message":"手机号已被注册"
  13. }

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="dv">
  11.         <h1>用户注册</h1>
  12.         用户名：<input type="text" name="username"><span id="user-span"></span><br>
  13.         邮箱：<input type="text" name="email"><span id="email-span"></span><br>
  14.         手机：<input type="text" name="phone"><span id="phone-span"></span><br>
  15.     </div>
  16.     <script>
  18.         // 获取所有元素
  19.         var userObj = document.getElementsByName("username")[0];
  20.         var emailObj = document.getElementsByName("email")[0];
  21.         var phoneObj = document.getElementsByName("phone")[0];
  23.         var userSpanObj = document.getElementById("user-span");
  24.         var emailSpanObj = document.getElementById("email-span");
  25.         var phoneSpanObj = document.getElementById("phone-span");
  27.         //用户名文本框失去焦点事件
  28.         userObj.onblur = function () {
  29.             // 获取文本内容
  30.             var userText = this.value;
  32.             var xhr = new XMLHttpRequest();
  33.             xhr.open("get", "./server/checkUsername.php?uname="+userText, true);
  34.             xhr.send(null);
  35.             xhr.onreadystatechange = function () {
  36.                 if(this.readyState == 4) {
  37.                     if(this.status == 200) {
  38.                         if(this.responseText == "ok") {
  39.                             userSpanObj.innerHTML = "用户名可用";
  40.                         } else if(this.responseText == "error") {
  41.                             userSpanObj.innerHTML = "用户名不可用";
  42.                         }
  43.                     }
  44.                 }
  45.             };
  46.         };
  48.         //邮箱文本框失去焦点事件
  49.         emailObj.onblur = function () {
  50.             // 获取文本内容
  51.             var emailText = this.value;
  53.             var xhr = new XMLHttpRequest();
  54.             xhr.open("post", "./server/checkEmail.php", true);
  55.             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  56.             xhr.send("e="+emailText);
  57.             xhr.onreadystatechange = function () {
  58.                 if(this.readyState == 4) {
  59.                     if(this.status == 200) {
  60.                         console.log(this.responseText);
  61.                         if(this.responseText == 0) {
  62.                             emailSpanObj.innerHTML = "邮箱可用";
  63.                         } else if(this.responseText == 1) {
  64.                             emailSpanObj.innerHTML = "邮箱不可用";
  65.                         }
  66.                     }
  67.                 }
  68.             };
  69.         };
  71.         //手机号文本框失去焦点事件
  72.         phoneObj.onblur = function () {
  73.             // 获取文本内容
  74.             var phoneText = this.value;
  76.             var xhr = new XMLHttpRequest();
  77.             xhr.open("post", "./server/checkPhone.php", true);
  78.             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  79.             xhr.send("phonenumber="+phoneText);
  80.             xhr.onreadystatechange = function () {
  81.                 if(this.readyState == 4) {
  82.                     if(this.status == 200) {
  83.                         var val = JSON.parse(this.responseText);
  84.                         // console.log(val.status);
  85.                         if(val.status == 0) {
  86.                             phoneSpanObj.innerHTML = val.message.tips + " " + val.message.phonefrom;
  87.                         } else if(val.status == 1) {
  88.                             phoneSpanObj.innerHTML = val.message;
  89.                         }
  91.                     }
  92.                 }
  93.             };
  94.         };
  96.     </script>
  97. </body>
  98. </html>

书写以上代码的过程中，完全不需要查看对应的 php 文件，只需要查看接口文档就可以搞定。

代码第一步封装

上面验证用户名，邮箱和手机号的时候，都是使用的 Ajax 的四部操作，有很多代码冗余，所以将 Ajax 的四步操作封装在一个函数中很有必要的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="dv">
  11.         <h1>用户注册</h1>
  12.         用户名：<input type="text" name="username"><span id="user-span"></span><br>
  13.         邮箱：<input type="text" name="email"><span id="email-span"></span><br>
  14.         手机：<input type="text" name="phone"><span id="phone-span"></span><br>
  15.     </div>
  16.     <script>
  18.         // Ajax 四步操作的封装函数
  19.         function myAjax(type, url, param, async, dataType, callback) {
  20.             var xhr = null;
  21.             // 兼容性处理
  22.             if(window.XMLHttpRequest) {
  23.                 xhr = new XMLHttpRequest();
  24.             } else {
  25.                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
  26.             }
  28.             if((type == "get") || (type == "GET")) {
  29.                 if(param && param != "") {
  30.                     url += "?" + param;
  31.                 }
  32.                 xhr.open(type, url, async);
  33.                 xhr.send(null);
  34.             } else if((type == "post") || (type == "POST")) {
  35.                 xhr.open(type, url, async);
  36.                 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  37.                 xhr.send(param);
  38.             }
  40.             if(async) {
  41.                 xhr.onreadystatechange = function () {
  42.                     if(this.readyState == 4) {
  43.                         if(this.status == 200) {
  44.                             if(dataType == "xml") {
  45.                                 callback(this.responseXML);
  46.                             } else if(dataType == "json") {
  47.                                 callback(JSON.parse(this.responseText));
  48.                             } else {
  49.                                 callback(this.responseText);
  50.                             }
  52.                         }
  53.                     }
  54.                 };
  55.             } else {
  56.                 if(this.readyState == 4) {
  57.                     if(this.status == 200) {
  58.                         if(dataType == "xml") {
  59.                             callback(this.responseXML);
  60.                         } else if(dataType == "json") {
  61.                             callback(JSON.parse(this.responseText));
  62.                         } else {
  63.                             callback(this.responseText);
  64.                         }
  66.                     }
  67.                 }
  68.             }
  69.         }
  71.         // 获取所有元素
  72.         var userObj = document.getElementsByName("username")[0];
  73.         var emailObj = document.getElementsByName("email")[0];
  74.         var phoneObj = document.getElementsByName("phone")[0];
  76.         var userSpanObj = document.getElementById("user-span");
  77.         var emailSpanObj = document.getElementById("email-span");
  78.         var phoneSpanObj = document.getElementById("phone-span");
  80.         //用户名文本框失去焦点事件
  81.         userObj.onblur = function () {
  82.             // 获取文本内容
  83.             var userText = this.value;
  85.             myAjax("get", "./server/checkUsername.php", "uname="+userText, "true", "text", function (result) {
  86.                 if(result == "ok") {
  87.                     userSpanObj.innerHTML = "用户名可用";
  88.                 } else if(result == "error") {
  89.                     userSpanObj.innerHTML = "用户名不可用";
  90.                 }
  91.             });
  92.         };
  94.         //邮箱文本框失去焦点事件
  95.         emailObj.onblur = function () {
  96.             // 获取文本内容
  97.             var emailText = this.value;
  99.             myAjax("post", "./server/checkEmail.php", "e="+emailText, "true", "text", function (result) {
  100.                 if(result == 0) {
  101.                     emailSpanObj.innerHTML = "邮箱可用";
  102.                 } else if(result == 1) {
  103.                     emailSpanObj.innerHTML = "邮箱不可用";
  104.                 }
  105.             });
  106.         };
  108.         //手机号文本框失去焦点事件
  109.         phoneObj.onblur = function () {
  110.             // 获取文本内容
  111.             var phoneText = this.value;
  113.             myAjax("post", "./server/checkPhone.php", "phonenumber="+phoneText, "true", "json", function (result) {
  114.                 if(result.status == 0) {
  115.                     phoneSpanObj.innerHTML = result.message.tips + " " + result.message.phonefrom;
  116.                 } else if(result.status == 1) {
  117.                     phoneSpanObj.innerHTML = result.message;
  118.                 }
  119.             });
  120.         };
  122.     </script>
  123. </body>
  124. </html>

仍然存在的问题：

1、参数的顺序不可改变；

2、参数没有默认值，所有的参数必须传递。

代码进一步封装

将需要传入的参数做成一个对象，这个对象所有的有默认参数，如果没有传入一些参数的话，使用默认参数代替；如果传入了相关参数，则覆盖掉默认参数。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="dv">
  11.         <h1>用户注册</h1>
  12.         用户名：<input type="text" name="username"><span id="user-span"></span><br>
  13.         邮箱：<input type="text" name="email"><span id="email-span"></span><br>
  14.         手机：<input type="text" name="phone"><span id="phone-span"></span><br>
  15.     </div>
  16.     <script>
  17.         function myAjax2(obj) {
  18.             var defaults = {
  19.                 type: "get",
  20.                 url: "#",
  21.                 dataType: "",
  22.                 data: {}, // 参数有可能多个，用对象保存
  23.                 async: true,
  24.                 success: function (result) {
  25.                     console.log(result);
  26.                 }
  27.             };
  29.             for(var key in obj) {
  30.                 defaults[key] = obj[key];
  31.             }
  33.             var xhr = null;
  34.             if(window.XMLHttpRequest) {
  35.                 xhr = new XMLHttpRequest();
  36.             } else {
  37.                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
  38.             }
  40.             var param = "";
  41.             for(var attr in defaults.data) {
  42.                 param += attr + "=" + defaults.data[attr] + "&" // 比如：uname=zhangsan&pwd=123
  43.             }
  44.             // 最后一个参数后面去掉 &
  45.             if(param) {
  46.                 param = param.substring(0, param.length-1);
  47.             }
  49.             if((defaults.type == "get") || (defaults.type == "GET")) {
  50.                 defaults.url += "?" + param;
  51.             }
  53.             xhr.open(defaults.type, defaults.url, defaults.async);
  55.             if((defaults.type == "get") || (defaults.type == "GET")) {
  56.                 xhr.send(null);
  57.             } else if((defaults.type == "post") || (defaults.type == "POST")) {
  58.                 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  59.                 xhr.send(param);
  60.             }
  62.             if(defaults.async) {
  63.                 xhr.onreadystatechange = function () {
  64.                     if(this.readyState == 4) {
  65.                         if(this.status == 200) {
  66.                             if(defaults.dataType == "xml") {
  67.                                 defaults.success(this.responseXML);
  68.                             } else if(defaults.dataType == "json") {
  69.                                 defaults.success(JSON.parse(this.responseText));
  70.                             } else {
  71.                                 defaults.success(this.responseText);
  72.                             }
  73.                         }
  74.                     }
  75.                 };
  76.             } else {
  77.                 if(this.readyState == 4) {
  78.                     if(this.status == 200) {
  79.                         if(defaults.dataType == "xml") {
  80.                             defaults.success(this.responseXML);
  81.                         } else if(defaults.dataType == "json") {
  82.                             defaults.success(JSON.parse(this.responseText));
  83.                         } else {
  84.                             defaults.success(this.responseText);
  85.                         }
  86.                     }
  87.                 }
  88.             }
  89.         }
  91.         // 获取所有元素
  92.         var userObj = document.getElementsByName("username")[0];
  93.         var emailObj = document.getElementsByName("email")[0];
  94.         var phoneObj = document.getElementsByName("phone")[0];
  96.         var userSpanObj = document.getElementById("user-span");
  97.         var emailSpanObj = document.getElementById("email-span");
  98.         var phoneSpanObj = document.getElementById("phone-span");
  100.         //用户名文本框失去焦点事件
  101.         userObj.onblur = function () {
  102.             myAjax2({
  103.                 url: "./server/checkUsername.php",
  104.                 type: "get",
  105.                 data: {uname: this.value},
  106.                 success: function (result) {
  107.                     if(result == "ok") {
  108.                         userSpanObj.innerHTML = "用户名可用";
  109.                     } else if(result == "error") {
  110.                         userSpanObj.innerHTML = "用户名不可用";
  111.                     }
  112.                 }
  113.             });
  114.         };
  116.         //邮箱文本框失去焦点事件
  117.         emailObj.onblur = function () {
  118.             myAjax2({
  119.                 url: "./server/checkEmail.php",
  120.                 type: "post",
  121.                 data: {e: this.value},
  122.                 success: function (result) {
  123.                     if(result == 0) {
  124.                         emailSpanObj.innerHTML = "邮箱可用";
  125.                     } else if(result == 1) {
  126.                         emailSpanObj.innerHTML = "邮箱不可用";
  127.                     }
  128.                 }
  129.             });
  130.         };
  132.         //手机号文本框失去焦点事件
  133.         phoneObj.onblur = function () {
  134.             myAjax2({
  135.                 url: "./server/checkPhone.php",
  136.                 type: "post",
  137.                 dataType: "json",
  138.                 data: {phonenumber: this.value},
  139.                 success: function (result) {
  140.                     if(result.status == 0) {
  141.                         phoneSpanObj.innerHTML = result.message.tips + " " + result.message.phonefrom;
  142.                     } else if(result.status == 1) {
  143.                         phoneSpanObj.innerHTML = result.message;
  144.                     }
  145.                 }
  146.             });
  147.         };
  149.     </script>
  150. </body>
  151. </html>

进一步封装后的函数为： myAjax2({})； 里面是一个对象。使用默认对象的方式，不仅可以解决传入参数顺序不一致的问题；还可以解决不传参数时默认值的问题。

从零开始学 Web 之 Ajax（四）接口文档，验证用户名唯一性案例的更多相关文章

  1. 从零开始学 Web 之 Ajax（五）同步异步请求，数据格式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 Ajax（七）跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 Ajax（二）PHP基础语法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学 Web 之 Ajax（三）Ajax 概述，快速上手

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 从零开始学 Web 之 Ajax（六）jQuery中的Ajax

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 Ajax（一）服务器相关概念

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Web API 自动生成接口文档

    1.添加NuGet程序包 Microsoft ASP.NET Web API 2.2 Help Page      (这是微软官方的) A Simple Test Client for ASP.NET ...

  8. Asp.Net Core 轻松学-利用 Swagger 自动生成接口文档

    前言     目前市场上主流的开发模式,几乎清一色的前后端分离方式,作为服务端开发人员,我们有义务提供给各个客户端良好的开发文档,以方便对接,减少沟通时间,提高开发效率:对于开发人员来说,编写接口文档 ...

  9. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

随机推荐

  1. swift hidesBottomBarWhenPushed 设置界面

    方法一(推荐):一级界面push的时候设置,子页面无需设置 let vc = JYMyCommissionController() vc.hidesBottomBarWhenPushed = true ...

  2. Quartz.Net进阶之一：初识Job作业和触发器

        前几天写了一篇有关Quartz.Net入门的文章,大家感觉不过瘾,想让我在写一些比较深入的文章.其实这个东西,我也是刚入门,我也想继续深入了解一下,所以就努力看了一些资料,然后自己再整理和翻译 ...

  3. day3-selenium的使用及

    如果是python2的情况下需要设置: # _*_ coding:utf-8 _*_,这样的编码来保证输入中文在运行时不会报错,另外在中文的前边加上u保证编译时不会报错 from selenium i ...

  4. POJ 1655.Balancing Act 树形dp 树的重心

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14550   Accepted: 6173 De ...

  5. Oracle使用JDBC进行增删改查 表是否存在

    Oracle使用JDBC进行增删改查 数据库和表 table USERS (   USERNAME VARCHAR2(20) not null,   PASSWORD VARCHAR2(20) ) a ...

  6. 2019.02.19 bzoj2655: calc（生成函数+拉格朗日插值）

    传送门 题意简述:问有多少数列满足如下条件: 所有数在[1,A][1,A][1,A]之间. 没有相同的数 数列长度为nnn 一个数列的贡献是所有数之积,问所有满足条件的数列的贡献之和. A≤1e9,n ...

  7. centos 7下 django 1.11 + nginx 1.12 + uwsgi 2.0

    之前写过一个博客关于如何安装django的,见下网址, http://www.cnblogs.com/qinhan/p/8732626.html 还有一个网址如何安装nginx的 http://www ...

  8. Maths | 离散K-L变换/ 主成分分析法

    目录 1. 概述 2. K-L变换方法和原理推导 2.1. 向量分解 2.2. 向量估计及其误差 2.3. 寻找最小误差对应的正交向量系 3. K-L变换高效率的本质 4. PCA在编.解码应用上的进 ...

  9. Android -Services 使用简介

    Android Services 四大组件之一,主要用于后台长时间运行.没有界面.这里讲解两种services的启动还有AIDL通信方式. 1.startservices a.建立继承services ...

  10. jsp和html的区别

    html是超文本标记语言,只要有浏览器,就可以显示出来了. jsp是java server page就是在java服务器端的页面,需要通过jdk的编译才可以显示在客户端的浏览器上. 不仅如此,jsp还 ...