开发者学堂课程【Ajax 前端开发入门与实战:封装测试】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/595/detail/8534
封装测试
测试 myAjax 这个方法能不能正常使用,将唯一性业务逻辑用我们所写的 myAjax 这个方法来看一下能不能获取到某服务器的数据。
首先看一下用户名的调用,直接调用 myAjax ,插入对应的参数就好了。
第一步骤:用户名的校验:
username.onblur
=
function()
{
var
usernameValue
=
username.
value;
var
type
=
”
get
”
;
var url =
”
./server/checkUsername
.php
”
;
Var
params
=
”
uname=
”
+
usernameValue;
var
dataType
=
”
text
”
;
myAjax(type
url,params,dataType,function(result)
{
var username
_
result = document.querySelector(
”
#username
_
result
”
);if(result
==”
ok
”
)
{
username
_
result.innerText =
”用户名可以使用”
;
}
1f else
{
Username
_
result.innerText =
”用户名已经被注册”;
}
});
};
第二个步骤:邮箱校验:
var type =
”
post
”
;
var url=
“
./server/checkEmail.php
”
;
var params =
“
e=
”
+
emailValue;
var dataType =
“
text
”
;
myAjax(type,
url,
params,
dataType,function(result){
var
email
_
result
=
=
document.querySelector(
“
#email result
”
);
if(result == 0){
//邮箱可用email
result.innerText
=
”
邮箱可以使用
”
;
}else{
Email
_
result.innerText
=
”
邮箱不可以使用
”
;
}
});
};
第三个步骤:手机号校验:var type
=”
post
”
;
var url .
”
·/server/checkPhone.php
”
;
Var
params =
”
phonenumber=
”+
phoneValue;
var dataType
=
”
json
”
;
myAjax(type , url, params ,dataType,function(result
){
var
phone
_
result
= document
.
querySelector(
”
#
phane
_
result
”
);
if(result. status
==
Ø)
{
//代表手机号码可用phone_ result. innerText
=
result.message.tips
+
”
,
”
+
result.
message . phonefrom;
}
else if(resul.status
==
1)
{
//代表手机号码不可用 phone _result. innerText = result.message;
}
});
};
测试:
在网站输入:www.zhangsan.com,点击进去可以看见 03 Ajax,点开 register 01,可以看见注册界面。在用户名栏输入123可以显示用户名可以使用,同样的邮箱和手机号也是可以显示邮箱可以使用和手机号可以使用并且可以显示出中国电信。
调试:
按下 F12 打开调试工具,在 Ntework 里面有我们相关请求的一系列相关信息,在整个界面刷新过后,重新输入123,在 Ntework 里面就可以看见 Ntework 的一个请求。根据返回的地址打开可以卡看见返回的是“OK”。