关于Ajax实现的简单示例

时间 2019-11-10

标签关于 ajax 实现简单示例栏目 Ajax 繁體版

原文原文链接

1、代码示例javascript

关于Ajax的基本概念（包括XMLHttpRequest对象及其相关方法属性）移步这里（w3school中文版）学习了解。html

<!doctype html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <title>使用Ajax异步加载数据</title>
    <script type = "text/javascript">
        function loaded() {
            var xmlhttp = null;    //定义一个变量存储XMLHttpRequest对象
            //使用try-catch获取XMLHttpRequest对象，XMLHttpRequest对象是实现Ajax的核心基础
            try {
                xmlhttp = new XMLHttpRequest();    //针对Firefox，chrome，Safari等浏览器
            }
            catch(e) {
                try {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   //IE浏览器
                }
                catch(e) {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   //老式IE浏览器
                }    
            }
            
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {     //当请求已完成，且服务器响应状态就绪时
                    //alert(xmlhttp.responseText);
                    document.getElementById("new").innerHTML = xmlhttp.responseText;
                    //document.getElementById("new").innerText = xmlhttp.responseText;
                    //使用innerText属性，一直没法获得Ajax的响应字符数据，搞不懂什么缘由，目前只能经过innerHTML属性获取输出"example.txt"字符数据
                }
            }

            xmlhttp.open("GET","example.txt",true); //说明请求方式类型，以获取html文档同路径下的一个txt文档数据为例，直接跳事后台脚本交互过程，简单的示例哈~~
            xmlhttp.send();         //发送请求
        }
        window.onload = function(){
            loaded();
        }
    </script>
</head>

<body>
    <div id = "new">ok,that's shit!!!</div>
    <!-- <input type = "button" value = "shit" /> -->
</body>
</html>

2、效果截图java

3、结论ajax

虽然理论能看的明白，但仍是要多实践、敲代码才是真理！此次虽然是一个简单示例，却没料想由于使用innerText属性没法输出Ajax获取的数据，找了老半天都没发现问题，也不知道缘由，只能使用innerHTML属性（其实就是Firefox不支持innerText属性而已，可使用textContent替代）。主要结论以下：chrome

一、直接在本地硬盘创建一个.txt文档做为Ajax请求的数据源时，chrome、IE浏览器会限制Ajax请求使用的协议。好比请求路径是file://协议从本身硬盘里加载example.txt文件，就会看到"Cross origin requests are onlu supported for HTTP"(跨域请求支持HTTP协议)的错误信息（如图）。Firefox浏览器没有限制。编程

~~二、基于Firefox浏览器，使用innerText属性没法输出Ajax获取的txt文档字符数据，而使用innerHTML属性可正常获取输出（写入当前HTML文档中），缘由暂不明。~~跨域

三、至于上述IE、Chrome浏览器不支持本地文件Ajax请求，可以使用JQuery的Ajax相关的接口方法，或者使用WebStorm开发工具编写上述代码，便可解决本地测试ajax请求问题。浏览器

4、参考资料服务器

《JavaScript DOM编程艺术（第2版）》[英]Jeremy Keith [加]Jeffrey Sambells著杨涛等译,人民邮电出版社. 第115页-第119页
Ajax教程