undefined

ajax原理

发表于 | 分类于 ，
字数统计: 1,885 | 阅读时长 ≈ 9

什么是ajax

Asynchronous JavaScript and XML(异步JavaScript和XML)。作用1、节省用户操作，时间，提高用户体验，减少数据请求。2、传输获取数据

使用Ajax：使用Ajax获取某一文本文件的内容 ,可以使页面在无刷新的情况下去获取数据。因为网页是单次请求的，如果不再去刷新，请求的话，页面是不会变化的。

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script type="text/javascript">
    window.onload = function() {
        var oBtn = document.getElementById('btn');

        oBtn.onclick = function() {
            //打开浏览器
            /*1、创建一个ajax对象*/
            //ie6以下 new  ActiveXObject('Microsoft.XMLHTTP')
            var xhr=null;
           /* if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr= new ActiveXObject('Microsoft.XMLHTTP');
            }*/
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                xhr= new ActiveXObject('Microsoft.XMLHTTP');
            }
            
            //在地址栏输入地址
            /*
            open方法
            参数
                1、打开方式
                2、地址
                3、是否异步  
                   异步：非阻塞，前面的代码不会影响后面代码的执行
                   同步：阻塞，前面的代码会影响后面代码的执行
            */
            xhr.open('get', '1.txt', true);//true代表异步 false代表同步
            //提交，发送请求
            xhr.send();
			//等待服务器返回内容
            //readyState:ajax工作状态
            //responseText:ajax请求返回的内容就被存放在这个属性下民
            //on readystate change :当readyState改变的时候触发
            //status:服务器状态，http状态码
            xhr.onreadystatechange = function() {

                if (xhr.readyState == 4) {
                    if(xhr.status==200){   alert(xhr.responseText);}
                    else{
                        alert("出错了"+"err:404");
                    }
                 
                }
            }
        }
    }
    </script>
</head>

<body>
    <input type="button" name="按钮" id="btn" />
</body>

</html>

表单

表单：数据的提交

action 数据提交的地址，默认是当前页面
method 数据提交的方式，分为get和post，默认是get
enctype 提交的数据的格式,默认是application/x-www-form-urlencoded

get方式：把数据名称和数据对应的数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?的后面传到指定页面。url长度限制的原因，我们不要通过get方式传递过多的数据

post方式：理论上传递数据长度无限制

数据的获取

onreadystatechange事件

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

status属性：服务器请求资源的状态
responeseText 返回以文本形式存放的内容
responseXML 返回XML形式的内容

ajax获取数据的处理和实例

JSON

chrome,ie7以上都支持，Ie7和Ie7以下不支持。可以去json.org官网下载对应的语言的包，来支持json互转。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="json.js"></script>  //这里的json.js文件是从json.org官网复制的json2.js库,这样就可以解决ie7及ie7以下不兼容的问题
	<script>
		
		alert(JSON);
	</script>
</head>
<body>

</body>
</html>

stringify

可以把一个对象转换成一个字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="json.js"></script>
	<script>
		
		//alert(JSON);

		var arr=[1,2,3];
		var j={left:100};
		alert(JSON.stringify(arr));//把数组转成字符串
		alert(JSON.stringify(j));//把JSON转成字符串
	</script>
</head>
<body>

</body>
</html>

parse

可以把字符串转换成对应的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="JSON.js"></script>
	<script>

		var s1='[100,200,300]';
		var a1=JSON.parse(s1);  //字符串转换成数组
		alert(a1[0]);   

		var s2='{"left":100}';
		//JSON将作为key的值必须用双引号括起来
		var  a2=JSON.parse(s2); //字符串转换成JSON
		alert(a2.left);
	</script>
</head>
<body>

</body>
</html>

实例：获取并显示新闻数据

