开发者学堂课程【Ajax 前端开发入门与实战：细节完善_考虑同步异步情况】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8535
细节完善_考虑同步异步情况
把 myAjax 分装方法测试一遍之后发现没问题，接下来细节完善。
先看 function myAjax(type,url,params,datatype,callback) 先看 params ,对于params 来说如果它是 get 请求的话会与url进行一个拼接，但是如果没有传递params，那么 params 默认值是什么？
默认值为 null,当一个 null 与字符串进行拼接会得到 null--->?null 对与后面?null明显不是想得的结果。
Function myAjax(type,url,params,datatype,callback){
//1 2 3 4
var xhr =null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActionXObject(“Microsoft.XMLHTTP”);
}
//null--->?null
if(type == “get”){
url +=”?” + params;
}
所以对于某些请求没有仓促的情况下怎么样不传递 params ,接着在作为字符拼接时需要做一个条件判断，判断 params 只有在存在的情况下，才需要做一个与 url 的拼接，除此之外如果 params 存在并且不等于空的字符串，这是对 params 进行的条件判断。
//null--->?null
if(type == “get”){
if(params && params != “”){
url += “?” +params;
}
}
xhr.open(type,url,true);
if(type == “get”){
xhr.send(null);
myAjax 方法是很多人进行调用的，所以考虑多些不是坏事。
function myAjax(type,url,params,datatype,callback) 中 datatype,如果 datatype不传递问题也不大，因为不传递 datatype 他就不满足第一个条件，不满足这个条件它一定会到最后一个 else 中，所以对于 datatype 不需要考虑他的异常情况。
if(datatype == “json”){
result = xhr.responsText;
result = JSON.parse(result);
}else if)(datatype == “xml”){
result = xhr.responseXML;
}else{
result = xhr.responseText;
}
if(){
最后一个参数 callback,callback 有时也会忘了传递或者不传递，但如果 callback 不传递，那么 callback 支持一个 null,那支持一个 null 的方法调用，这里面必然会出现错误，所以为了考虑周全，这里必须判断 callback 存在的情况下，需要把callback 进行一个方法的调用，因为 callback 传递进来的一定是个方法。
if(datatype == “json”){
result = xhr.responsText;
result = JSON.parse(result);
}else if)(datatype == “xml”){
result = xhr.responseXML;
}else{
result = xhr.responseText;
}
if(callback){
callback（result）;
}
这就是考虑的两个细节，
1. 对于 get 请求来讲，作为字符串拼接时要保证 params 是存在的。
2.callback 方法调用时保证 callback 是存在的。
接着可以考虑同步或者异步的请求，现在统一把他作为一个异步请求，
如：xhr.open(type,url,true);
if(type == “get”){
xhr.send(null);
}else if(type == “post”)
作为一个比较通用的方法需要把情况考虑周全，由调用者来决定这个请求是同步的还是异步的，这里需要创建一个新的参数 async,也就如 function myAjax(type,url,params,datatype,callback)，接着把 async 放到 xhr.open(type,url,async);
由调用者来决定他是同步还是异步，一旦把这个参数给传递过来，这里面的值就会有两种情况，一种为 true 一种为 false ，如果为 true 那他是异步走原来的逻辑就可以，但如果他是同步的话，这里需要做一个条件判断，如果 sync 他是一个异步请求，async 加上一个 a 是异步，如果是异步就写和异步相同的逻辑，需要做一个
onreadyystatechange 一个事件的监听，
if(async){
xhr,onreadstatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var result = null;
if(datatype == “json”){
result = xhr.responseText;
result = JSON.parse(result);
}
if(callback){
callback(result);
}
}
}
};
}
接着看一下 else 情况，else 是一个同步的请求，那不需要对 xhr 进行一个onreadystatechange 监听，直接获取想要的数据，把代码复制到后面。
最后在 username 传入最后一个参数 false
myAjax(Type,url,params,datatype,function(result){
var username_result =document.querySelector(“#username_result”);
if(result == “ok”){
username_result.innerText = “用户名可以使用”;
}else{
username_result.innerText = ”用户名已被注册”;
}
},false);
};
后面两个请求同一位置也需要传入 true，接下来就简单测试，当输入用户名卡死页面中，原因是在 checkUsername 给他睡了5秒种，当他请求时服务器没返回
那么代码就会一直卡死在：xhr.send(params); 的 send 方法中。
这就是三个细节的优化和操作。
