前端相关技术之ajax相关

AJAX技术点

async javascript and xml:异步的js和xml，用js异步去操作xml

ajax用于数据交互，不能操作DOM

–节省用户操作，时间，提高用户体验，减少数据请求

–传输获取数据

使用场景：局部刷新页面，手机验证码验证发送ajax请求

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){})    //阻塞 -> 同步

//非阻塞 - 异步
/*setTimeout(function() {
    alert(1);
}, 2000);

alert(2);*/

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');
        }
        
        //alert( xhr.readyState );
        //在地址栏输入地址
        /*
            open方法
            参数
                1.打开方式
                2.地址
                3.是否异步
                    异步:非阻塞 前面的代码不会影响后面代码的执行
                    同步:阻塞 前面的代码会影响后面代码的执行
        */
        xhr.open('get','1.txt',true);
        //提交 发送请求
        //alert(1);
        xhr.send();
        //alert( xhr.readyState );
        
        //alert(1)
        
        //alert( xhr.responseText );
        
        
        //等待服务器返回内容
        /*
            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：' + xhr.status);
                }
            }
            
        }
        
    }
}
</script>
</head>

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

表单参数

<body>
    表单：数据的提交
        action : 数据提交的地址，默认是当前页面
        method : 数据提交的方式，默认是get方式
            1.get
                把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面
            2.post
        enctype : 提交的数据格式，默认application/x-www-form-urlencoded
    <form action="1.get.php" enctype="application/x-www-form-urlencoded">
        <input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>
</body>

get与post请求，get方式可能有缓存，post提交是没有缓存

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){})    //阻塞 -> 同步

//非阻塞 - 异步
/*setTimeout(function() {
    alert(1);
}, 2000);

alert(2);*/

window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    
    
    oBtn.onclick = function() {
        
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        /*
            1.缓存 在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" value="按钮" id="btn" />
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){})    //阻塞 -> 同步

//非阻塞 - 异步
/*setTimeout(function() {
    alert(1);
}, 2000);

alert(2);*/

window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    
    
    oBtn.onclick = function() {
        
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        xhr.open('post','2.post.php',true);
        //post方式，数据放在send()里面作为参数传递
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
        //post没有缓存问题
        //无需编码
        xhr.send('username=刘伟&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" value="按钮" id="btn" />
</body>
</html>