XMLHttpRequest对象无刷新技术
2008-07-15 19:04
232 查看
一: XMLHttpRequest是什么?
最为通俗的定义他就是脚本语言例如javascript,Jscript,VBscript等通过HTTP协议传送或者接受XML数据及其他数据的一套API.
二:[b]XMLHttpRequest对象的属性:[/b]
三:[b]XMLHttpRequest对象的方法:
[/b]
四:发送一个请求的步骤:
最简单的请求是,不以查询参数或提交表单的方式向服务器发送任何信息.使用XmlHttpRequest对象发送请求的基本步骤:
● 为得到XmlHttpRequest对象实例的一个引用，可以创建一个新的XmlHttpRequest的实例。
● 告诉XmlHttpRequest对象,那个函数回处理XmlHttpRequest对象的状态的改变.为此要把对象的
onreadystatechange属性设置为指向JavaScript的指针.
● 指定请求属性.XmlHttpRequest对象的Open()方法会指定将发送的请求.
● 将请求发送给服务器.XmlHttpRequest对象的send()方法将请求发送到目标资源.
五:源码
1:前台.aspx代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() //创建一个XMLHttpRequest对象，AJAX开始
{
if(window.ActiveXObject)//假如为IE浏览器
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)//非IE浏览器
{
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);//与服务器端建立连接，有POST和GET两种形式，true表示异步操作，这个地方信息已经发到缓存。
xmlHttp.onreadystatechange=ShowResult;//表示请求发到服务器的状态反馈，也就是监视response的状态
xmlHttp.send(null);//发送请求
}
function ShowResult()//定义回调函数，自己定义错误处理
{
if (xmlHttp.readyState == 1)
{
document.getElementById("flag").innerHTML = "正在加载连接对象
";
}
if (xmlHttp.readyState == 2)
{
document.getElementById("flag").innerHTML = "连接对象加载完毕。";
}
if (xmlHttp.readyState == 3)
{
document.getElementById("flag").innerHTML = "数据获取中
";
}
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
alert("Server is done!服务器已收到,");
document.getElementById("sum").value=xmlHttp.responseText;//返回响应信息
}
}
else if (xmlHttp.status == 404)
{
alert("Request URL does not exist,发送的地址错了,没有此页面");
}
else if (xmlHttp.status == 403)
{
alert("Access denied.无权访问");
}
else
{
alert("Error: status code is " + xmlHttp.status);
}
}
</script>
</head>
<body>
<div style="text-align: center">
<br />无刷新求和示例<br />
<br />
<div id="flag"></div>
<input id="num1" style="width: 107px" type="text" onkeyup="AddNumber();" value="0" />
+<input id="num2" style="width: 95px" type="text" onkeyup="AddNumber();" value="0" />
=<input id="sum" style="width: 97px" type="text" /></div>
</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 a = int.Parse(context.Request.QueryString["num1"]);
int b = int.Parse(context.Request.QueryString["num2"]);
context.Response.Write(a+b);
}
public bool IsReusable
{
get
{
return false;
}
}
}
最为通俗的定义他就是脚本语言例如javascript,Jscript,VBscript等通过HTTP协议传送或者接受XML数据及其他数据的一套API.
二:[b]XMLHttpRequest对象的属性:[/b]
三:[b]XMLHttpRequest对象的方法:
[/b]
四:发送一个请求的步骤:
最简单的请求是,不以查询参数或提交表单的方式向服务器发送任何信息.使用XmlHttpRequest对象发送请求的基本步骤:
● 为得到XmlHttpRequest对象实例的一个引用，可以创建一个新的XmlHttpRequest的实例。
● 告诉XmlHttpRequest对象,那个函数回处理XmlHttpRequest对象的状态的改变.为此要把对象的
onreadystatechange属性设置为指向JavaScript的指针.
● 指定请求属性.XmlHttpRequest对象的Open()方法会指定将发送的请求.
● 将请求发送给服务器.XmlHttpRequest对象的send()方法将请求发送到目标资源.
五:源码
1:前台.aspx代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() //创建一个XMLHttpRequest对象，AJAX开始
{
if(window.ActiveXObject)//假如为IE浏览器
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)//非IE浏览器
{
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);//与服务器端建立连接，有POST和GET两种形式，true表示异步操作，这个地方信息已经发到缓存。
xmlHttp.onreadystatechange=ShowResult;//表示请求发到服务器的状态反馈，也就是监视response的状态
xmlHttp.send(null);//发送请求
}
function ShowResult()//定义回调函数，自己定义错误处理
{
if (xmlHttp.readyState == 1)
{
document.getElementById("flag").innerHTML = "正在加载连接对象
";
}
if (xmlHttp.readyState == 2)
{
document.getElementById("flag").innerHTML = "连接对象加载完毕。";
}
if (xmlHttp.readyState == 3)
{
document.getElementById("flag").innerHTML = "数据获取中
";
}
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
alert("Server is done!服务器已收到,");
document.getElementById("sum").value=xmlHttp.responseText;//返回响应信息
}
}
else if (xmlHttp.status == 404)
{
alert("Request URL does not exist,发送的地址错了,没有此页面");
}
else if (xmlHttp.status == 403)
{
alert("Access denied.无权访问");
}
else
{
alert("Error: status code is " + xmlHttp.status);
}
}
</script>
</head>
<body>
<div style="text-align: center">
<br />无刷新求和示例<br />
<br />
<div id="flag"></div>
<input id="num1" style="width: 107px" type="text" onkeyup="AddNumber();" value="0" />
+<input id="num2" style="width: 95px" type="text" onkeyup="AddNumber();" value="0" />
=<input id="sum" style="width: 97px" type="text" /></div>
</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 a = int.Parse(context.Request.QueryString["num1"]);
int b = int.Parse(context.Request.QueryString["num2"]);
context.Response.Write(a+b);
}
public bool IsReusable
{
get
{
return false;
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- XMLHttpRequest对象无刷新技术
- AJAX技术使用XMLHttpRequest对象传递参数的中文乱码问题
- 利用 Microsoft.XMLHTTP/XMLHttpRequest 对象 实现Ajax技术 的总结
- 【技术】javascript XMLHttpRequest对象全面剖析
- 如何使用XMLHTTPRequest对象实现无刷新效果
- Alax技术实现的基本原理——XMLHttpRequest对象的使用
- Ajax无刷新方法纵览（1）—XMLHttpRequest对象
- 使用Ajax技术通过XMLHttpRequest对象完成首页登录功能
- Alax技术实现的基本原理——XMLHttpRequest对象的使用
- 使用Ajax技术通过XMLHttpRequest对象完成首页登录功能
- 两种Web页面局部刷新技术IFRAME与XmlHttpRequest
- 【技术】使用原生XHR(XMLHttpRequest)对象来获取并包括HTML片段
- Ajax核心技术之XMLHttpRequest对象
- Ajax技术---核心XMLHttpRequest对象
- Ajax技术及 XMLHttpRequest 对象
- 两种Web页面局部刷新技术IFRAME与XmlHttpRequest
- AJAX技术入门 第二节 XMLHttpRequest对象的使用
- 《XMLHttpRequest对象-AJAX技术核心》
- Ajax技术之XMLHttpRequest对象详解
- js技术：该函数返回ajax需要的关键对象：xmlhttprequest