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 ...
随机推荐
- uiscrollerview循环滚动（参考第三方库：HMBannerView）https://github.com/iunion/autoScrollBanner
#import <UIKit/UIKit.h> #import "HMBannerView.h" @interface ViewController : UIViewC ...
- 结合源码看nginx-1.4.0之nginx异步机制详解
目录 0. 摘要 1. nginx异步设计思想 2. nginx异步设计数据结构 3. nginx异步机制源码解析 4. 一个简单的应用异步例子 5. 小结 6. 参考源码
- 运用Real Spy Monitor监控网络
Real Spy Monitor是一个监测互联网和个人电脑,以保障其安全的软件.包括键盘敲击.网页站点.视窗开关.程序执行.屏幕扫描以及文件的出入等都是其监控的对象. 1.添加使用密码 在使用Real ...
- 【Java的JNI快速学习教程】
1. JNI简介 JNI是Java Native Interface的英文缩写,意为Java本地接口. 问题来源:由于Java编写底层的应用较难实现,在一些实时性要求非常高的部分Java较难胜任(实时 ...
- setcookie 之 我见
$default_currency=get_default_currency(); $_COOKIE['currency'] = $default_currency['currency']; $_CO ...
- jquery.blockUI.2.31.js 弹出层项目介绍
{insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...
- POJ 2492 A Bug's Life (并查集)
A Bug's Life Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 30130 Accepted: 9869 De ...
- asp.net Calendar 日历控件用法
asp.net Calendar 是微软自带的一款日历控件,除了简单显示日期时间外, 还可以绑定一些需要的事件. Calendar_DayRender 事件,是在加载都去时间日期时候的方法,用此方法可 ...
- CSS3--实现特殊阴影 (实例)
学习来源:慕课网http://www.imooc.com/view/240 先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 <body> <div class=& ...
- Oracle中的内置函数在sql中的转换整理
程序里面经常会即支持Oracle数据库,又支持sql数据库.而有些Oracle内置函数用的比较多,但在sql中语法有些不同,我做了些整理,希望可以帮助大家.... 1.oracle中的内置函数:ora ...