Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

Venciki

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量142

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/97623398

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

Ajax:

XMLHttpRequest 对象
var request = new XMLHttpRequest

Ajax流程：

	function ajax(url, fnSucc, fnFaild){
	
		//1.创建Ajax对象
		var oAjax = null;
		if(window.XHMHttpRequest) {
			oAjax = new XMLHttpRequest();
		}else{
			oAjax = new ActiveXObject('Microsoft.XMLHTTP');
		}
		//2.连接服务器
		oAjax.open('GET', url, true);
		//3.发送请求
		oAjax.send();
		//4.接收服务器的返回
		oAjax.onreadystatechange = function() {
			if(oAjax.readyState == 4) {   //完成
				if(oAjax.status == 200){   //成功
					fnSucc(oAjax.responseText);
				}else{
					if(fnFaild)
						fnFaild(oAjax.status);
				}
			}
		}
	}

这里是一个ajax简单的应用（请求静态文件）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="ajax.js"></script>
</head>
<body>
    <button>读取</button>
    <script>
        var oBtn = document.getElementsByTagName('button')[0];
        oBtn.onclick = function() {
            ajax('abc.txt',function(str) {
                alert(str);
            })
        }
    </script>
</body>
</html>

请求到同文件夹下的 abc.txt 文件，但是这里有个问题，就是无论现在咋改abc.txt里面的内容
它弹出来的还是最初的内容。（这就是缓存问题）。
优化：

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="ajax.js"></script>
</head>
<body>
    <button>读取</button>
    <script>
        var oBtn = document.getElementsByTagName('button')[0];
        oBtn.onclick = function() {
            ajax('abc.txt?t='new Date().getTime(),function(str) {
                alert(str);
            })
        }
    </script>
</body>
</html>

加个时间戳 'abc.txt?t='new Date().getTime() 这样的话它每次请求的 t 都是不一样的，同时也就解决了缓存问题。也不是说以后要把所有的缓存都给干掉，因为缓存还是优点大于缺点的，可以减少服务器的压力。

动态文件

eval();

我们来看看它的作用：

	var str = '5+10';
	alert(eval(str));

我们来看看结果：(它直接弹出来的就是计算的结果，而不是字符串)
在这里插入图片描述

当我们新创建一个txt文件，内容为: [1,2,3,4]，用ajax传输的时候就默认它为一串字符串，而此时输出数组第0位的时候是一个 [ （单边中括号）,所以在用的时候要加上 eval();

更高级的用法：

	var str = "function show() {alert('abc');}";
	eval(str); //eval之后show函数就可以用了。
	show();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="ajax.js"></script>
</head>
<body>
    <button>读取</button>
    <script>
        var oBtn = document.getElementsByTagName('button')[0];
        // oBtn.onclick = function() {
        //     ajax('abc.txt?t=' + new Date().getTime(),function(str) {
        //         alert(str);
        //     })
        // }
        oBtn.onclick = function() {
            ajax('date.txt', function(str) {
                //str=>'[1,2,3,4]'
                //此时给它加一个eval
                var arr = eval(str);
                alert(arr[0]);
            })
        }
    </script>
</body>
</html>

加 eval 后时弹出来的是 1 。此时就是数组中真正的第0位了。

简单的ajax分页效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="ajax.js"></script>
</head>
<body>
    <ul id="ul1"></ul>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <script>
        var oUl = document.getElementById('ul1');
        var oBtn = document.getElementsByTagName('a');
        for(var i = 0; i < oBtn.length; i ++) {
            oBtn[i].index = i;
            oBtn[i].onclick = function() {
                ajax('page'+(this.index+1)+'.txt', function(str){
                    var oDate = eval(str);

                    oUl.innerHTML = '';
                    for(var i = 0; i < oDate.length; i ++) {
                        var oLi = document.createElement('li');
                        oLi.innerHTML = '<strong>' + oDate[i].user + '</strong>'+'<li>' + oDate[i].pass + '</li>';
                        oUl.appendChild(oLi);
                    }
                })
            }
        }
    </script>
</body>
</html>

Ajax原理

get : 把数据放在URL里面来提交
post : 把数据放在不是 URL的地方
GET 安全性低、容量低便于分享会缓存
POST 安全性一般、容量几乎无限（32位是2G，64位几乎无限）

GET 用于获取数据（如：浏览帖子）
POST 用于上传数据（如：用户注册）

编写Ajax

==用一个不存在的变量：出错
用一个不存在的属性：undefined ==

Ajax请求：

创建ajax对象
连接服务器
发送请求
接收返回

open(方法, url, 是否异步);

请求状态监控

onreadystatechange事件
readyState属性：请求状态

0 (未初始化) 还没有调用open()方法
1 (载入)一调用send()方法,正在发送请求
2 (载入完成) send()方法完成, 已收到全部响应内容
3 (解析) 正在解析响应内容
4 (完成)相应内容解析完成，可以在客户端调用了
status属性为200的时候成功。
http请求

是计算机通过网络进行通信的规则。
http是一种无状态的协议
一个完整的http请求过程，通常有下面7个步骤
1. 建立TCP连接
2. Web浏览器向web服务器发送请求命令
3. web浏览器发送请求头信息
4. web服务器应答
5. web服务器发送应答头信息
6. web服务器向浏览器发送数据
7. web服务器关闭TCP连接

GET：

	一般用于信息获取
	使用url传递参数
	对所发送信息的数量也有显示，一般在2000个字符

POST：

	一般用于修改服务器上的资源。
	对所发送信息的数量无限制