面向对象之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); } } } }

 

 

 

转载于:https://www.cnblogs.com/ysshuai/p/6706439.html