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 ...
随机推荐
- 日期加减js,天数组增加，日期自动修改
最近在弄火车票的项目,因为火车票选日期最大范围是20天,所要要控制在当前时间的20天内的一个日期 开始在网上找了一个直接修改Date prototype 后来领导说这样不太好,所以只能换个别的方法写 ...
- iOS - UI - UISegmentedControl
1.UISegmentedControl NSArray * array = @[@"red",@"green",@"yellow",@&q ...
- Communications link failure的解决办法
使用Connector/J连接MySQL数据库,程序运行较长时间后就会报以下错误: Communications link failure,The last packet successfully r ...
- 关于更新到Xcode8的一些问题
随着iOS 10的陆续使用,升级到xcode8也是大势所趋. 虽然现在xcode 8 可能还有一些问题,但是整体还是不错的,对一些常用的插件也做了集成,比如说 ///注释快捷键 下面说一下我遇到的一些 ...
- Oracle基础（四） 用户管理
一.用户 当创建一个数据实例时,Oracle会创建一些默认的数据库用户,如SYS,SYSTEM和SCOTT等用户.SYS和SYSTEM用户都是ORACLE的系统用户.而Scott用户是Oracle数据 ...
- VMware系统运维（二十）部署虚拟化桌面Horzion View 5.2 HTML Access进行连接测试
1.通过浏览器打开Horzion View登录界面,https://conntionserver.testad.local,点击"VMware Horzion View HTML Acces ...
- easyui window自动居中(修复了iframe弹窗被遮盖问题)
$.extend($.fn.window.defaults, { onOpen:function(left, top){ var iframeWidth = $(this).parent().pare ...
- [wordpress]wp-api-jwt-auth 尝试添加运行在多站点中 need change
Hi,Thank you this plugin,because i use this plugin on Wordpress one Network,so the request other api ...
- 【学习笔记】【C语言】关键字
1.关键字就是C语言提供的有特殊含义的符号,也叫做“保留字” *C语言一共提供了32个关键字,这些关键字都被C语言赋予了特殊含义 auto double int struct break else l ...
- 20141104--SQL，查询习题，约束
--创建学生信息表:学号,姓名,班级,性别,语文教师,数学教师,英语教师 --创建一个教师表:编号,姓名,课程,性别,出生日期 --创建一个分数表:语文,数学,外语,学号 --查询 语文成绩最高的学生 ...