php后端部分：getNews.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$news =array(
	array（'title' =>'很穷但很自豪！实拍朝鲜农村生活现状','data'=>'2015-7-8' ）, 
	array（'title' =>'周冬雨登杂志封面 清新灵动别具一格','data'=>'2015-9-10' ）,
	array（'title' =>'听说桂林这个壕要过生日，这些大牌都来了','data'=>'2015-9-10' ）,
	array（'title' =>'妈妈把老公旧衣改成宝宝的新衣','data'=>'2015-9-10' ）,
	array（'title' =>'事实告诉你 中餐在美到底有多受欢迎!','data'=>'2015-9-10' ）,
	array（'title' =>'海外体检全知道：去日本体检该办哪种签证？','data'=>'2015-9-10' ）,

);

echo json_encode($news);

前端部分：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="JSON.js"></script>
    <script>
    window.onload = function() {
        var oBtn = document.getElementById('btn');
        var xhr = null;
        oBtn.onclick = function() {
            try {
                xhr = new XMLHttpRequest();
            } catch (e) {
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }

            xhr.open('get', 'getNews.php', true);
            xhr.send();

            xhr.onreadystatechange = function() {

                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        // alert(xhr.responseText);
                        var data = JSON.parse(xhr.responseText); //把字符串转换成对应的对象
                        var oUl = document.getElementById('ul1');
                        var html = '';
                        for (var i = 0; i < data.length; i++) {
                            html += '<li><a href="">' + data[i].title + '</a>[<span>' + data[i].date + '</span>]</li>';
                        }
                        oUl.innerHTML = html;
                    } else {
                        alert('出错了，err:' + xhr.status);
                    }

                }
            }
        }
    }
    </script>
</head>

<body>
    <input type="button" name="按钮" value="按钮" id="btn" />
    <ul id="ul1">
    </ul>
</body>

</html>

应用中get和post的区别处理

get方式：缓存问题

解决方法：在url?后面连接一个随机数，时间戳。

get方式：中文乱码问题

解决方法：编码encodeURI,中文进行编码再传输。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="JSON.js"></script>
    <script>
    window.onload = function() {
        var oBtn = document.getElementById('btn');
        var xhr = null;
        oBtn.onclick = function() {
            try {
                xhr = new XMLHttpRequest();
            } catch (e) {
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }
            /*解决缓存问题：在url?后面连接一个随机数，时间戳
            2、乱码：编码encodeURI,中文进行编码再传输
            */
            xhr.open('get', '2.get.php?username=' + encodeURI('李明') + '&age=30&' + new Date().getTime(), true);
            xhr.send();

            xhr.onreadystatechange = function() {

                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        alert(xhr.responseText);

                    } else {
                        alert('出错了，err:' + xhr.status);
                    }

                }
            }
        }
    }
    </script>
</head>

<body>
    <input type="button" name="按钮" value="按钮" id="btn" />
    <ul id="ul1">
    </ul>
</body>

</html>

post方式：

数据放在send()方法里面作为参数传递，记得要申明发送的数据类型。

注意：post方式没有缓存问题，因为是往服务器提交数据，不产生缓存。post方式，中文也不会乱码，无需编码

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="JSON.js"></script>
    <script>
    window.onload = function() {
        var oBtn = document.getElementById('btn');
        var xhr = null;
        oBtn.onclick = function() {
            try {
                xhr = new XMLHttpRequest();
            } catch (e) {
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }

            xhr.open('post', '2.get.php', true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');                //申明发送的数据类型
            xhr.send('username=leo&age=30');

            xhr.onreadystatechange = function() {

                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        alert(xhr.responseText);

                    } else {
                        alert('出错了，err:' + xhr.status);
                    }

                }
            }
        }
    }
    </script>
</head>

<body>
    <input type="button" name="按钮" value="按钮" id="btn" />
    <ul id="ul1">
    </ul>
</body>

</html>

后端部分：

1
2
3
4
5
6
7
8
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username=$_POST['username'];
$age=$_POST['age'];

echo "你的名字：{$username},年龄：{$age}";
觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多