完整的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按钮,就会从服务器获取到数据.
小结:
今天暂时写一个完整的例子来显示Ajax的调用过程,此例中存在许多问题:
- 如何创建在大部分浏览器中都能运行的XMLHttpRequest对象.
- 使用get请求时存在缓存问题
- 中文乱码问题
针对这些已经出现的问题,我们在随后的例子中会一一解决.
对于其他的疑问,比方说:
- 如何使用post传递数据
- post和get有什么区别
- 如何使用传输和使用json数据
- 如何传输和使用xml数据(毕竟,Ajax最后的一个字母x指的是XML)
对于这些疑问,我们在随后的文章里也会一一解决的.
完整的Ajax实例的更多相关文章
- jquery ajax实例教程和一些高级用法
jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- jQuery AJAX实例
<html><head><title>jQuery Ajax 实例演示</title></head><script language= ...
- 第三十六课:如何书写一个完整的ajax模块
本课主要教大家如何书写一个完整的ajax模块,讲解的代码主要跟ajax有关,而jQuery的ajax模块添加了Deferred异步编程的机制,因此对ajax的理解难度增大,还是忽略掉.但是我要讲解的代 ...
- 转:jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- C#中jQuery Ajax实例(二)
上一篇写了一个简单的Ajax异步程序,这一次同样是简单的程序,只不过这次先把参数传到一般处理程序(后缀为ashx)中,再把结果传回到页面. 1.html代码: <html xmlns=" ...
- C#中jQuery Ajax实例(一)
目标:在aspx页面输入两参数,传到后台.cs代码,在无刷新显示到前台 下面是我的Ajax异步传值的第一个实例 1.前台html代码: <html xmlns="http://www. ...
- 【JavaScript】jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
随机推荐
- 字符串匹配算法之Sunday算法
字符串匹配查找算法中,最着名的两个是KMP算法(Knuth-Morris-Pratt)和BM算法(Boyer-Moore).两个算法在最坏情况下均具有线性的查找时间.但是在实用上,KMP算法并不比最简 ...
- 前端MVC学习笔记(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- bootstrap--- 两种bootstrap multiselect组件大比拼
http://www.cnblogs.com/landeanfen/p/5013452.html 1.第一种可以兼容IE,第二种不能兼容
- java反射 -Class类
Class类:任何类都是Class类的对象 Class类的实例对象的三种表现形式:1.通过某个类的.class实现 2.某个类的对象的getClass()方法 3.Class.forName() 注意 ...
- [POJ] 3020 Antenna Placement(二分图最大匹配)
题目地址:http://poj.org/problem?id=3020 输入一个字符矩阵,'*'可行,'o'不可行.因为一个点可以和上下左右四个方向的一个可行点组成一个集合,所以对图进行黑白染色(每个 ...
- 转:堆(heap)和栈(stack)有什么区别??
简单的可以理解为: heap:是由malloc之类函数分配的空间所在地.地址是由低向高增长的. stack:是自动分配变量,以及函数调用的时候所使用的一些空间.地址是由高向低减少的. 预备知识—程序的 ...
- 通过MYSQL命令行直接建数据库
因为同事要求,在进行MYSQLDUMP的导入库时,加一个日期标签, BUT,MYSQLDUMP的前提是数据库中要存在数据库名, 于是通过-e 参数执行命令. 这让我想起了前不久请教同事,如果AWK传变 ...
- LeetCode _ Word Break
Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...
- HDOJ 1164 Eddy's research I(拆分成素数因子)
Problem Description Eddy's interest is very extensive, recently he is interested in prime number. Ed ...
- 40 个重要的 HTML5 面试问题及答案
本文将列出40个重要的HTML 5面试问题及答案,祝各位求职顺利. 目录 介绍 Canvas和SVG图形之间的区别是什么? 如何使用Canvas和SVG绘制矩形? 什么是CSS选择器? 如何使用ID值 ...