王雨的JavaScript练习03---Ajax初体验

时间 2019-12-10

标签 javascript 练习 ajax 体验栏目 JavaScript 繁體版

原文原文链接

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。html

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。编程

AJAX 最大的优势是在不从新加载整个页面的状况下，能够与服务器交换数据并更新部分网页内容。浏览器

AJAX 不须要任何浏览器插件，但须要用户容许JavaScript在浏览器上执行。服务器

html：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="new"></div>
<script src="script/addLoadEvent.js"></script>
<script src="script/getHTTPObject.js"></script>
<script src="script/getNewContent.js"></script>
</body>
</html>

js：异步

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function getHTTPObject() {
    if (typeof XMLHttpRequest == "undefined")
        XMLHttpRequest = function () {
            try { return new ActiveXObject("Msxml2,XMLHTTP.6.0"); }
            catch (e) {}
            try { return new ActiveXObject("Msxml2,XMLHTTP.3.0"); }
            catch (e) {}
            try { return new ActiveXObject("Msxml2,XMLHTTP"); }
            catch (e) {}
            return false;
        }
        return new XMLHttpRequest();
}

function getNewContent() {
    var request = getHTTPObject();
    if (request){
        request.open("GET","example.txt",true);
        request.onreadystatechange = function () {
            if (request.readyState == 4){
                var para = document.createElement("p");
                var txt = document.createTextNode("request.responseText");
                para.appendChild(txt);
                document.getElementById("new").appendChild(para);
            }
        };
        request.send(null);
    }else {
        alert('抱歉，你的浏览器不支持XMLHttpRequest')
    }
}
addLoadEvent(getNewContent);