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 ...
随机推荐
- 在MVC中要实现Ajax
在MVC中要实现Ajax有很多的方式,有微软自己的MicrosoftAjax,也可以用JQuery的AJax来实现,如果对其他的JavaScript框架熟悉,还可以采用其他的实现方案,比如说Proto ...
- Linq中使用Left Join
use Test Create table Student( ID ,) primary key, ) not null ) Create Table Book( ID ,) primary key, ...
- ionic中input框禁止输入问题
其实这个问题在之后沥青思路之后觉得还是挺好实现的,没有思路的时候真是找不到头绪~ 功能的描述为:当输入框中没有内容时,允许用户编辑:当其中有内容时不允许用户编辑,只有当用户点击编辑按钮后,才可允许编辑 ...
- [转]oracle 11g 忘记 默认用户密码
本文转自:http://blog.csdn.net/huangbiao86/article/details/6595052 首先启动sqlplus 输入用户名:sqlplus / as sysdba ...
- POJ 2349 Arctic Network (最小生成树)
Arctic Network Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Subm ...
- PHP和CS的引用传值
PHP的引用传值 function change_value($num){ $num+=2; } $age = 3; change_value(&$age); echo $age; CS的引用 ...
- Linux vi入门必备
一.vi.vim介绍 文本编辑器分为: (1)基于图形界面,如gedit.geany等: (2)基于命令行,如nano.vi.joe等: 每个命令行界面的文本编辑器都有各自不同的快捷键,比如nan ...
- MyContentProvider
package com.example.shad_fnst.mycontentprovider; import android.app.Activity; import android.content ...
- cocos2dx-lua 批量打包及修改
coco2dx目前大部分开发者肯定是用lua解决问题,问题来了,每次改一下lua配置可能你每次都得运行 cocos luacompile -p android 针对不同的平台,可能会有某些配置会略有不 ...
- UI5_UIAlertView与UIActionSheet
// // ViewController.h // UI5_UIAlertView与UIActionSheet // // Created by zhangxueming on 15/7/7. // ...