最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

ajax原理是什么?AJAX函数的参数有哪些

XAMPP新闻 admin 508浏览 0评论

eu00014

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

什么是服务器

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

 

什么是AJAX?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><script>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('失败');
        });
    };
};
</script>
 </head>
  <body>
    <input id="btn1" type="button" value="读取" /><ul id="ul1"></ul>
  </body>
</html>

 

AJAX原理

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

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

 

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

转载请注明:XAMPP中文组官网 » ajax原理是什么?AJAX函数的参数有哪些

您必须 登录 才能发表评论!