AJAX

AJAX全称Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。
Web运作的原理就是,一次HTTP请求对应一个页面。
如果要让用户留在当前页面中,同时又要发出新的HTTP请求,那就可以使用js来发送请求,接收到数据之后再用js更新页面,这样用户就可以停留在当前页面,而数据却可以得到更新。
用JavaScript写一个完整的AJAX代码并不复杂,但是需要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应。

 

AJAX主要依靠的是XMLHttpRequest对象:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        window.onload=function () {


            function success(text) {
                var p = document.getElementById('txt');
                p.innerText = text;
            }

            function fail(code) {
                var p = document.getElementById('txt');
                p.innerText = 'Error code: ' + code;
            }

            // 新建XMLHttpRequest对象
			
            var request;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest();
            } else {
				//兼容ie
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }

            //设置回调函数,在回调函数中使用request.readyState === 4来判断请求是否完成
            //如果已完成,再根据status === 200判断是否是一个成功的响应
            request.onreadystatechange = function () {
                // 状态发生变化时,函数被回调
                if (request.readyState === 4) { // 成功完成
                    // 判断响应结果:
                    if (request.status === 200) {
                        // 成功,通过request.responseText拿到响应的文本:
                        return success(request.responseText);
                    } else {
                        // 失败,根据响应码判断失败原因:
                        return fail(request.status);
                    }
                } else {

                    // HTTP请求还在继续...
                }
            }

            // 发送请求:
            request.open('GET', 'http://localhost:63342/WEBcode/test/my.xml');
            //open方法有3个参数,第一个参数指定是get还是post第二个参数指定URL地址(与当前地址要完全相同),第三个参数指定是否使用异步默认true
            request.send();
            //发送请求

            alert('请求已发送,请等待响应...');
        }

    </script>
</head>
<body>
<div >
    <p id="txt" style="color: red"></p>
</div>
</body>
</html>



my.xml
<?xml version="1.0" encoding="gb2312"?>

 


GET请求和POST请求的区别:


1.效率


GET的意思是『得』,从服务器获取数据(也可以上传数据,参数就是),效率较高
POST的意思是『给』,但可以向服务器发送数据和下载数据,效率不如GET
2.缓存


GET 请求能够被缓存,默认的请求方式也是有缓存的
POST请求默认不会缓存
缓存是针对URL来进行缓存的,GET请求由于其参数是直接加在URL上-的,一种参数组合就有一种URL的缓存,可以根据参数来进行一一对应,重复请求是幂等的(不论请求多少次,结果都一样);
而POST请求的URL没有参数,每次请求的URL都相同,数据体(HTTPBody)可能不同,无法一一对应,所以缓存没有意义
3.安全性


GET的所有参数全部包装在URL中,明文显示,且服务器的访问日志会记录,非常不安全
POST的URL中只有资源路径,不包含参数,参数封装在二进制的数据体中,服务器也不会记录参数,相对安全。所有涉及用户隐私的数据都要用POST传输


4.数据量


HTTP协议中均没有对GET和POST请求的数据大小进行限制,但是实际应用中它们通常受限于软硬件平台的设计和性能。


GET:不同的浏览器和服务器不同,一般限制在2~8K之间,更加常见的是1k以内
POST方法提交的数据比较大,大小靠服务器的设定值限制,PHP默认是2M(具体的话大家以后看后端给的开发文档就行了)

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章