写在前面的话:

用了很久的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. 转载:Ajax及 GET、POST 区别

    转载:Ajax及 GET.POST 区别 收获: xhr.setRequestHeader(), xhr.getResponseHeader() 可以设置和获取请求头/响应头信息; new FormD ...

  2. 转载Ajax.Net--ScriptManager和UpdatePanel控件

    ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异步局部更新区域,它必须依赖于ScriptManager存在,因 ...

  3. [转载]# Ajax异步请求阻塞情况的解决办法

    最近使用ExtJs4的mvc模式在开发了在线漫画的后台,因为异步请求比较多,有的回应时间长,有点短.我发现在多次并发的情况下,会造成阻塞的情况.也就是说如果回应时间长的请求还在进行中,短的请求却被挂起 ...

  4. 用jQuery实现ajax总结以及跨域问题

    本文为作者原创,未经博主允许,不可转载 ajax请求的常用的参数设置: type:请求类型,"POST","GET",默认为geturl:发送请求的地址data ...

  5. 深入理解 JavaScript 异步系列（2）—— jquery的解决方案

    第一部分,jQuery-1.5 之后的 ajax 本地址http://www.cnblogs.com/wangfupeng1988/p/6515779.html未经允许不得转载~ $.ajax这个函数 ...

  6. 再谈Jquery Ajax方法传递到action 【转载】

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://cnn237111.blog.51cto.com/2359144/984466 之 ...

  7. Ajax学习资源大全[本来是转载的,但是现在我增加了很多]

    本欲放转载区,但是这样一文章放那里基本是没有用的,帮助不了任何人!所以放新手了!! 我一般非经典或者自己用不上不转载,所以如果你不幸看见了的话,恰恰你又对AJAX有兴趣的话不防看下,也许对你有用的!! ...

  8. AJAX POST&跨域 解决方案 - CORS（转载）

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...

  9. ajax乱码问题 服务端 客户端 两种的解决方案--转载

    今天弄了一天的Ajax中文乱码问题,Ajax的乱码问题分为两种: 1. JavaScript输出的中文乱码, 比如:alert("中文乱码测试"); 2. 这第二种就是Ajax从服 ...

随机推荐

  1. 製程能力介紹(SPC introduction) ─ Cp之製程能力解釋

    Cp之製程能力解釋 從常態分配的特性來看,在群體中 ±3σ(標準差) 之範圍內的值,應包含群體全部的 99.73%.也就是說,若以 6σ為單位,就可以代表整個分布的範圍,但是有 0.27% (2700 ...

  2. 在Centos 5.x或6.x上安装RHEL EPEL Repo

    本文介绍了如何在CentOS 5.x或者CentOS 6.x的系统上使用Fedora Epel repos一个第三方repo:remi资源库.这些资源包并不是天然地支持CentOS,但是提供了很多流行 ...

  3. poj1547---结构数组

    题意:老师发给每个学生的橡皮泥相同,找出谁抢了谁的橡皮泥 思路:结构数组存储每个学生的橡皮总量,和名字 /* 结构数组存储用户信息--只放名称和体积 while输入循环复用长宽高变量 for循环求所有 ...

  4. python 【第三篇】：函数及参数

    函数背景 在学习函数之前,一直遵循:面向过程编程: 根据业务逻辑从上到下实现功能,其往往用一长段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复制到现需功能处,如下: ...

  5. 基于Hadoop的大数据平台实施记——整体架构设计

    大数据的热度在持续的升温,继云计算之后大数据成为又一大众所追捧的新星.我们暂不去讨论大数据到底是否适用于您的组织,至少在互联网上已经被吹嘘成无所不能的超级战舰.好像一夜之间我们就从互联网时代跳跃进了大 ...

  6. 试用cmd markdown

    欢迎使用 Cmd Markdown 编辑阅读器 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想 ...

  7. css3动画工具

    去年,我刚刚开始学习css3时候,看到了腾讯的这个工具,引起了我对css3的兴趣. 配合着书本上的知识写了一些效果,感觉不错. http://www.f2e.name/case/css3/tools. ...

  8. I - Doing Homework again

    I - Doing Homework again Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  9. 用C++写一个简单的发布者

    节点是一个可执行程序,它连接到了ROS的网络系统中.我们将会创建一个发布者,也就是说话者节点,它将会持续的广播一个信息. 改变目录到之前所建立的那个包下: cd ~/catkin_ws/src/beg ...

  10. xhprof failed to execute cmd: " dot -Tpng". stderr: `sh: dot: command not found '

    wget http://www.graphviz.org/pub/graphviz/ARCHIVE/graphviz-2.28.0.tar.gz tar xzvf graphviz-2.28.0.ta ...