【JavaScript从入门到精通】第二十二课 AJAX基础

此内容来自开课吧石川微信公众号

这节课开始我们学习AJAX。AJAX的主要功能是让JS读取服务器的数据。在AJAX出现之前,如果我们想注册一个用户或者提交一个表单,必须要刷新页面。但现在利用AJAX,不刷新页面也可以做到这些事情。

什么是服务器

平时,我们打开浏览器,输入一个网址就可以访问网页了。这些网页都存储在其对应的服务器上,我们通过网址对服务器发送请求就可以获取网页。为了让我们的计算机具备服务器功能,这里我们使用wamp软件搭建服务器,大家可以从网上下载安装。安装成功后,进入软件下的www目录中,之后我们写的网页都存储在这个文件夹内,就可以让它在服务器上运行了。访问服务器上的网页的方式是在浏览器网址栏输入“localhost/网页名”或“127.0.0.1/网页名”。

什么是AJAX

Ajax的功能是在不刷新页面的前提下,读取或发送服务器数据,这也是我们为什么要搭建一个服务器。现在我们来做一个简单的例子:用AJAX请求一个TXT文件。这里我们先告诉大家AJAX怎么使用,下节课再具体分析AJAX内部应该如何编写,因此我们使用已经写好的AJAX函数进行编写。AJAX函数如下:

function ajax(url, fnSucc, fnFaild) {
    //1.创建Ajax对象
    if (window.XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    }
    else {
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

//2.连接服务器(打开和服务器的连接)
oAjax.open('GET', url, true);
//3.发送
oAjax.send();

//4.接收
oAjax.onreadystatechange = function () {
    if (oAjax.readyState == 4) {
        if (oAjax.status == 200) {
            //alert('成功了:'+oAjax.responseText);
            fnSucc(oAjax.responseText);
        }
        else {
            //alert('失败了');
            if (fnFaild) {
                fnFaild();
            }
        }
    }
};

ajax函数一共有3个参数:url代表文件路径,数据读取成功时调用的函数,数据读取失败时调用的函数。我们将这歌AJAX函数的js文件也放入www目录下并在我们想使用的页面中引入。现在,我们在www目录下建立一个txt文档,里面有一些文字,我们希望通过AJAX将txt文档中的文字读取到网页中。

window.onload=function (){
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()
    {
        ajax('aaa.txt', function (str){
            alert(str);
        }, function (){
            alert('失败');
        });
    };
};

成功时执行的回调函数有一个参数,这个参数就是服务器给我们返回的文件内容,我们将str打印出来就可以看到txt文档内的内容了。

这就是一个最基本的AJAX程序。提到AJAX我们不得不补充的一点是关于字符集编码的内容。我们可以尝试在txt文档内输入中文再在服务器上运行这个网页,会发现中文是以乱码的形式出现。

实际上,浏览器网页基本是以UTF-8为编码,但我们的TXT文档默认是以GB2312的编码形式储存。因此我们打开TXT文档,将它重新以UTF-8编码储存,就可以解决这个问题了。我们在编写一个网页时,尽可能要求所有文件都是统一的编码,可以很大程度上避免乱码的情况。

现在我们来看另一个例子。当我们打开一个网页一次后,第二次打开经常会快一些,这得益于缓存。实际上,我们只有第一次打开的时候是真正从服务器上进行数据请求,之后都是通过本地的缓存上获取的数据。

但有时候,我们需要阻止缓存,原因在于,当我们修改了一些服务器上的文件内容,希望网页也进行同样的修改时,由于网页是直接从缓存中读取的,会导致修改的内容并不能显示出来。如果这个网页是实时刷新的(例如股票价格持续变化),那么缓存就会产生很大的困扰。为了阻止这种缓存,我们需要研究一下缓存的机制。

缓存的依据其实是网页的url,对于同一个地址读取一次。因此我们有一个很简单的方法,使得url不断变化,缓存机制就不再生效了。

那么如何使url发生变化呢?

我们在平常上网的时候,经常可以看到aaa.php?a=12&b=5这样的地址,实际上后面的内容我们称之为get数据,它的具体用途我们以后再说。而对于我们的txt文件的地址,get数据的更改不会发生任何影响。那么我们在请求txt文件的时候,我们在它的地址末加上一个时刻变化的get数据,url就可以一直发生变化了:

window.onload=function (){
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()
    {
        ajax('aaa.txt?t='+new Date().getTime(), function (str){
            alert(str);
        }, function (){
            alert('失败');
        });
    };
};

getTime方法获取当前的时间戳,实际上是1970年1月1日到现在的时间,单位为毫秒,也就是说1秒内会变化1000次,这样我们请求的地址就是时刻变化的,避免了缓存产生的影响。

用AJAX读取动态文件

我们通过AJAX读取过来的任何内容都是以字符串的形式存在,如果向txt文件内放入一个数组[1,2,3,4,5,6,7],AJAX识别的并不会是一个数组而是带有数字,括号和逗号的字符串。我们有办法将这个数组提取出来吗?当然是有的,还记得我们的eval方法吗?它可以将语句解析为JS可识别的内容:

window.onload=function (){
    var oBtn=document.getElementById('btn1');
    oBtn.onclick=function ()
    {
        ajax('aaa.txt?t='+new Date().getTime(), function (str){
            alert(eval(str));
        }, function (){
            alert('失败');
        });
    };
};

那么,如果我现在文档里有一个JSON列表存储了人物信息,我希望通过JSON读取并显示在网页上,应该怎么做呢?很明显,我们可以通过循环完成这件事:每次循环的时候,我们创建一个新的li,并将其innerHTML设置为每次读取的数据。

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="ajax.js"></script>
</head>
<body>
<input id="btn1" type="button" value="读取"/>
<ul id="ul1"></ul>
</body>
</html>
window.onload = function () {
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('ul1');

    oBtn.onclick = function () {
        ajax('data.txt?t=' + new Date().getTime(), function (str) {
            var arr = eval(str);

            for (var i = 0; i < arr.length; i++) {
                var oLi = document.createElement('li');

                oLi.innerHTML = '用户名:<strong>' + arr[i].user + '</strong>密码:<span>' + arr[i].pass + '</span>';

                oUl.appendChild(oLi);
            }
        }, function () {
            alert('失败');
        });
    };
};

AJAX原理

这里我们先来讲解一下HTTP的请求方法:GET和POST。如果你接触过表单,那么对请求方式想必不会陌生。使用get方式提交的数据,其实是将数据放入url中随着网址一起传递过去,其基本格式为名字=值&名字=值…。而使用post方法提交的数据并不会显示在url中,我们可以通过开发者工具中的network查询到。因为一个网站的网址一般都是有限的,所以通过get方式提交数据的容量是很小的,所以非常不适合传递大数据,而post方法传递的数据容量非常大(可以达到2g)。

其次由于将数据放入了URL中,所以安全性很低,不适用于储存密码之类的数据,相对来说post方法就要安全一些,但安全度也有限。如果想要做到真正的安全,则需要使用https协议。还有一点就是,get方法是有缓存的,而post方法没有,每一次post向服务器提交的都是新数据。

普遍来说,get方法一般用来获取数据(如浏览帖子),而post方法一般用于上传数据(如用户注册)。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/1263.html

发表评论

登录后才能评论