• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)
    其实最简单的可以理解为:JavaScript + XMLHttpRequest + CSS +服务器端的集合,其本质上是一种浏览器端的技术。好了,

    简单的描述了一下,现在直接上代码吧!

    (1).功能描述:

    新建两个html页面分别为1.html和2.html,在不刷新的情况下点击1.html页面上的“获取数据”按钮后,将2.html页中的内容显示在1.html页面的div>标记中。

    (2).实现代码:

    1.html实现代码:
    复制代码 代码如下:

    head>
    title>传统的javascript方法实现Ajax功能/title>

    script type="text/javascript">

    //声明一个空的objXmlHttp对象
    var objXmlHttp = null;

    //根据浏览器的不同,返回改变了的实体对象
    function CreateXMLHTTP() {
    if (window.ActiveXObject) {
    objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
    if (window.XMLHttpRequest) {
    objXmlHttp = new XMLHttpRequest();
    } else {
    alert("初始化XMLHTTP错误!");
    }
    }
    }

    function GetSendData() {
    document.getElementById("divMsg").innerHTML = "正在加载中......"; //初始化内容
    //设置发送地址变量并赋初始值
    var strSendUrl = "2.html?date=" + Date();//为了能即时获取2.html变了的数据,在发送
    //URL时设置参数,功能是清空缓存中已加载的变量信息,重新获取新的即时数据
    //实例化XMLHttpRequest对象
    CreateXMLHTTP();
    //open方法初始化XMLHttpRequest
    objXmlHttp.open("GET", strSendUrl, true);
    //设置异步请求的事件处理程序
    objXmlHttp.onreadystatechange = function () { //回调事件函数
    if (objXmlHttp.readyState == 4) { //如果请求完成加载
    if (objXmlHttp.status == 200) { //如果响应已成功
    //获取数据
    document.getElementById("divMsg").innerHTML = objXmlHttp.responseText;
    }
    }
    }
    objXmlHttp.send(null);
    }
    /script>
    /head>
    body>
    input type="button" id="btn" value="获取数据" onclick="GetSendData()" />
    div id="divMsg">
    /div>
    /body>
    /html>

    2.html实现的代码:
    复制代码 代码如下:

    head>
    title>/title>
    /head>
    body>
    姓名:小菜br />
    性别:男br />
    邮箱:cj1161059871@163.com
    /body>
    /html>

    呵呵、、、这部分就这么多了,简单吧!唉,原来神奇的Ajax也是简单的(想想一开始的人机交互就发抖),赶快试试吧!童鞋......
    您可能感兴趣的文章:
    • 菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)
    • 菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)
    上一篇:ajax中文乱码的各种解决办法总结
    下一篇:菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能) 菜鸟,蔡之,Ajax,复习,第,