开发者学堂课程【Ajax 前端开发入门与实战:优化封装方案测试】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/595/detail/8538
优化封装方案测试
目录
一、myAjax2 的测试
二、该方法使用在 Email 中
三、该方法使用在手机中
一、myAjax2 的测试
当 myAjax2 这个方法做出后我们要对其进行测试看是否可以使用,新建文件夹将Ajax01 复制为 Ajax02 ,打开 Ajax02 ,对于这个代码我们可以不用严格按照步骤执行。
myAjax2({
(在这个对象当中,我们是先写 get 还是 url 不重要,只需想到什么就写什么)
url:url
type:type(这里可写可不写,因为在 Ajax02 中如果没有加入相关的一些 type 的话就将会使用 defaults 中已经定义好的值)
data:{uname:usernameValue}
,(括号内为参数)
dataType: ”text”
(默认是一个 json 属性,但不是 json 的格式,所以必须强制写一些 dataType,否则的话将会在最后做一个 json,pares 的操作)
success:functin(result
)
} );
刷新看是否测试正常。
myAjax(false,type,url,params,datatype,function(result){
var usename-result=document,querySelector(“#username- result”)
if(result ==“ok")
username_result.innerText="用户名可以使用”;
}else {
username_result.innerText=“用户名已经被注册”;
});
};
二、该方法使用在 Email 中:
email.onblur=function(){
var emailValue =email.value;
var type= "post";
var url=”. /server/checkEnail.php”;
var parans =”e“emailValue;
var dataType ="text";
data:{
e:emailValue
}
myAjax(type,url,params,dataType,function(result){
var email-result =document.querySelector("#email_result");
if(result ==
) {
//邮箱可用
emai result.innerText="邮箱可以使用”;
} elset {
email-result.innerText= "邮箱不可以使用”;
),true);
}
};
三、该方法使用在手机中:
phone.onblur =function(){
var phonevalue =phone.value;
var type =“post”;
var url =”./server/checkPhone.php" ;
var parans ="phonenumber="+phoneValue;
var datalype = "json";
myAjhox2({
url:url,
type: post 我们以对象的方式进行组织
data:{
phonenumber:phoneValue
} 请求同步可以不写
success: function(result){
var phone_result =docurent,querySelector("#phone_result");
if(result.status==
) {
//代表手机号码可用
phone_result.innerText =result.message.tips=“,”=
result.message.phonefrom;
} else if(result.status ==1) {
//代表手机号码不可用
phone_result.innerText =result.nessage:
}
}
})