Ajax

ajax

阻止缓存

有时候网页不能依靠刷新更新数据，是因为浏览器有缓存，有时只能延迟收到更新的数据甚至重开浏览器才能更新数据。这时候，就需要阻止浏览器的缓存。

1
ajax('aa.txt?t='+new Date().getTime(),fnsucc(){},fnfail(){})

阻止缓存只需要在url路径后加？，再加上一个实时变化的变量（这个变量实际上是无用的），这样仅仅是使url实时变化，每时每刻都不一样，以此做到阻止缓存。

get与post的区别

  • get：
    1.表单提交的信息通过网址（url）上传。
2.容量小，不适合大数据传递。
3.安全性极差。
4.有缓存。
  • post：
    1.表单提交的信息不通过网址上传，通过http content上传。
2.容量大。
3.安全性好一些（仍有隐患）。
4.无缓存。

编写ajax

  1. 创建Ajax对象

    1
    2
    3
    4
    5
    6
    if(window.XMLHttpRequest){
    	var oAjax = new XMLHttpRequest();//非IE6
    }
    else {
    	var oAjax = new ActiveXobject("Microsoft.XmlHTTP");//兼容IE6
    }

  2. 连接到服务器

    1
    2
    //open（方法，文件名，异步传输）
    oAjax.open('GET','a.txt',true);

  3. 发送请求

    1
    oAjax.send();

  4. 接收返回值 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    oAjax.onreadystatechange = function(){
    	//oAjax.readyState //浏览器和服务器，进行到哪一步了
    	if(oAjax.reayState == 4) //读取完成
    	{
    		if(oAjax.status == 200) //成功
    		{
    			alert('成功')；
    		}
    		else{
    			alert('失败');
    		}
    	}
    	
    }

其中，返回值有五种情况：

  • 0：（未初始化）还没有调用open()方法
  • 1：（载入）已调用send（）方法，正在发送请求
  • 2：（载入完成）send（）方法完成，已收到全部响应内容。
  • 3：（解析）正在解析响应内容
  • 4：（完成）响应内容解析完成，可以在客户端调用了。

一般使用时，会将其封装成一个ajax函数，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function ajax(url,fnSucc,fnFail)
	if(window.XMLHttpRequest){
	var oAjax = new XMLHttpRequest();
	}
else {
	var oAjax = new ActiveXobject("Microsoft.XmlHTTP");
	}
	oAjax.open('GET',url,true);
	oAjax.onreadystatechange = function(){
	//oAjax.readyState 
	if(oAjax.reayState == 4) 
	{
		if(oAjax.status == 200) 
		{
			fnSucc(oAjax.status)；
		}
		else{
			if(fnFail){
				fnFail(oAjax.status);
			}
		}
	}
	}
}