ajax.js封装

//ajax 的get post封装 
function ajaxF( method , url , json, callback  ){
	var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    
    var str = "";
    for( var key in json ){
    	str += "&" + key +"=" + json[key];
    }
    str = str.slice(1);
    
	if( method == "get" ){
		url = url + "?" + str;
		xhr.open( "get" , url , true );
		xhr.send();
	}else{
		xhr.open( "post" , url , true );
		//设置请求头
		xhr.setRequestHeader( "Content-Type","application/x-www-form-urlencoded" )
	    //post的请求数据要放在send里面
	    xhr.send( str )
	}
	xhr.onreadystatechange = function(){
		if( xhr.readyState == 4 && xhr.status == 200 ){
			//拿到服务器的结果后  要实现的功能是可变的
			callback( xhr.responseText );//函数调用 传递实参
		}
	}
}
// 找一个天气情况的接口做测试
// 	ajaxF("get","http://wthrcdn.etouch.cn/weather_mini",{city:"北京"},function(res){
// 		var ul = document.createElement("ul");
// 		for( let i = 1 ; i <=5 ; i ++ ){
// 			var li = document.createElement("li");
// 			ul.appendChild(li);
// 			li.style.width = "100px";
// 			li.style.border = "1px solid red";
// 			li.style.height = "200px";
// 			li.style.float = "left";
// 			li.style.display = "flex";
			
// 		}
// 		document.body.appendChild(ul);
// 		ul.style.width = "510px";
// 		ul.style.height = "200px";
// 	    let oLi = document.querySelectorAll("li");
// 		let arr = JSON.parse(res).data.forecast
//         for( let i = 0 ; i < arr.length ; i++ ){
//           	oLi[i].innerHTML = arr[i].date + "<br><br>" + arr[i].high + "<br><br>" + arr[i].low + "<br><br>" + arr[i].fengxiang
//         }
//   })

//例
// ajaxF("get","http://wthrcdn.etouch.cn/weather_mini",{city:"北京"},function(res){
// 	console.log(res)
// })


// url :请求路径
// callback :  该参数是一个函数，回调函数
// data :  接口的参数
function ajaxGet(url,callback,data){
	var xhr = null;
	if( window.XMLHttpRequest ){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if( data ){ //如果有参数   在路径的后面拼接参数
		url = url + "?" + data;
	}
//	if(arguments.length == 3){//表示传递的参数有三个  
//		url = url + "?" + data;
//	}
	xhr.open("GET",url,true);
	xhr.send(); 
	xhr.onreadystatechange = function(){
		if( xhr.readyState == 4 && xhr.status == 200 ){
                //拿到服务器的结果后  要实现的功能是可变的
				callback(xhr.responseText);//通过函数的调用将服务器处理的结果以参数形式传递给前端 
		}
	}
	
}


function ajaxPost(url,callback,data){
	var ajax = null;
	if( window.XMLHttpRequest ){
		ajax = new XMLHttpRequest();
	}else{
		ajax = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	ajax.open("POST",url);
	ajax.send(data);//向服务器端发送数据 用户名
	//设置请求头：
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	
	ajax.onreadystatechange = function(){
		if(ajax.readyState == 4 && ajax.status == 200){
			callback(ajax.responseText);
		}
	}	
	
}