武汉web培训
达内武汉中心

15827352908

热门课程

用AJAX读取动态文件

  • 时间:2018-01-31 18:02
  • 发布:武汉web培训班
  • 来源:互联网

    用AJAX读取动态文件

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

武汉web培训班

    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方法一般用于上传数据(如用户注册).
    我是石川(Blue),如果你觉得我的文章还不错,请多帮我推荐给你的朋友,多谢了.

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

    更多武汉WEB培训相关咨询,请扫描下方二维码

更多武汉WEB培训相关咨询,请扫描下方二维码

武汉WEB培训

马上预约七天免费试听课

姓名:

电话:

上一篇:武汉web培训机构——什么是服务器
下一篇:三层交换机的由来

web前端和web后端

三层交换机的由来

用AJAX读取动态文件

什么是web框架?

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