Ajax基础（上）

最近比较忙，明天早上回家，趁现在更新了给。这个周末修养生息，太累了。。。。

 

Ajax---“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。可以异步加载数据，不需要多次请求服务器，刷新页面。

搭建本地服务器，百度搜索wamp,下载php+mysql+apache的环境，之前一直试着下载每一个英文原版的软件，结果弄得头都大了，后来还是看到视频用这个，感觉蛮方便的。

通过按钮获取txt文件的内容。首先要导入ajax的js文件，然后编写按钮的点击事件。注意测试的时候要在本地服务器测试，不然的话没有反应。

 1 <script src="ajax.js"></script>
 2 <script>
 3 window.onload=function ()
 4 {
 5     var oBtn=document.getElementById('btn1');
 6     
 7     oBtn.onclick=function ()
 8     {
 9         //ajax能且仅能 从服务器读取文件
10         //alert('abc.txt?t='+new Date().getTime());
11         ajax('abc.txt?t='+new Date().getTime(), function (str){
12             alert(str);
13         });
14     };
15 };
16 </script>

按钮切换内容，通过innerHTML的内容的改变切换内容。

 1 <script src="ajax.js"></script>
 2 <script>
 3 window.onload=function()
 4 {
 5     var oBtn=document.getElementsByTagName('input');
 6     var oDiv=document.getElementById('div1');
 7     var i=0;
 8     
 9     for(i=0;i<oBtn.length;i++)
10     {    
11         oBtn[i].index=i;
12         oBtn[i].onclick=function()
14             {
15                 ajax(this.index+1+'.txt',function(str)
16                 {
17                     oDiv.innerHTML=str;
18                 });
19             };
20         ajax();
21     };
23 };    
25 </script>
26 </head>
28 <body>
29 <input type="button" value="anniu1" />
30 <input type="button" value="anniu2" />
31 <input type="button" value="anniu3" />
32 <div id="div1"></div>
33 </body>

上面的那个例子，如果编码不统一会出现编码错误或者程序出错的问题，一般的html文档里面的编码为charset=utf-8

字符集编码的深入----http://www.cnblogs.com/skynet/archive/2011/05/03/2035105.html讲的蛮详细的，可以去了解一下。

缓存---指临时文件交换区，如果已经读取了文件，再次更新文件后还是会显示原来的文件，需要清除缓存，重启浏览器可以删除缓存或者在加载的文件名后面添加相应的日期代码，在很小的时间范围内更新文件的名称。

读取数组---通过eval函数来使字符串变成数组（也不能说变，但是可以像数组一样的结构一样再来获取元素）。

 1 <script src="ajax.js"></script>
 2 <script>
 3 window.onload=function()
 4 {
 5     var oBtn=document.getElementById('btn1');    
 6     oBtn.onclick=function()
 7     {
 8         ajax('11.txt',function(str)
 9         {    
10             var arr=eval(str);
11             alert(arr[0]);    
12         })
13     };  
18 };
19 </script>
20 </head>
21 
22 <body>
23 读取动态文件<br />
24 <input type="button" id= "btn1" value="读取文件" />
25 </body>

eval函数---可以读取字符串里的数字，并且可以计算字符串里面的数字；可以执行字符串里面的函数。

1 <script>
2     //var a='54';
3     //var str='[1,2,3,4,5]';
4     //var arr=eval(str);
5     //alert(arr[0]);
6     var a='function show(){alert(123)};';
7     eval(a);
8     show()
9 </script>

Json---[{a:1,b:2},{a:3,b:4}]---这是json的数据格式

 1 window.onload=function()
 2 {
 3     var oBtn=document.getElementById('btn1');    
 4     oBtn.onclick=function()
 5     {
 6         ajax('ajax.txt',function(str)
 7         {    
 8             var arr=eval(str);
 9             alert(arr[0].b);    
10         })
11     };
12 };

ajax分页---通过a标签的点击事件来触发分页效果，在wamp/www文件夹下面创建三个文本文件；注意.txt文件的名称，index的索引值是从0开始的，所以要加1,；然后通过eval函数把json文件里的东西分解；

 1 <script src="ajax.js"></script>
 2 <script>
 3 window.onload=function ()
 4 {
 5     var oUl=document.getElementById('ul1');
 6     var aBtn=document.getElementsByTagName('a');
 7     var i=0;
 8     
 9     for(i=0;i<aBtn.length;i++)
10     {
11         aBtn[i].index=i;
12         aBtn[i].onclick=function ()
13         {
14             ajax('page'+(this.index+1)+'.txt', function (str){
15                 var aData=eval(str);
16                 
17                 oUl.innerHTML='';
18                 for(i=0;i<aData.length;i++)
19                 {
20                     var oLi=document.createElement('li');//创建li
21                     
22                     oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
23                     
24                     oUl.appendChild(oLi);//在ul下面添加li
25                 }
26             });
27         };
28     }
29 };
30 </script>
31 </head>
32 
33 <body>
34 <ul id="ul1">
35 </ul>
36 <a href="javascript:;">1</a>
37 <a href="javascript:;">2</a>
38 <a href="javascript:;">3</a>
39 </body>

http请求方法-----get/post

get是向服务器索取数据的一种请求,可以在浏览器的左下角得到用户名，密码等信息---论坛的详情页面，有利于分享网站地址---获取数据---把相应的数据放在地址栏里面；而post是向服务器提交数据的一种请求，要提交的数据位于信息头后面的实体中----上传数据---把数据放在html content里面。

__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/05/24/3092854.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(769)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
SQL AI 助手