案例03_验证手机唯一性| 学习笔记

开发者学堂课程【Ajax 前端开发入门与实战：案例03_验证手机唯一性】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/595/detail/8527

案例03_验证手机唯一性

 

目录：

一、手机验证码相关功能开发

二、功能测试

 

一、手机验证码相关功能开发

现在还剩最后一个功能，手机号码微信的一个校验，接下来就把这个功能实现出来。

打开 Sublime ,实现代码之前首先，先把下面这段代码折叠起来。不然的这部分代码可能混淆视听。因为非常有可能在这部分直接写一些相关的代码，这个肯定是不对的。

所有要养成一个良好的习惯，当写了一个比较完整的程序之后，要把它折叠起来。

45   Var emailValue ‘’’

...

70   };

折叠之后就很清晰的知道代码该从下一部分开始写，就不会写的 function 内去了。

所有一定要注意一下写代码要养成好的习惯。

接下来就该对 phone 相关事件进行监听，这个事件是什么？依然是 onblur。

Phone.onblur = function(){};

相关的代码结构写完之后在回来把大括号打开，再继续写代码。这是一个比较好的代码习惯。

Phone.onblur = function(){

};

在 onblur 中将做两件事情，第一件事情是拿到用户所输入的手机号码，接着第二个事情是和服务器进行相关请求。服务器请求可以做单独的封装，减少代码量,后面的课程会进行相关的讲解。

Phone.onblur = function(){

Var phoneValue = phone.value;

// 1 2 3 4

Var xhr = null;

If(window.XMLHttpRequest){

xhr = new XMHLttpRequest();

} else {

xhr = new ActiveX0bject(‘’Microsoft.XMLHTTP’’)；

}

xhr.open(‘’post ’’,’’./server/checkphone.php’’,true);

//这两个相关函数是已经固定了的。 

//相关的接口文档会有

Var params = ‘’phoneumber=’’+phoneValue;

//key 相关参数

xhr.setReqestHeader(‘’Content-Type’’,’’applicaton/x-www-form-urlencoded’’);

xhr,send(params);

xhr.onreadystatechange = function(){

If(xhr.readyState == 4){

If(xhr.status == 200){

//xhr.responseText就是一个字符

var result = xhr.responseText;

//希望将result这样的一个字符串转化为对象

//方便我们获取里面的一些值

result = JSON.parse(result);

var phone.sesult = 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;

}

}

//相关文档

手机号可用情况下返回如下：

{

‘’staatus’’:0,

‘’message’’:{

‘’tips’’:’’手机号可用‘’，

phonefrom’’:’’中国电信’‘

}

} 

手机号不可用情况下返回如下：

{

‘’staatus’’:0,

‘’message’’:’‘手机号已被注册’‘

}

//

}

}

};

};

对于手机号码唯一性验证中带了很多信息，在这样一些字符串中获取一些值，相对来说不是特别方便，只有将其转换为对象，才可以方便的获取到 message 、tip、phonefrom 等信息。

所以在用 JSON.parse(result) ;时，是将一个字符串转化为一个对象。但字符串转换为对象，是有格式要求的。

result 字符串必须是 Json 格式规范的字符串。只有 Json 格式的字符串才能通过JSON.parse() 将一个字符串转变为对象。

转变成对象之后就可以通过...的方式获取到这个对象的一些值。

将字符串转化为对象只是为了方便获取一些值。

二、功能测试

编程完成后进行简单测试，刷新界面，切换一下光标。测试手机号可用与不可用相关情况。 

对于最后一个案例需要注意的是，获取数据时是一个字符串。如果这一字符串是一种 JSON 格式的字符串，就可能将其转变为对象。

对象为对象之后可通过...的方式，容易的获取到一些值。