js-Ajax的作用及其函数的编写_ajax('arr2.txt?t='+new date().gettime(), function -CSDN博客

本文链接：https://blog.csdn.net/u011546421/article/details/52839332

什么是ajax？

AJAX就是Asynchronous JavaScript and XML（意思是说异步JavaScript 和XML）；它不是新的编程语言。而是一种使用现有标准的新方法,能够通过在后台与服务器进行少量数据交换，使得网页实现异步更新，实现在不重新刷新加载整个页面的情况下，只更新部分网页上的内容的技术。

传统网页和运用ajax技术的网页的工作流程：

1、传统的网页是没有使用AJAX,那么只要想更新内容，就必须重载整个网页。

上面示意图可以看出，传统的网页是这样的，浏览器向服务器发送请求，然后等服务器在后台处理好后返回信息到html档里面，但是每次都是处理一个请求后都要重新加载整个页面，步骤繁琐，加载网页的速度也降低。

2、使用ajax技术的网页，页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。

实际运用中的例子有：1、当你在百度搜索资料的时候，你在搜索框中输入你要搜索的信息，这时候会有个提示框弹出来，这个就是用到ajax；为什么会有提示框弹出一些跟你输入关键词差不多的提示呢，因为当你键入内容是，浏览器就向服务器发出请求，并返回处理后的信息回来。

为了更好的理解ajax，我们先学会使用，再学会怎么去编写自己的ajax。

先准备ajax.js文件（函数已经写好）和一个文件a.txt，放到服务器里面；

ajax.js文件代码如下：

function ajax(url, fnSucc, fnFaild)

{

//1.创建Ajax对象

if(window.XMLHttpRequest)

{

var oAjax=newXMLHttpRequest();

}

else

{

var oAjax=newActiveXObject("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(url, fnSucc, fnFaild)函数参数介绍：

url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）
fnSucc:成功返回信息
fnFaild：失败返回信息

a.txt文件可以随便写内容到里面；

然后写一个文件读取a.txt的内容：

<!DOCTYPE HTML>

<html>

<head>

<metacharset="utf-8">

<title>无标题文档</title>

<scriptsrc="ajax.js"></script>

<script>

window.onload=function()

{

var oBtn=document.getElementById('btn1');

oBtn.onclick=function()

{

ajax('aaa.txt',function(str){

alert(str);

},function(){

alert('失败');

});

};

</script>

</head>

<body>

<inputid="btn1"type="button"value="读取"/>

</body>

</html>

如果 a.txt里面有中文，会出问题吗？记得要保证文件编码统一：utf-8

阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。 getTime()是毫秒数

<!DOCTYPE HTML>

<html>

<head>

<metacharset="utf-8">

<title>无标题文档</title>

<scriptsrc="ajax.js"></script>

<script>

window.onload=function()

{

var oBtn=document.getElementById('btn1');

oBtn.onclick=function()

{

ajax('aaa.txt?t='+newDate().getTime(),function(str){

alert(str);

},function(){

alert('失败');

});

};

</script>

</head>

<body>

<inputid="btn1"type="button"value="读取"/>

</body>

</html>

上面是获取txt里面内容的，如果想获取数组和json的内容。方法如下：ajax读取的到的都是字符串，要用函数eval()；
[1,2,3,4,5,6,7]
读取数组：

<script>

window.onload=function()

{

var oBtn=document.getElementById('btn1');

oBtn.onclick=function()

{

ajax('arr.txt?t='+newDate().getTime(),function(str){

var arr=eval(str);

alert(arr[3]);

},function(){

alert('失败');

});

};

</script>

读取json：

     
     
      
      
       
       [{a: 5, b: 7}, {a: 8, b: 12}]

     
     
      
      
       
       <script src="ajax.js"></script>
      
      
      
      
       
       <script>
      
      
      
      
       
       window.onload=function ()
      
      
      
      
       
       {
      
      
      
      
       
       	var oBtn=document.getElementById('btn1');
      
      
      
      
       
       	
      
      
      
      
       
       	oBtn.onclick=function ()
      
      
      
      
       
       	{
      
      
      
      
       
       		ajax('arr2.txt?t='+new Date().getTime(), function (str){
      
      
      
      
       
       			var arr=eval(str);
      
      
      
      
       
       			alert(arr[0].a);
      
      
      
      
       
       		}, function (){
      
      
      
      
       
       			alert('失败');
      
      
      
      
       
       		});
      
      
      
      
       
       	};
      
      
      
      
       
       };
      
      
      
      
       
       </script>

读取的json放大ul里面：

   
   
    
    
     
     [{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]

    
    
     
     
      
      <!DOCTYPE HTML>
     
     
     
     
      
      <html>
     
     
     
     
      
      <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>

HTTP请求方法

GET——用于获取数据（如：浏览帖子）：不安全，放到url里面传递信息，通过网址传递，容易出错，因为有大小限制：4-10k,有缓存
POST——用于上传数据（如：用户注册）：稍微安全一些，不通过网址url，可以传大文件，2G，没有缓存
GET、POST的区别
- get是在url里传数据：安全性、容量
- 缓存

     
     
      
      
       
       <!DOCTYPE HTML>
      
      
      
      
       
       <html>
      
      
      
      
       
       <head>
      
      
      
      
       
       <meta charset="utf-8">
      
      
      
      
       
       <title>无标题文档</title>
      
      
      
      
       
       </head>
      
      
      
      
       
        
      
      
      
      
       
       <body>
      
      
      
      
       
       <form action="http://www.baidu.com/" method="post">
      
      
      
      
       
       	用户名:<input type="text" name="username" /><br>
      
      
      
      
       
           密码：<input  type="password" name="password" /><br>
      
      
      
      
       
           <input type="submit" />
      
      
      
      
       
       </form>
      
      
      
      
       
       </body>
      
      
      
      
       
       </html>