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更大
文章目录
  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数据
,