Ajax入门小例子
大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html ---Ajax基础学习
http://www.cnblogs.com/Garden-blog/archive/2011/03/11/1981778.html ---Ajax完整教程
Ajax:Asynchronous JavaScript and XML.异步的JavaScript和xml.
在后台与服务器进行少量数据交换,使网页实现异步更新.(和服务器还是有交互的)
XMLHttpRequest 对象----Ajax的核心对象.这是一个JavaScript对象,相当于表单和服务器之间的桥梁。
为了支持所有浏览器,包括IE5和IE6,在创建XMLHttpRequest 对象的时候,有一个判断.
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
} else {
xmlhttp = ActiveXObject('Microsoft.XMLHTTP'); //支持IE5,IE6
}
写了一个基础的小例子，附有注释：
前台&js部分(Ajax):
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function show(str) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
} else {
xmlhttp = ActiveXObject('Microsoft.XMLHTTP'); //支持IE5,IE6
}
if (str.length == 0) {
document.getElementById("lbl1").innerHTML = '';
return;
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //状态值在上述文章中有详细介绍
var res = xmlhttp.responseText;
document.getElementById("lbl1").innerHTML = res; }
}
xmlhttp.open("post", "WebForm2.aspx", true); //open方法
xmlhttp.send(); //send方法
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
姓名:<input type="text" id="name1" onkeydown="show(this.value)"/><br/><br/>
<label id="lbl1"></label>
</div>
</form>
</body>
</html>
后台服务器端:
protected void Page_Load(object sender, EventArgs e)
{
string name=Request.QueryString["name"].ToString();
if (name.Contains("h"))
{
Response.Write("hhhhh");
}
else if(name.Contains("a"))
{
Response.Write("aaaaaa");
}
else if (name.Contains("b"))
{
Response.Write("bbbbbbb");
}
else if (name.Contains("c"))
{
Response.Write("cccccccc");
}
else if (name.Contains("d"))
{
Response.Write("dddddd");
}
else
{
Response.Write("false");
}
}
注意,该页面的前台应该删去除了page指令以外的代码,这样在获得ResponseText的时候才会得到真正的值.
效果图:
值得记住的就是,Ajax中最重要的就是XMLHttpRequest 对象
Ajax入门小例子的更多相关文章
- Selenium WebDriver + Grid2 + RSpec之旅（三） ----入门小例子
Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子 第一个例子都是比较简单的博客园登录界面,就像学习编程语言时候都是从Hello,World!开始. 1 ...
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...
- backbone入门小例子
最近听了个backbone的分享,为了避免听不懂,就先做了个小例子 例子很简单,效果如下 基本视图模板: <script type="tex/template" id=&qu ...
- Django1.7+JQuery+Ajax集成小例子
Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证 ...
- spring+spring mvc+JdbcTemplate 入门小例子
大家使用这个入门时候 最好能够去 搜一下 spring mvc 的 原理,我放一张图到这里,自己琢磨下,后面去学习就容易了 给个链接 (网上一把,千万不能懒) https://www.cnblo ...
- node中的ajax提交小例子
我们看一个HTML5页面中通过AJAX请求的方式获取HTTP服务器返回数据的代码示例.由于我们把服务器的端口指定为1337,并将从端口为80的网站中运行HTML5页面,因此这是一种跨域操作,需要在HT ...
- SpringBoot介绍,快速入门小例子,目录结构,不同的启动方式,SpringBoot常用注解
SpringBoot介绍 引言 为了使用ssm框架去开发,准备ssm框架的模板配置 为了Spring整合第三方框架,单独的去编写xml文件 导致ssm项目后期xml文件特别多,维护xml文件的成本也是 ...
- Python In Action:一、入门小例子
Python In Action这本书真是有点猛,一开头就来这么个例子: import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame ...
- mybatis 不整合spring 入门小例子
先上一个搭建完的项目结构截图: 相对比较重要的配置文件有 db.properties , SqlMappingConfig.xml , mapper/User.xml , log4j.properti ...
随机推荐
- [SEO] 网站标题分隔符
标题用什么分隔符对SEO最有利 我们在看同行的朋友对网站标题优化时,关键词分按照主次的顺序进行分布,在网站标题或者是关键词之间都会有一个符号,俗话来讲就称为关键词分隔符,网站标 题分隔符分为“-”(横 ...
- Java基础知识强化之IO流笔记80：NIO之 ServerSocketChannel
1. Java NIO中的 ServerSocketChannel 是一个可以监听新进来的TCP连接的通道, 就像标准IO中的ServerSocket一样.ServerSocketChannel类在 ...
- 【Android车载系统 News | Tech 1】News 谷歌开发车载Android系统 2014-12-19
据外国媒体报道,Android和iOS两大操作系统在垄断手机和平板之后,开始向智能家居.智能汽车.客厅娱乐.物联网等领域扩张.谷歌和苹果此 前均推出了连接智能手机和车载信息系统的平台产品.2014年1 ...
- sql over开窗函数
1.使用over子句与rows_number()以及聚合函数进行使用,可以进行编号以及各种操作.而且利用over子句的分组效率比group by子句的效率更高. 2.在订单表(order)中统计中,生 ...
- ios 代码截屏模糊问题解决办法
我们常用的截图方法如下所示: //尺寸是按照 UIGraphicsBeginImageContext(CGSizeMake(, )); //currentView 当前的view 创建一个基于位图的图 ...
- python 3.3.2 爬虫记录
网络上大部分关于python爬虫的介绍以及代码讲解,都用的是python2.7或以下版本,用python3.x版本的甚少. 在python3.3.2版本中,没有urllib2这个库,也没有cookie ...
- z-index无效
1.要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:relative(定位元素:position属性值设置除默认值static以外的元素,包 ...
- CSS Sprite 图标
HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...
- 如何在MVC中显示条形码图片(以内存流的方式)
前台代码: <script type="text/javascript"> function fresh() { var getimagecode = document ...
- js中的相等与不等运算
如果其中一个操作数的类型为 Boolean ,那么,首先将它转换为数字类型,false 转换为 0, true 将转换为 1. 如果其中一个操作数的类型是字符串,另外一个为数字类型,那么,将字符串转换 ...