自定义ajax函数（仿照jQuery）

• AJAX介绍
  • AJAX = 异步 JavaScript 和 XML。
  • 全称：Asynchronous Javascript And XML；
  • AJAX 是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
  • 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
• 创建一个简单的ajax应用

// 判断用户名
userNamer.onblur = function(){
// 获取用户名数值从而进行服务器判断
var usernameValue = userNamer.value;
// ajax 四个步骤
var xhr = null;
// 1.创建对象 兼容性处理
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.准备发送
xhr.open("get","./php/usernamer.php?uname="+usernameValue,true);
// 3.执行发送
xhr.send(null);
// 4.设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if(xhr.status == 200){
// 获取值
var result = xhr.responseText;
var usernamer_result = document.querySelector(".usernamer_result");
if(result == "ok"){
usernamer_result.innerText = "该用户名可用";

					}else{
						usernamer_result.innerText = "该用户名已被注册";
					}

				}
			}
		};
	};

* 封装ajax:
* 为了克服传统函数不能设置默认值 以及 不能随意更改参数顺序的问题
* 这里采用对象传参方式来封装ajax请求函数（使用的是jQuery模式）
  ```
  //函数内部默认对象
var defaults = {
  		type:"get",
  		url:"#",
  		data:{},
  		dataType:"json",
  		async:true,
  		success:function(result){
  			console.log(result);
  		}
  	};
  ```

## 封装ajax:
 
  !(function(w){
  w.lufei = {};

  // 参数详解
  // 1.请求类型 type
  // 2.请求地址 url	
  // 3.传递参数 params  这里可以传多个  采用对象data{}
  // 4.数据类型 datatype
  // 5.回调函数 callback 用于获取数据后进行函数判断 success::function(){}
  // 6.同步异步 async    
  // 使用对象进行封装  这些参数  并且设置默认值  不用考虑顺序

  w.lufei.ajax = function(obj){
  	var defaults = {
  		type:"get",
  		url:"#",
  		data:{},
  		dataType:"json",
  		async:true,
  		success:function(result){
  			console.log(result);
  		}
  	};
  	// 遍历对象属性名
  	for(var key in obj){
  		defaults[key] = obj[key];
  	}

  	// ajax 四个步骤
  		var xhr = null;
  		// 1.创建对象  兼容性处理
  		 if(window.XMLHttpRequest){
  		 	xhr = new XMLHttpRequest();
  		 }
  		 else{
  		 	xhr = new ActiveXObject("Microsoft.XMLHTTP");
  		 }
  	// 字符串拼接
  	var params = "";
  	for(var attr in defaults.data){
  		params += attr+"="+defaults.data[attr]+"&";
  	}
  	// 去除最后一个&
  	if(params){
  		// 字符串截取
  		params = params.substring(0,params.length-1);
  	}
  	if(defaults.type=="get"){
  		defaults.url += "?"+params;
  	}
  	
  		// 2.准备发送
  		xhr.open(defaults.type,defaults.url,defaults.async);
  		// 3.执行发送
  		if(defaults.type=="get"){
  			xhr.send(null);
  		}else if(defaults.type=="post"){
  			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  			xhr.send(params);
  		}
  		// 4.设置回调函数
  		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.dataType=="xml"){
  						result = xhr.responseXML;
  					}else{
  						result = xhr.responseText;
  					}
  					if(defaults["success"]){
  						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.datatype=="xml"){
  						result = xhr.responseXML;
  					}else{
  						result = xhr.responseText;
  					}
  					if(defaults["success"]){
  						defaults["success"](result);
  					}
  					
  					

  				}
  			}
  		}
  		

  	};
  })(window)