Ajax学习计划

Ajax

　　AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）。是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

Ajax介绍

特点：

1
2
什么是服务器：
搭建简单的本地服务器软件Wamp、XAMPP，提供简单的用户服务，读取数据。

使用Ajax

1
2
3
4
5
基础：请求并显示静态TXT、json文件
字符集编码：UTF-8、GB2312，使用相同的编码。
缓存：chrome下的缓存还不是很严重，IE下的缓存比较严重，除非关闭浏览器。

缓存的工作原理：通过URL进行缓存的。通常可以使用URL?t= + new Date().getTime()
1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function (){
	var oBtn = document.getElementById('Btn1');

	oBtn.onclick = function (){
		ajax('aa.txt?t=' + new Date().getTime(),
			function(str){
				alert(str);
			},function(){
				alert('失败');
			});
	}
}

通过Ajax读取的都是字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
通过eval()将文件内容解析成JS可以识别的内容
window.onload = function (){
	var oBtn = document.getElementById('Btn1');

	oBtn.onclick = function (){
		ajax('aa.txt?t=' + new Date().getTime(),
			function(str){
				var SA = eval(str);
				alert(SA[1]);
			},function(){
				alert('失败');
			});
	}
}

读取Json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload = function (){
	var oBtn = document.getElementById('Btn1');
	var oUls = document.getElementById('ul1');

	oBtn.onclick = function (){
		ajax('aa.txt?t=' + new Date().getTime(),
			function(str){
				var SA = eval(str);

				for(var i=0;i<SA.length;i++){
					var oLi = document.createElement('li');
					oLi.innnerHTML='用户名：<strong>' + SA[i].name +'</strong>密码：<span>' + SA[i].pass + '</span>';
					//添加到Ul里
					oUl.appenChild(oLi);
				}
				alert(SA[1]);
			},function(){
				alert('失败');
			});
	}
}
1
2
3
4
5
6
7
8
9
HTTP请求的方法
GET：用于获取数据（如：浏览贴子）
POST：用于上传数据（如：用户注册）
区别：
get是在URL里传送数据：安全性低、容量有限（2000字符），有缓存，适合请求信息
post是通过HTTP请求，安全性好一点，无缓存，适合传递信息
安全的方式使用HTTPS。
GET方式：
?name=word&password=password

Ajax进阶

创建Ajax

1
2
3
4
IE6
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");

var oAjax = new XMLHttpRequest();
1
2
3
4
5
6
7
注意：

//使用没有定义的变量——报错
alert(a);

//使用没有定义的属性——undefined
alert(window.a);
1
2
3
4
5
6
7
function (){
	if(window.XMLHttpRequest){
		var oAjax = new XMLHttpRequest();
	}else{
		var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

连接服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
open（方法，连接的文件名，同步/async异步true）ajxa其实都是异步的
open(method,url,async);
oAjax.opan('GET','a.text?=t'+new Date().getTime(),true);



同步和异步的区别?


同步：（一次加载）浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,j进行下一步操作。

异步：（同时加载）浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

（待完善）

发送请求

1
2
oAjax.send();
send(string);

接收返回

1
2
3
4
5
6
7
8
9
10
oAjax.onreadystatechange = function(){
	//浏览器和服务器，进行到哪一步了
	if(oAjax.readyState==4){
		if(oAjax.status==200){
			alert('成功：'+oAjax.status);
		}else{
			alert('失败：'+oAjax.status);
		}
	}
}
1
2
3
4
5
0 （未初始化）
1 （载入）
2 （载入完成）send()方法完成，已接收全部信息
3 （解析）正在解析响应
4 （完成）完成但不代表成功
1
2
3
4
5
6
Ajax Status请求状态

200 成功
301
304
404
1
2
3
4
IE6
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");

var oAjax = new XMLHttpRequest();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
封装函数

function ajax(url,fnSucc,fnFaild){
	if(window.XMLHttpRequest){
		var oAjax = new XMLHttpRequest();
	}else{
		var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
	}

	oAjax.opan('GET','url?=t'+new Date().getTime(),true);

	oAjax.send();

	oAjax.onreadystatechange = function(){
		if(oAjax.readyState==4){
			if(oAjax.status==200){
				fnSucc(oAjax.responseText);
			}else{
				if(fnFaild){
					fnFaild(oAjax.status);
				}
			}
		}
	}
}

ajax('a.txt',function(str){
	alert(str);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
封装函数

function ajax(url,data,fnSucc,fnFaild){
	if(window.XMLHttpRequest){
		var oAjax = new XMLHttpRequest();
	}else{
		var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
	}

	oAjax.opan('POST','url',true);

	oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

	oAjax.send(data);

	oAjax.onreadystatechange = function(){
		if(oAjax.readyState==4){
			if(oAjax.status==200){
				fnSucc(oAjax.responseText);
			}else{
				if(fnFaild){
					fnFaild(oAjax.status);
				}
			}
		}
	}
}

ajax('a.txt','name=' + document.getElementById("staffName").value + '&number=' + document.getElementById("staffNumber").value + '&sex=' + document.getElementById("staffSex").value + '&job=' + document.getElementById("staffJob").value,function(str){
	alert(str);
})

Ajax数据

1
XML、Json：同等数据量，XML更大

本文标题:Ajax学习计划

文章作者:Little Grass

发布时间:2014年01月27日 - 14时11分

最后更新:2016年12月21日 - 21时55分

原始链接:http://smile-leaf-language.github.io/2014/01/27/Ajax/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. Ajax介绍
    1. 1.1. 特点：
    2. 1.2. 使用Ajax
      1. 1.2.1. 通过Ajax读取的都是字符串
      2. 1.2.2. 读取Json文件
  2. 2. Ajax进阶
    1. 2.1. 创建Ajax
    2. 2.2. 连接服务器
    3. 2.3. 发送请求
    4. 2.4. 接收返回
  3. 3. Ajax数据
,