ajax.js封装

100

101

102

103

104

105

//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);
        }
    }   
     
}