zoukankan      html  css  js  c++  java
  • Ajax的XMLHttpRequest对象

    Ajax的XMLHttpRequest对象
    编写一个例子:从服务器取回一个Hello Ajax字符串。
    HTML:
        <input type="button" value="ajax提交" onclick="Ajax();" />
        <div id="result">
        </div>

    js:定义Ajax函数,异步获取数据
    1、声明一个XMLHttpRequest对象
    2、对XMLHttpRequest对象实例化
    3、调用XMLHttpRequest对象的open(),设置服务器的URL和请求的方式,以及是否异步。
    4、注册异步回调事件,服务器相应会有事件通知,注册这个事件,就等于设置回调函数。
    5、发送请求,调用send()方法,使用Get方式请求可以不用设置send的参数。

    <script type="text/javascript">
        var XmlHttpReq = null;//声明一个XMLHttpRequest对象
        if (window.ActiveXObject) {//对XMLHttpRequest对象实例化
            XmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            XmlHttpReq = new XMLHttpRequest();
        }
        function Ajax() { //定义Ajax函数,异步获取数据,在Button中的onclick事件中调用
            XmlHttpReq.open("Get", "Default.aspx", true);//设置服务器的URL和请求的方式,以及是否异步
            XmlHttpReq.onreadystatechange = RequestCallBack;//注册异步回调事件,服务器相应会有事件通知,注册这个事件,就等于设置回调函数
            XmlHttpReq.send();发送请求,调用send()方法,使用Get方式请求可以不用设置send的参数或者null
        }
        function RequestCallBack() {//回调函数,注册在onreadystatechange事件之上
            if (XmlHttpReq.readyState == 4) {
                if (XmlHttpReq.Status == 200) {
                    document.getElementById("result").innerHTML = XmlHttpReq.responseText;
                }
            }
        }
    </script>
  • 相关阅读:
    html5--html实现乘法口诀表
    html5--switch选择结构的优化
    CSS盒子模型
    html5--项目实战-仿天猫(移动端页面)
    关于运动
    自然拼读法长元音
    揭开自然拼读法(Phonics)的神秘面纱
    ExtJs自学教程(1):一切从API開始
    四个好看的CSS样式表格
    【Linux】linux经常使用基本命令
  • 原文地址:https://www.cnblogs.com/lmfeng/p/2733775.html
Copyright © 2011-2022 走看看