Javascript中的Ajax

来源：互联网发布：ios蜂窝移动数据设置编辑：程序博客网时间：2024/05/29 08:59

Ajax是高性能Javascript的基础，它可以通过延迟下载体积较大的资源文件使得页面加载速度更快。他通过异步的方式在客户端和服务器端之间传输数据，从而避免页面资源一窝蜂的下载，选择适合的传输方式和最有效的数据格式，可以显著的改善用户和网站的交互体验。

建立连接的基本步骤：
1. 新建一个XMLHttpRequest对象；
2. 调用open接口，设置url，传输方式；
3. 调用 setRequestHeader()，设置头信息；
4. 调用send，开始发送；
5. 利用onreadystatechange监听请求返回的数据；

function myXMLRequest(url,type,params,callback){    var req=new XMLHttpRequest();    req.onreadystatechange=function(){        console.log(req.readyState);        if(req.readyState===4){            var responseHeaders=req.getAllResponseHeaders();            var type=req.getResponseHeader('Content-Type');            var data;            switch(type){                case 'text/xml':                    data=req.responseXML;                    break;                case 'text/json':                    data=req.responseText;                    break;                default:                    data=req.responseText;            }            callback(type,data);        }    }    req.open(type,url+'?'+params.join('&'),true);    req.send(null);    //上面两句在post和get方式是不一样的，上面两句是get的方式，因为参数是放在url上的，若是post的方式，    //则改为如下：    //req.open(type,url,true);    //req.send(params.join('&'));}

最后在callback里根据返回信息的类型处理信息就行啦。

下面是给出的完整代码，他可以向服务器获取指定传输格式（json或xml或html）的数据，并按相应格式解析，在前台生成表格。

//xhr.html<!doctype html><html>    <head>    <title>XHL test</title>    <style type="text/css">        button{            font-size: 18px;            padding: 10px;            background-color: #ff00ff;            border: none;            outline: none;        }        #content{            margin-top: 20px;        }        td{            border: 1px solid #333333;            padding: 10px;            text-align: center;        }    </style>    </head>    <body>    <button>click me</button>    <div id="content">    </div>    <script type="text/javascript">        document.getElementsByTagName('button')[0].onclick=function(){            console.log("clicked");            var url="xhrresponse.php";            var type='GET';            var params=[                'type=json',                'name=mzz'            ];            myXMLRequest(url,type,params,clickResponsed);        }        function myXMLRequest(url,type,params,callback){            var req=new XMLHttpRequest();            req.onreadystatechange=function(){                console.log(req.readyState);                if(req.readyState===4){                    var responseHeaders=req.getAllResponseHeaders();                    var type=req.getResponseHeader('Content-Type');                    var data;                    switch(type){                        case 'text/xml':                            data=req.responseXML;                            break;                        case 'text/json':                            data=req.responseText;                            break;                        default:                            data=req.responseText;                    }                    callback(type,data);                }            }            req.open(type,url+'?'+params.join('&'),true);            req.send(null);        }        function clickResponsed(type,data){            var obj=document.getElementById('content');            var content="<h1>数据传输格式：<span>"+type+"</span></h1>";            switch(type){                case 'text/xml':                    content+=xmlParse(data);                    break;                case 'text/json':                    content+=jsonParse(data);                    break;                default:                    content+=data;            }            obj.innerHTML=content;        }        function jsonParse(jsondata){            var jsondata=eval(jsondata);            var len=jsondata.length;            var content="<table cellspacing='0'><thead><tr><td>id</td><td>name</td><td>realname</td><td>email</td></tr></thead><tbody>";            for (var i = 0; i<len; i++) {                content+="<tr><td>";                content+=jsondata[i].id;                content+="</td><td>";                content+=jsondata[i].username;                content+="</td><td>";                content+=jsondata[i].realname;                content+="</td><td>";                content+=jsondata[i].email;                content+="</td></tr>";            };            content+="</tbody><table>"            return content;        }        function xmlParse(xmldata){            var usersNode=xmldata.getElementsByTagName('user');            var len=usersNode.length;            console.log(usersNode);            var content="<table cellspacing='0'><thead><tr><td>id</td><td>name</td><td>realname</td><td>email</td></tr></thead><tbody>";            for (var i =0; i<len; i++) {                content+="<tr><td>";                content+=usersNode[i].getAttribute('id');                content+="</td><td>";                content+=usersNode[i].getElementsByTagName('username')[0].childNodes[0].nodeValue;                content+="</td><td>";                content+=usersNode[i].getElementsByTagName('realname')[0].childNodes[0].nodeValue;                content+="</td><td>";                content+=usersNode[i].getElementsByTagName('email')[0].childNodes[0].nodeValue;                content+="</td></tr>";            };            content+="</tbody><table>"            return content;        }    </script>    </body></html>

//xhrresponse.php<?php    header('Content-Type:text/json');    $name=$_GET['name'];    $type=$_GET['type'];    switch ($type) {        case 'json':            $jsondata=array();            for ($i=0; $i <6 ; $i++) {                 $jsondata[$i] = array(                        'id'=>$i,                        'username' => "alice".$i,                         'realname'=>'Alice Smith'.$i,                        'email'=>'alice'.$i.'@alice.com'                    );            }            echo json_encode($jsondata);            break;        case 'xml':            echo "<?xml version='1.0' encoding='UTF-8'?>";            echo "<users total='6'><user id='1'><username>alice1</username><realname>Alice Smith1</realname><email>alice1@alice.com</email></user>";            echo "<user id='2'><username>alice2</username><realname>Alice Smith2</realname><email>alice2@alice.com</email></user>";            echo "<user id='3'><username>alice3</username><realname>Alice Smith3</realname><email>alice3@alice.com</email></user>";            echo "<user id='4'><username>alice4</username><realname>Alice Smith4</realname><email>alice4@alice.com</email></user>";            echo "<user id='5'><username>alice5</username><realname>Alice Smith5</realname><email>alice5@alice.com</email></user>";            echo "<user id='6'><username>alice6</username><realname>Alice Smith6</realname><email>alice6@alice.com</email></user>";            echo "</users>";             break;        default:            echo "hello".$name;            break;    }   ?>

上面用XHR进行前后台数据交互很方便，提一下另一种向后台发数据更方便的方式-信标。

信标

在js中只需如下即可向后台发送数据

var params=[    'type=json',    'name=mzz'];(new Image()).src="beacon.php?"+params.join('&');

信标很简单，也意味着做的事比较有限
1. 无法使用post
2. 发送的数据长度被限制的相当小

但是信标是向服务器回传输数据最快且最有效的方式。服务器不需要发送任何响应正文，因此你也无需担心客服端下载数据。

0 0