完整的Ajax实例

转载 2015年07月09日 14:44:55

写在前面的话:

用了很久的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)

[jQuery]$.ajax()方法详解及实例

$.ajax()方法详解及实例  1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 2.type: 要求为String类型的参数,请求方式(post或get)默认为ge...
  • u012843873
  • u012843873
  • 2016年09月21日 17:33
  • 12568

struts2 ajax一个很经典的小例子

转载自:http://blog.163.com/zhk_hoba/blog/static/140738113201301623833461/ 1、将struts2的json插件加入web工程...
  • u012377333
  • u012377333
  • 2015年11月19日 17:49
  • 1611

php与Ajax实例

 ****************AJAX的学习要有JavaScript、HTML、CSS等基本的Web开发能力****************[AJAX介绍] Ajax是使用客户端脚本与Web服务器...
  • 21aspnet
  • 21aspnet
  • 2007年03月19日 23:03
  • 5276

AJAX的异步请求小例子

AJAX的异步请求小例子
  • starjuly
  • starjuly
  • 2016年09月09日 18:31
  • 2416

JQuery中Ajax的操作完整例子

Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进...
  • qq_33714487
  • qq_33714487
  • 2018年01月20日 10:30
  • 625

jQuery中使用Ajax与后台交互实例

一、$.ajax的一般格式 $.ajax({      type: 'POST',      url: url ,     data: data ,     succes...
  • u010589037
  • u010589037
  • 2014年06月13日 20:14
  • 7843

Jquery之Ajax实例_登录

一、Login.html代码 $(function () { $("#msg").css("display","none"...
  • songyi160
  • songyi160
  • 2017年08月23日 16:24
  • 149

struts2对ajax的支持的实例

要在struts2中使用ajax必须先引入struts2-json-plugin-2.3.28.1.jar包 struts.xml
  • yuhui123999
  • yuhui123999
  • 2016年10月13日 10:53
  • 395

JAVA下AJAX应用实例

最近与其他公司合作开发项目,我们负责服务器及下层的硬件控制,另一个公司负责可视化的...
  • qq372712203
  • qq372712203
  • 2014年07月30日 19:59
  • 935

jquery AJAX 完整写法

$.ajax完整写法 操作按钮: 操作按钮 JS部分: $(function(){ $('#btn').click(function(){ var obj = $(this); ...
  • qq_16494241
  • qq_16494241
  • 2016年06月03日 14:57
  • 7570
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:完整的Ajax实例
举报原因:
原因补充:

(最多只允许输入30个字)