>大家好,这里是「 从零开始学 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 前端学习的冒险之旅吧! ![](https://github.com/Daotin/pic/raw/master/fgx.png) # 一、接口文档的使用 需求:使用接口文档验证用户名、邮箱、手机的唯一性 ## 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 Document

用户注册

用户名:
邮箱:
手机:
``` > 书写以上代码的过程中,完全不需要查看对应的 php 文件,只需要查看接口文档就可以搞定。 ## 3、代码封装 上面验证用户名,邮箱和手机号的时候,都是使用的 Ajax 的四部操作,有很多代码冗余,所以将 Ajax 的四步操作封装在一个函数中很有必要的。 ```html Document

用户注册

用户名:
邮箱:
手机:
``` **仍然存在的问题**: 1、参数的顺序不可改变; 2、参数没有默认值,所有的参数必须传递。 ## 4、代码进一步封装 将需要传入的参数做成一个对象,这个对象所有的有默认参数,如果没有传入一些参数的话,使用默认参数代替;如果传入了相关参数,则覆盖掉默认参数。 ```html Document

用户注册

用户名:
邮箱:
手机:
``` > 进一步封装后的函数为: myAjax2({}); 里面是一个对象。使用默认对象的方式,不仅可以解决传入参数顺序不一致的问题;还可以解决不传参数时默认值的问题。 ![](https://github.com/Daotin/pic/raw/master/fgx.png)