一个完整的ajax简单案例_Java实例

一个完整的ajax简单案例_Java实例写在前面的话:用了很久的Asp.NetAjax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起xmlHttpRequest的该如何使用了.以前记的也不怎么清楚,这次

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
原文地址为:
完整的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

小结:

今天暂时写一个完整的例子来显示Ajax的调用过程,此例中存在许多问题:

  1. 如何创建在大部分浏览器中都能运行的XMLHttpRequest对象.
  2. 使用get请求时存在缓存问题
  3. 中文乱码问题

针对这些已经出现的问题,我们在随后的例子中会一一解决.

对于其他的疑问,比方说:

  1. 如何使用post传递数据
  2. post和get有什么区别
  3. 如何使用传输和使用json数据
  4. 如何传输和使用xml数据(毕竟,Ajax最后的一个字母x指的是XML)

对于这些疑问,我们在随后的文章里也会一一解决的.

转载请注明本文地址:
完整的Ajax实例

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170680.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python表白代码-python告白代码,只属于程序员的浪漫

    python表白代码-python告白代码,只属于程序员的浪漫不知何时,不知何因,程序员这个行业成为大家茶余饭后取乐的无辜群体。只要说到程序员,脑海中就浮现出刻板印象,标配穿搭:格子衫,牛仔裤,黑框眼镜。当然秃顶也是必须的,更狠的吐槽还有邋里邋遢,不懂浪漫,不知人情世故!开始可能只是幽默玩笑,后面慢慢就越传越多,大家便信以为真!可是程序员真的是这样吗?随着现在编程这个行业的普遍高薪收入,程序员又成为大家关注的焦点,深入的了解后,发现程序员其实是很可爱的一个群…

  • ubuntu安装cuda和cudnn_ubuntu查看是否安装cuda

    ubuntu安装cuda和cudnn_ubuntu查看是否安装cuda目录1、查看系统推荐的cuda版本2、官网下载cuda软件包3、安装4、环境配置5、验证cuda是否正常1、查看系统推荐的cuda版本查看前应先安装显卡驱动,可以查看NVIDIA显卡驱动安装nvidia-smi这里显示的是cuda11.4版本2、官网下载cuda软件包官网cuda下载对应的cuda版本这里选择11.4.4的版本wgethttps://developer.download.nvidia.com/comput.

  • docker-compose 集群_基于hadoop的集群搭建

    docker-compose 集群_基于hadoop的集群搭建前言实际工作中我们部署一个应用,一般不仅仅只有一个容器,可能会涉及到多个,比如用到数据库,中间件MQ,web前端和后端服务,等多个容器。我们如果一个个去启动应用,当项目非常多时,就很难记住了,所有

  • Thread之ParameterizedThreadStart

    Thread之ParameterizedThreadStartTreadStart委托仅仅指向无参数且无返回值的方法。如果新线程上运行带参数的方法,那么需要用到ParameterizedThreadStart委托,ParameterizedThreadStart定义:publicdelegatevoidParameterizedThreadStart(objectobj);一:要求只能有一个参数,且为object类型二:无返回值T…

  • django通用视图通俗讲解_视图的种类通常有

    django通用视图通俗讲解_视图的种类通常有前言上篇我们通过mixin可以非常方便的实现一些CURD操作。实际上针对这些mixin,DRF还进一步的进行了封装,放到generics下。有以下generic类视图:generics.ListA

  • vb FindwindowEx的用法实例「建议收藏」

    vb FindwindowEx的用法实例「建议收藏」’添加Command1ConstWS_CHILD=&amp;H40000000ConstWM_LBUTTONDOWN=&amp;H201ConstWM_LBUTTONUP=&amp;H202ConstSW_HIDE=0ConstSW_NORMAL=1PrivateTypeRECT   LeftAsLong   TopAsLong   …

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号