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 ...
随机推荐
- 《MFC游戏开发》笔记三 游戏贴图与透明特效的实现
本系列文章由七十一雾央编写,转载请注明出处. 313239 作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5 ...
- android studio1.3安装终于成功
本人机器是win7 32位旗舰版,4G内存.以前使用eclipse adt bundle开发Android程序感觉非常方便,但随着google对andriod studio支持力度加大,转向studi ...
- ASP.NET验证控件应用实例与详解。
ASP.NET公有六种验证控件,分别如下: 控件名 功能描叙 1RequiredFieldValidator(必须字段验证) 用于检查是否有输入值 2CompareValidator(比 ...
- Linux 内核链表
一 . Linux内核链表 1 . 内核链表函数 1.INIT_LIST_HEAD:创建链表 2.list_add:在链表头插入节点 3.list_add_tail:在链表尾插入节点 4.list_d ...
- VB.NET 小程序 1
Public Class Form1 Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click ...
- [CAMCOCO][C#]我的系统架构.服务器端.（三）----Model层
我估计一片帖子写不完这个,慢慢来吧... 先上个图,按照图来说明应该容易说清楚一些. 在Model Core核心代码中,老胡创建了一个类 CAMCOCO.Model.Core,要求今后在Model L ...
- MVC中Jqgrid的用法
Jqgrid可以接受的数据源格式通常是local.json.string等,而我们通过MVC Controller查询数据库(Linq)通常转化为tolist(),例如: public object ...
- Android 动画学习笔记
Android动画的两种:Frame帧动画.Tween动画(位移动画)[实现:存放目录res/anim] Tween动画:(位移.缩放.旋转):通过对场景里的对象不断做图像变换. 四种效果Alpha. ...
- ORACLE 数据库概述以及Oracel数据库的安装、卸载、使用
一:Orcale简介 1.发展史 1978年,Orcale诞生 1982年,Orcale3推出了,它是第一个能够运行在大型机和小型机上的关系型数据库 1997年,Orcale公司推出了基于java语言 ...
- Markdown 学习资源
语法 Mastering Markdown Markdown Cheatsheet pandoc 在线预览工具