面向对象之---ajax

1.Ajax发送请求的几个步骤

1. 创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();
//IE6 使用
var xhr= new ActiveXObject('Microsoft.XMLHTTP');

2. 准备发送

xhr.open('get','./check.php',true);

3. 执行发送动作

xhr.send(null);

4. 指定回调函数

        xhr.onreadystatechange=function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var data=xhr.responseText;
                }
            }
        }

分析：

    /*
    * 参数一 ：请求方式（get获取数据，post提交数据）
    * 参数二 ：请求地址
    * 参数三 ：同步或者异步标志位，默认是ture表示异步，false表示同步
    */
     get请求
     如果是get请求那么请求参数必须在url中传递
     encodeURI()用来对中文参数进行编码，防止乱码
     ----------------
     var param = 'username='+uname+'&password='+pw;
     xhr.open('get','03get.php?'+encodeURI(param),true);
     ------------------
        xhr.open('get','./check.php',true);
        
    post请求
    --------------------
     var param = 'username='+uname+'&password='+pw;
     xhr.open('post','04post.php',false);
     // 3、执行发送动作
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     xhr.send(param);//post请求参数在这里传递，并且不需要转码
    --------------------
 
 

2.服务器返回相应数据的两种格式

responseXMl

<booklist>
    <book>
        <name><?php echo $arr[0]['name'] ?></name>
        <author><?php echo $arr[0]['author'] ?></author>
        <desc><?php echo $arr[0]['desc'] ?></desc>
    </book>
</booklist>

注意:使用xml传输数据时候需要使用header("Content-Type:text/xml;");

responseText

21.什么叫元数据

描述数据的数据，叫做元数据

json数据格式:

{
    "name":"zhansan",
    "age" :12,
    "hobby":["coding","swimming","singing"],
    "firend":{
            "high":"180cm",
            "weight":"80kg"
        }
}

原生ajax的封装

    
function ajax(url,type,param,dataType,callback){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    if(type == 'get'){
        url += "?" + param;
    }
    xhr.open(type,url,true);

    var data = null;
    if(type == 'post'){
        data = param;
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(dataType == 'json'){
                    data = JSON.parse(data);
                }
                callback(data);
            }
        }
    }
}

x.png