写在前面的话:

用了很久的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按钮,就会从服务器获取到数据.

小结:

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

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

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

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

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

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

完整的Ajax实例的更多相关文章

  1. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

  2. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  3. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  4. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  5. 第三十六课：如何书写一个完整的ajax模块

    本课主要教大家如何书写一个完整的ajax模块,讲解的代码主要跟ajax有关,而jQuery的ajax模块添加了Deferred异步编程的机制,因此对ajax的理解难度增大,还是忽略掉.但是我要讲解的代 ...

  6. 转：jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  7. C#中jQuery Ajax实例（二）

    上一篇写了一个简单的Ajax异步程序,这一次同样是简单的程序,只不过这次先把参数传到一般处理程序(后缀为ashx)中,再把结果传回到页面. 1.html代码: <html xmlns=" ...

  8. C#中jQuery Ajax实例（一）

    目标:在aspx页面输入两参数,传到后台.cs代码,在无刷新显示到前台 下面是我的Ajax异步传值的第一个实例 1.前台html代码: <html xmlns="http://www. ...

  9. 【JavaScript】jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

随机推荐

  1. 关于C++条件运算符(三目运算符)右结合的说明

    C++条件运算符 a ? c : d;是右结合的,但是这个右结合要怎么理解呢? 对于a ? b : c ? d : e; 这样的表达式如果按照右结合来解读的话,那不应该是先运算c,然后返回d或者e,返 ...

  2. EcStore操作笔记

    1.去掉首页里面代码: <meta http-equiv="content-type" content="text/html; charset=utf-8" ...

  3. 1.3.1 switch 语句中的 String

    switch语句是一种高效的多路语句,可以省掉很多繁杂的嵌套if判断: 在Java 6及之前,case语句中的常量只能是byte.char.short和int(也可以是对应的封装类)或枚举常量,在Ja ...

  4. 【行为型】Chain of responsibility模式

    职责链模式将对象的请求处理组成链式结构,并将请求按链式结构逐个传递下去,直接被其中的某个处理者处理为止.由此可知,职责链模式的适用场合是对指定请求,可以有多个请求处理者(或称为请求响应者),但用户并不 ...

  5. bat转向指定的目录路径处

    使用bat命令转到指定的盘符路径: cd /d xxxx目录路径. 例如:cd /d D:\abc\efg 则是转到D盘的abc目录下的efg目录处.其中 /d 是指:无论当前bat是在哪个盘符中,都 ...

  6. AtomicInteger小小的理解

    这里仅仅是验证多线程环境下,AtomicInteger的安全性. 通过源码不难发现两点: 1.value属性是volatile修饰 2.使用了unsafe的CAS操作 通过上述两点,实现非阻塞同步(乐 ...

  7. java批量转换图片格式

    废话不多直接上代码,代码其实也不多.... package com.qiao.testImage; import java.awt.image.BufferedImage; import java.i ...

  8. Android 之 AlertDialog 用户登录

    1:activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi ...

  9. 在线安装maven插件问题：Cannot complete the install because one or more required items could not be found.

    用Eclipse在线安装的方式:Help-->Install  New Software 地址输入:http://m2eclipse.sonatype.org/sites/m2e/,列表中打勾勾 ...

  10. Altium Designer 14(或者其他版本)里更改PCB板(图纸)大小

    1.在PCB板界面下方有一行不同颜色的图层选项,找到“Keep-Out Layer”,没看见的话点击右箭头即可找到.   2.在“Place”选项里面选择“line”,也就是添加线,把你所有元件用线条 ...