开发者学堂课程【Ajax 前端开发入门与实战：优化封装方案实现】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8537
优化封装方案实现
目录
一、案例分步
二、实例整体
一、案例分步
下面把这个 myAjax2 的方法完善起来，通过以下代码我们将 defaults 中的默认属性覆盖掉。
function myAjax2(obj) {
var defaults = {
type:"get",
url:"#”，
dataType:"json",
data:{ }
}；
//obi 中的属性，覆盖到 defaults 中的属性
//1、如果有一些属性只存在 obj 中， 会给 defaus 中增加属性
//2、如果有一些属性在 obj 和 defaults 中都存在，会将 defaults 中的默认值覆盖
//3、如果有一些属性只在 defaults 中存 的中不存在、在 obj 中不存在，这时候defaults 中将保留预定义的
for(var key in obj){
Defaults[key]=obj[key]
}
2．四步骤
步骤一：串联对象 var xhr=null 后进行一个条件判断 if(window 是否有XMLHttpRequest 这个选项，如果有的话则 xhr=new XMLHttpReques, 完整的步骤一展示为
for(var key in obj) {
defaults[key]= obj[key];
}
var xhr = null;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr = new ActiveXOBject(“Microsoft.XMLHTTP”)
}
在此步骤中我们没有使用到 defaults 中任何一个参数，此参数已经在for循环中与obj 结合。
步骤二：此时需要使用到 defaults 中参数
选择 xhr，open 这个方法，在 open 这个方法中，我们需要传入请求类型，请求地址以及是否为同步或异步。
请求类型：defaults：type（可能有两种情况，一个是 obj 中没有 type 这个属性，于是使用 type=get, 另一个为在 obj 中显示传递一个类型 post，经过defaults[key]= obj[key] 这个代码之后成为 post 请求。）；
defaults.url；defaults.async
xhr.open(defaults.type,defaults.url,defaults.async);
使用变化后的 defaults 进行 Ajax 的第二个步骤准备发送这个功能的实现。
由于请求类型分为 get 和 post，这对 url 有一定的影响，所以需要进行一个条件判断
//得到params
// data:{
// uname: “zhangsan"
// age:"18"
// } // uname-zhangsan&age=18
var params =“ ”
for(var attr in defaults.data) {
params +=attr +“=”+defaults;data[attr] +“&”；
}
注：在进行便利的时候：
// } // uname-zhangsan&age=18
var params =“ ”
for(var attr in defaults.data) {
params +=attr +“=”+defaults;data[attr] +“&”
当这个步骤结束时我们需要做一个条件判断：
params= params.substring(
,params.length-1)
}
if(defaults.type get==”get“) {
defaults.url +=“？” params;
}
步骤三：xhr.send（），再做一个条件请求，因为 post 与 get 不一样
if(defaults.type==“ get") {
xhr.send(null);
} else if(defaults,type==“ post”) {
xhr.setReguestHeader（“ContentType"，“application/x-www-form-urlencoded”);
xhr.send(params);
}
这个步骤结束后 get 和 post 请求就考虑的差不多了
步骤四：获取数据
if(defaults.async) {
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status == 200) {
var result - null:
if(defaults.dataType==“json”){
result=xhr.responseText;
result=JSON.parse(result);
} else if(defaults.datalype == xml"){
result=xhr.responseXML;
}else {
result=xhr.responseText;
}
defaults.success(result）
}
}
}
}else{
if(xhr.readyState==4){
if(xhr.status == 200) {
var result - null:
if(defaults.dataType==“json”){
result=xhr.responseText;
result=JSON.parse(result);
} else if(defaults.datalype == xml"){
result=xhr.responseXML;
}else {
result=xhr.responseText;
}
defaults.success(result）
}
}
二、实例整体：
Obj = {
ur1:“xxx”
type:“post”
dataType:“json”
data:{
uname:“zhangsan”,
age:“18”
}，//uname=zhangsan&age=18
success:function
};
function myAjax2(obj) {
var defaults = {
type:"get",
url:"#”，
dataType:"json",
data:{ }
asyns:true ，
success:function( result){console.log(result) }
}；
//obi 中的属性，覆盖到 defaults 中的属性
//1、如果有一些属性只存在 obj 中， 会给 defaus 中增加属性
//2、如果有一些属性在 obj 和 defaults 中都存在，会将 defaults 中的默认值覆盖
//3、如果有一些属性只在 defaults 中存的中不存在、在 obj 中不存在，这时候defaults 中将保留预定义的
for(var key in obj) {
defaults[key]= obj[key];
}
var xhr = null;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr = new ActiveXOBject(“Microsoft.XMLHTTP”)
}
//得到params
// data:{
// uname: “zhangsan"
// age:"18"
// } // uname-zhangsan&age=18
var params =“ ”
for(var attr in defaults.data) {
params +=attr +“=”+defaults;data[attr] +“&”；
}
if(params) {
params= params.substring(
,params.length-1);
}
if(defaults.type get==”get“) {
defaults.url +=“？” params;
}
xhr.open(defaults.type,defaults.url,defaults.async);
if(defaults.type==“ get") {
xhr.send(null);
} else if(defaults,type==“ post”) {
xhr.setReguestHeader（“ContentType"，“application/x-www-form-urlencoded”);
xhr.send(params);
}
if(defaults.async) {
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status == 200) {
var result - null:
if(defaults.dataType==“json”){
result=xhr.responseText;
result=JSON.parse(result);
} else if(defaults.datalype == xml"){
result=xhr.responseXML;
}else {
result=xhr.responseText;
}
defaults.success(result）
}
}
}
}else{
if(xhr.readyState==4){
if(xhr.status == 200) {
var result - null:
if(defaults.dataType==“json”){
result=xhr.responseText;
result=JSON.parse(result);
} else if(defaults.datalype == xml"){
result=xhr.responseXML;
}else {
result=xhr.responseText;
}
defaults.success(result）
}
}
