AJAX最简单示例
2008-01-08 10:07
357 查看
===============================示例1=========================================
Default.aspx页面如下(Default.aspx.cs页面默认)
点击按钮时异步读取Response.xml文件的内容！
---------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>第一个AJAX示例</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET","response.xml",true);
xmlHttp.send(null);
}
function handleStateChange()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
alert("来自服务器的响应："+xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<input id="Button1" style="width: 85px" type="button" value="发送请求" onclick="startRequest();" /> </div>
</form>
</body>
</html>
--------------------------------------------------------------------
response.xml页面随便写点内容！
===============================示例2=====================================
异步请求Handler.ashx页面，Handler.ashx页面返回处理结果
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>AJAX之加法运算示例二</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function addNumber()
{
createXMLHttpRequest();
var url= "Handler.ashx?Num1="+document.getElementById("num1").value+"&Num2="+document.getElementById("num2").value;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=showResult;
xmlHttp.send(null);
}
function showResult()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
document.getElementById("result").value=xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<input id="num1" style="width: 99px" type="text" value="0" onkeyup="addNumber();" />+<input id="num2" style="width: 95px"
type="text" value="0" onkeyup="addNumber();" />=<input id="result" style="width: 99px" type="text" /></div>
</form>
</body>
</html>
------------------------------------------------------------------------
Handler.ashx页面如下：
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/plain";
int result = Convert.ToInt32(context.Request.QueryString["Num1"]) + Convert.ToInt32(context.Request.QueryString["Num2"]);
context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
===========================原理================================
AJAX 组成
1.表示 XHTML+CSS
2.动态显示和交互 DOM
3.数据交互和操作 XML、XSLT
4.异步数据获取 XMLHttpRequest
5.绑定和处理数据 JavaScript
----------------------------------------
XMLHttpRequest 对象
Number readyState 4
属 Function onreadystatechange
string responseText
XMLDocument responseXML
性 Number status 200
string statusText OK
void open(string,string,boolean)
1.GET,POST,HEAD,PUT,DELETE
OPTIONS,TRACE
2.url
3.true
方 void send(string)
void setHeader(string,string)
string getResponseHeader(string)
法 string getAllResponseHeaders()
void abort()
----------------------------------------
AJAX 应用
提交
1. XMLHttpRequest————>请求
返回 分析
2、3. 服务器————>数据<————JavaScript
Default.aspx页面如下(Default.aspx.cs页面默认)
点击按钮时异步读取Response.xml文件的内容！
---------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>第一个AJAX示例</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET","response.xml",true);
xmlHttp.send(null);
}
function handleStateChange()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
alert("来自服务器的响应："+xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<input id="Button1" style="width: 85px" type="button" value="发送请求" onclick="startRequest();" /> </div>
</form>
</body>
</html>
--------------------------------------------------------------------
response.xml页面随便写点内容！
===============================示例2=====================================
异步请求Handler.ashx页面，Handler.ashx页面返回处理结果
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>AJAX之加法运算示例二</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function addNumber()
{
createXMLHttpRequest();
var url= "Handler.ashx?Num1="+document.getElementById("num1").value+"&Num2="+document.getElementById("num2").value;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=showResult;
xmlHttp.send(null);
}
function showResult()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
document.getElementById("result").value=xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<input id="num1" style="width: 99px" type="text" value="0" onkeyup="addNumber();" />+<input id="num2" style="width: 95px"
type="text" value="0" onkeyup="addNumber();" />=<input id="result" style="width: 99px" type="text" /></div>
</form>
</body>
</html>
------------------------------------------------------------------------
Handler.ashx页面如下：
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/plain";
int result = Convert.ToInt32(context.Request.QueryString["Num1"]) + Convert.ToInt32(context.Request.QueryString["Num2"]);
context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
===========================原理================================
AJAX 组成
1.表示 XHTML+CSS
2.动态显示和交互 DOM
3.数据交互和操作 XML、XSLT
4.异步数据获取 XMLHttpRequest
5.绑定和处理数据 JavaScript
----------------------------------------
XMLHttpRequest 对象
Number readyState 4
属 Function onreadystatechange
string responseText
XMLDocument responseXML
性 Number status 200
string statusText OK
void open(string,string,boolean)
1.GET,POST,HEAD,PUT,DELETE
OPTIONS,TRACE
2.url
3.true
方 void send(string)
void setHeader(string,string)
string getResponseHeader(string)
法 string getAllResponseHeaders()
void abort()
----------------------------------------
AJAX 应用
提交
1. XMLHttpRequest————>请求
返回 分析
2、3. 服务器————>数据<————JavaScript
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax简单示例之改变下拉框动态生成表格
- (40)简单的Ext.Ajax.request示例
- xmlHTTP xmlDOC 与 C#中DataSet的结合 实现AJAX简单示例
- vue.js展示AJAX数据简单示例
- ajax&json实现二级下拉框联动，简单示例
- JavaScript实现Ajax请求简单示例
- Ajax入门和简单示例
- MVC中使用ajax和json传递数据简单示例
- xmlHTTP xmlDOC 与 C#中DataSet的结合 实现AJAX简单示例
- SpringMVC（26）：简单的json数据校验示例（实现功能：使用jQuery框架的ajax()方法来实现 userCode的校验）
- Ajax 简单示例
- jquery简单ajax示例_读取json文件数据
- 按要求写一个简单的ajax示例
- [JavaScript]AJAX方法简单示例——1（.load()方法）
- Ajax简单示例之改变下拉框动态生成表格
- Struts2中Ajax支持的简单示例
- xmlHTTP xmlDOC 与 C#中DataSet的结合 实现AJAX简单示例
- 一个简单的ajax上传进度显示示例
- Ajax简单示例之改变下拉框动态生成表格
- 一个简单AJAX注册示例