zoukankan      html  css  js  c++  java
  • Ajax基础实例(二)

    用了很久的Asp.Net Ajax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起xmlHttpRequest的该如何使用了.

    以前记的也不怎么清楚,这次就重新完整的学习一遍吧,也为了自己以后能找个完整的地方来复习.

    什么是Ajax

    Ajax的全称是Asynchronous Javascript And XML.AJax由HTML,Javascript,DHTML和DOM组成.

    HTML用于建立Web表单

    Javascript代码用于运行Ajax应用程序的核心代码,用于和服务器引用程序进行通信

    DHTML用于动态更新表单

    DOM用于处理HTML结构和服务器返回的XML

    时至今日,Js中可以处理的数据包括了字符串,JSON,XML数据.

    优点

    通过XMLHttpRequest对象来和服务器进行通信;在与服务器进行异步数据传输时,传输的数据更少;更好的用户体验. 

    实例

    get.htm页面HTML代码如下:

    <body>
        <label for="txt_username">
            姓名:</label>
        <input type="text" id="txt_username" />
        <br />
        <label for="txt_age">
            年龄:</label>
        <input type="text" id="txt_age" />
        <br />
        <input type="button" value="GET" id="btn" onclick="btn_click();" />
        <div id="result">
        </div>
    </body>

    js代码如下:

    <script type="text/javascript">
        function btn_click() {
            //创建XMLHttpRequest对象
            var xmlHttp = new XMLHttpRequest();
    
            //获取值
            var username = document.getElementById("txt_username").value;
            var age = document.getElementById("txt_age").value;
    
            //配置XMLHttpRequest对象
            xmlHttp.open("get", "Get.aspx?username=" + username
                + "&age=" + age);
    
            //设置回调函数
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    document.getElementById("result").innerHTML = xmlHttp.responseText;
                }
            }
    
            //发送请求
            xmlHttp.send(null);
        }
    </script>

    新建Get.aspx页,Get.aspx.cs代码如下:

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
    
        string username = Request.QueryString["username"];
    
        string age = Request.QueryString["age"];
    
        Response.Write("姓名:'" + username + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'");
    
        Response.End();
    }
    

    结果:

    输入姓名和年龄,点击Get按钮,就会从服务器获取到数据.

    image
  • 相关阅读:
    INFORMATION_SCHEMA.INNODB_LOCKS
    INFORMATION_SCHEMA.INNODB_TRX 详解
    用 Flask 来写个轻博客 (9) — M(V)C_Jinja 语法基础快速概览
    自助式BI对比评测:Tableau和FineBI
    4款最具影响力的自助式BI工具
    4款最具影响力的自助式BI工具
    用 Flask 来写个轻博客 (8) — (M)VC_Alembic 管理数据库结构的升级和降级
    用 Flask 来写个轻博客 (7) — (M)VC_models 的关系(many to many)
    zabbix 通过key 获取
    匿名hash
  • 原文地址:https://www.cnblogs.com/diviner926934/p/6971781.html
Copyright © 2011-2022 走看看