知识林
当前位置:知识林 » 网站前端开发 » Ajax » Web前端开发:AJAX基础

Web前端开发: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设置为每次读取的数据。

	
	
	
		无标题文档
	





	

AJAX原理

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

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

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

我是石川(Blue),如果你觉得我的文章还不错,请多帮我推荐给你的朋友,多谢了。

作者简介:前阿里巴巴高级技术经理,现开课吧技术学院院长。精通C/C++、Java、Python、前端开发等多种开发技术,曾参与淘宝网的早期建设和优化,拥有丰富的企业级系统开发经验,对HTML5移动端互联网技术及生态体系有深厚的造诣。

今天

Copyright © 知识林 All Rights Reserved.   吉ICP备13001611号-1