Ajax Study Notes the first Ajax application

Original link: https://www.mk2048.com/blog/blog.php?id=h0chkcaji1aa&title=Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B01%E4 % B9% 8B% E7% AC % AC% E4% B8% 80% E4% B8% AAAjax% E5% BA% 94% E7% 94% A8% E7% A8% 8B% E5% BA% 8F

Code

<head>
    <title>An Ajax demo</title>
    <script src="../js/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //XMLHttpRequest对象:初始化为false;
        var XMLHttpRequestObject = false;

        //Netscape Navigator(7.0版及更高版本),Apple Safari(1.2及更高版本)和Firefox
        if (window.XMLHttpRequest) {
            XMLHttpRequestObject = new XMLHttpRequest();
        }
        //在Internet Explorer(5.0及更高版本)
        else if (window.ActiveXObject) {
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        }

        function getData(dataSource, divID) {
            //如果创建的XMLHttpRequest对象无效，则退出
            if (XMLHttpRequestObject) {
                var obj = document.getElementById(divID);
                //打开XMLHttpRequest对象并配置好以便和服务器通信
                XMLHttpRequestObject.open("GET", dataSource);

                //处理数据下载
                XMLHttpRequestObject.onreadystatechange = function () {
                    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                        //获取数据
                        obj.innerHTML = XMLHttpRequestObject.responseText;
                    }
                }
                //真正执行下载的代码使用post方法时send("data=" data)
                XMLHttpRequestObject.send(null);
            }
            else {
                var obj = document.getElementById("targetDiv");
                obj.innerHTML = "Sorry,your browser can't do Ajax.";
            }
        }
    </script>
</head>
<body>
    <h1>
        An Ajax demo</h1>
    <form>
    <!--data.txt文件和index.htm必须确保位于服务器的同一目录中,如果不在同一目录，必须加上上几级目录,例:data/data.txt-->
    <input type="button" value="Fetch the message" onclick="getData('data.txt','targetDiv')" /></form>
    <div id="targetDiv">
        <p>
            The fetched message will appear here</p>
    </div>
</body>
</html>

operation result:

Code Description:

Create XMLHttpRequest object

// In Netscape Navigator (version 7.0 and later), Apple Safari (1.2 and higher) and Firefox, you can create XMLHttpRequest object with the following code
//window.XMLHttpRequest: window.XMLHttpRequest determine whether the object exists (exist browser XMLHttpRequest object can be created by the following method)
IF (window.XMLHttpRequest) {
　　the XmlHttpRequestObject = new new XMLHttpRequest ();
}
// XMLHttpRequest object can be created with the following code in Internet Explorer (5.0 and above)
// if the user Microsoft Internet Explorer is used should window.ActiveXObject determines whether the object exists (presence of the browser can be created using the following method XMLHttpRequest object)
the else iF (window.ActiveXObject) {
　　the XmlHttpRequestObject the ActiveXObject new new = ( "Microsoft.XMLHTTP");
}

Open the XMLHttpRequest object

//open("Method","URL"[,asyncFlag[,"userName"[,"password"]]])方括号[]中的内容是可选的
//各个参数含义如下:
//Method:用于打开HTTP的方法,如GET,POST,PUT,HEAD或PROPFIND
//URL:请求的URL
//asyncFlag:表示是否为异步调用的布尔值,默认为true
//userName:用户名
//password:密码
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequest.readyState和XMLHttpRequest.status

//readyState 
//0:未初始化
//1:正在加载
//2:已加载
//3:交互式
//4:完成,表示数据已下载完毕

//status
//200:正常,表示下载正常
//404:未找到
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
    //下载的数据是简单文本对象,可从XMLHttpRequest对象的responseText属性读取这些数据
    //下载的数据是XML格式,可从XMLHttpRequest对象的responseXml属性读取这些数据
    obj.innerHTML = XMLHttpRequestObject.responseText;
}

//真正执行下载的代码
XMLHttpRequestObject.send(null);

to sum up:

创建Ajax的一般步骤:
(1)、创建一个XMLHttpRequest对象
(2)、使用XMLHttpRequest对象的open方法对其进行配置
(3)、将一个处理下载的JavaScript匿名函数通XMLHttpRequest对象的onreadystatechange属性关联起来
(4)、使用GET HTTP方法来获取数据，发送一个null值给服务器，这样将开始下载数据

Note: In the IE browser, press F12 to debug, only get 10 or more correct results only version, without any problems on the 360

More professional front-end knowledge, make the [2048] ape www.mk2048.com

Ajax Study Notes the first Ajax application

Guess you like