推荐于2016-03-24 · 知道合伙人互联网行家
XMLHttpRequest对象
对于Ajax技术的基础和核心,XMLHttpRequest对象应该是必须要了解的一个对象,Ajax实现的关键发送异步请求并接收响应执行回调都是 通过它来完成的。XMLHttpRequest最早是在Microsoft Internet Explorer 5.0以ActiveX组件中被引入的,之后各大浏览器厂商都以JavaScript内置对象的方式实现了XMLHttpRequest对象。虽然大家对 它的实现方式有所区别,但是绝大多数浏览器都提供了类似的属性和方法,在实际脚本编写方法上区别不大,并且实现得到的效果也基本相同,目前W3C正致力于 将XMLHttpRequest对象制定一个统一的标准使各个浏览器厂商遵照执行,以利于Ajax技术的推广与发展。
XMLHttpRequest提供了一个相对精简易用的API,下面我们就将简单地介绍一下它所提供的属性和方法以及怎么利用这些属性和方法完成一次Ajax的请求和响应处理。
readyState属性
当一个XMLHttpRequest对象被创建后,此属性标识了此对象正处于什么状态,可以通过对此属性的访问,来判断此次请求的状态是什么然后做出相应的操作。具体此属性的值代表的意义见表。
responseText属性
此属性描述的是一个HttpResponse中的全部文本内容,通过访问它,可以得到一次XMLHttpRequest得到响应回传的全部文本内容。只有当ReadyState的值为3或4时此属性才会有部分或者全部值,否则此属性只会是空字串。
responseXML属性
只有当 ReadyState属性为4,并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者 application/xml)时,此属性才会有值并且被解析为一个XML文档,否则此属性为Null。若是回传的XML文档结构不良或未完成响应回 传,此属性也会为Null,由此可见,此属性用来描述被XMLHttpRequest解析后的XML文档的属性。
status属性
用于描述服务器Http请求的状态值,通过此属性值可以判断服务器的响应状态,如通常通过判断status==200来判断服务器是否正常返回。但是注意,必须是日readyState为3或4时才能对此属性进行访问。
onreadystatechange事件
每当readyState发生改变时触发此事件,一般都通过此事件来触发回传处理函数。
open()方法
XMLHttpRequest 对象是通过open(method,uri,async,username,password)的方法来进行初始化工作的,通过调用此方法将得到一个可以 用来进行发送(send()方法)的对象。其中method参数是用来指定发送请求的HttpRequest类型,其值类型为字串,值可以为get、 post、put、delete等;uri参数是用来指定请求被发送到的服务器地址,该地址会被自动解析为绝对地址,所以在这里可以用相对地址来表示; async是一个类型为boolean类型的参数,默认情况下为true,此时表示为异步提交,如果希望发送一个同步请求可以将此值设为false;在服 务器需要验证访问用户的情况,可以设置username以及password两个参数。
当open()方法被调用时,XMLHttpRequest对象将会把readyState属性设为1,且初始化其他属性,如果此时一个请求正在被发送或者响应正在被接收,则前一请求的数据和内容将会丢失,请求将会被取消。
send()方法
当调用 open()方法后,就可以通过调用send()方法按照open()方法设定的参数将请求进行发送。当open()方法中async参数为true 时,在send()方法调用后立即return,否则将会中断直到请求返回。需要注意的是,send()方法必须在readyState为1时,即调用 open()方法以后调用。在调用send()方法以后到接收到响应头之前,readyState的值将被设为2,一旦开始接收到响应消息, readyState将会被设为3,直到响应接收完成,readyState的值才会被设为4。
abort()方法
该方法可以暂停一个HttpRequest的请求发送或是HttpResponse的接收,并且将XMLHttpRequest对象设置为初始化状态。
setRequestHeader()方法
该方法用于在调用open()方法后,设置HttpRequest头的信息,setRequestHeader(header,value)方法包含两个参数,前一个是header键名称,后一个是其值。
getResponseHeader()方法
此方法在readyState为3或4时,用于获取HttpResponse的头部信息,此外还可以通过getAllResponseHeaders()获取所有的HttpResponse的头部信息。
在搞清楚了XMLHttpRequest的这些基本属性方法以后,就可以开始编写第一个Ajax程序了。通过点击一个按钮然后通过Ajax的方式到服务端取回一个Hello world!的字符串显示在界面的一个文本框里。
在一个配置好的站点工程里面新建一个名为AjaxTest.aspx页面。首先在cs文件中的page_load事件函数中写下如下代码:
AjaxTest.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["s"] == "1")//使用查询字串来指示这个请求是通过Ajax发出的
{
Response.Write("hello world!");//向HttpResponse中输出hello world!
Response.End();//将页面缓冲发送向客户端浏览器 并中止该页输出
//如果去掉这句 会得到多余的HTML代码
}
}
相对来说,在前台页面中书写的代码将会多一些,慢慢地会发现这也许是Ajax的一个惯例:
AjaxTest.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTest.aspx.cs" Inherits= "AjaxTest" %>
<!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>测试</title>
<script language="javascript" type="text/javascript">
<!--
function GetInfo(){//就是通过这个函数来异步获取信息的
var xmlHttpReq = null;//声明一个空对象用来装入XMLHttpRequest
if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest();//通常采用这种方式实例化一个XMLHttpRequest
}
else if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
//IE5 IE6是通过这种方式
}
if(xmlHttpReq != null){//如果对象实例化成功 就可以干活啦
xmlHttpReq.open("get","AjaxTest.aspx?s=1",true);
//调用open()方法并采用异步方式
xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
xmlHttpReq.send(null);//因为使用get方式提交,所以可以使用null参调用
}
function RequestCallBack(){//一旦readyState值改变,将会调用这个函数
if(xmlHttpReq.readyState == 4)
{
document.getElementById("iptText").value = xmlHttpReq.responseText;
//将xmlHttpReq.responseText的值赋给iptText控件
}
}
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="iptText" type="text" value="" />
<input type="button" id="" value="Ajax提交" onclick="GetInfo();" />
<!--点击这个按钮调用-->
</div>
</form>
</body>
</html>
如果在点击按钮的瞬间发现文本框内闪电般地出现了 “Hello world!”,那么恭喜,已经完成了一个Ajax调用。如果还对前台页面中那些和C#貌似神离的代码觉得不太明白,没关系,接下来就将来简单学习一下Ajax另外一个重要的部分——JavaScript。
2013-09-18
webconfig配置
</system.web>
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
</system.web>
定义一个类,执行服务器端操作,需要在客户端调用的方法头前加如下代码
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
例如:
public class abc
{
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public string getResult(string hl,string jine)
{
try
{
Conn con=new Conn();
decimal a=con.GethuilvByName(hl);
decimal b=Decimal.Parse(jine);
return ((decimal)(a*b)).ToString();
}
catch (Exception ee)
{
Console.WriteLine(ee.Message);
return null;
}
}
}
pageload里注册此类
Ajax.Utility.RegisterTypeForAjax(typeof(abc));
前端js调用的时候类名.方法名
例
function getinformation()
{
var tmp = document.all("txtZhrmb");
var hl=document.all("DropDownList1").value;
var jine=document.all("txtJine").value;
tmp.value =abc.getResult(hl,jine).value;
}