引用地址：http://blog.csdn.net/qianjiu/article/details/7524228

5.2 Ajax基础http://book.csdn.net/bookfiles/653/10065320712.shtml

在 进行Ajax开发以前，我们必须先对一些基本的知识进行了解。虽然Ajax.NET已经将Ajax实现细节封装起来，并大大简化了我们的操作，但是了解基 本的Ajax实现方式对于帮助我们在开发中能更好理解和实施，以及更有效地优化和排错是至关重要的。此外，虽然我们不必编写具体的Ajax调用代理，但是 在调用代理前获取数据，以及返回数据后怎样使数据能够正确显示，这两部分工作都需要我们具有基本的JavaScript操作DOM模型的能力。接下来我们 将来对这几方面的知识进行讨论。

5.2.1 XMLHttpRequest对象

对 于Ajax技术的基础和核心，XMLHttpRequest对象应该是我们必须要了解的一个对象，Ajax实现的关键发送异步请求并接收响应执行回调都是 通过它来完成的。XMLHttpRequest最早是在Microsoft Internet Explorer 5.0以ActiveX组件中被引入的，之后各大浏览器厂商都以JavaScript内置对象的方式实现了XMLHttpRequest对象。虽然大家对 它的实现方式有所区别，但是绝大多数浏览器都提供了类似的属性和方法，在实际脚本编写方法上区别不大，并且实现得到的效果也基本相同，目前W3C正致力于 将XMLHttpRequest对象制定一个统一的标准使各个浏览器厂商遵照执行，以利于Ajax技术的推广与发展。

XMLHttpRequest提供了一个相对精简易用的API，下面我们就将简单地介绍一下它所提供的属性和方法以及怎么利用这些属性和方法完成一次Ajax的请求和响应处理。

1．readyState属性

当一个XMLHttpRequest对象被创建后，此属性标识了此对象正处于什么状态，我们可以通过对此属性的访问，来判断此次请求的状态是什么然后做出相应的操作。具体此属性的值代表的意义见表5-1。

表5-1

值

说    明

0

未初始化状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化此对象的属性

1

准备发送状态；此时，已经调用了XMLHttpRequest对象的Open()方法，并且已经准备好将一个XMLHttpRequest请求发送到服务端

2

已发送状态；此时，已经调用了XMLHttpRequest对象的Send()方法，但是并没有收到任何响应

3

正在接收状态；此时，已经开始接收HttpResponse响应信息但是还没有完成接收

4

完成响应状态；此时，已经完成了HttpResponse响应的接收

2．responseText属性

此属性描述的是一个HttpResponse中的全部文本内容，通过访问它，可以得到一次XMLHttpRequest得到响应回传的全部文本内容。只有当ReadyState的值为3或4时此属性才会有部分或者全部值，否则此属性只会是空字串。

3．responseXML属性

只有当 ReadyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或者 application/xml）时，此属性才会有值并且被解析为一个XML文档，否则此属性为Null。若是回传的XML文档结构不良或未完成响应回 传，此属性也会为Null，由此可见，此属性用来描述被XMLHttpRequest解析后的XML文档的属性。

4．status属性

用于描述服务器Http请求的状态值，通过此属性值我们可以判断服务器的响应状态，如我们通常通过判断status==200来判断服务器是否正常返回。但是注意，必须是日readyState为3或4时才能对此属性进行访问。

5．status属性

用于描述服务器Http请求的状态文本，通过此属性我们可以得到服务器响应的状态的描述文本，与status属性同样，必须在readyState为3或4时才能对此属性进行访问。

6．onreadystatechange事件

每当readyState发生改变时触发此事件，我们一般都通过此事件来触发回传处理函数。

7．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，且初始化其他属性，如果此时一个请求正在被发送或者响应正在被接收，则前一请求的数据和内容将会丢失，请求将会被取消。

8．send()方法

当调用 open()方法后，我们就可以通过调用send()方法按照open()方法设定的参数将请求进行发送。当open()方法中async参数为true 时，在send()方法调用后立即return，否则将会中断直到请求返回。需要注意的是，send()方法必须在readyState为1时，即调用 open()方法以后调用。在调用send()方法以后到接收到响应头之前，readyState的值将被设为2，一旦开始接收到响应消息， readyState将会被设为3，直到响应接收完成，readyState的值才会被设为4。

9．abort()方法

该方法可以暂停一个HttpRequest的请求发送或是HttpResponse的接收，并且将XMLHttpRequest对象设置为初始化状态。

10．setRequestHeader()方法

该方法用于在调用open()方法后，设置HttpRequest头的信息，setRequestHeader（header,value）方法包含两个参数，前一个是header键名称，后一个是其值。

11．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。

.NET AJAX实例的更多相关文章

  1. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  2. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  3. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  4. C#中jQuery Ajax实例（二）

    上一篇写了一个简单的Ajax异步程序,这一次同样是简单的程序,只不过这次先把参数传到一般处理程序(后缀为ashx)中,再把结果传回到页面. 1.html代码: <html xmlns=" ...

  5. C#中jQuery Ajax实例（一）

    目标:在aspx页面输入两参数,传到后台.cs代码,在无刷新显示到前台 下面是我的Ajax异步传值的第一个实例 1.前台html代码: <html xmlns="http://www. ...

  6. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  7. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  8. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

  9. Ajax实例二：取得新内容

    Ajax实例二:取得新内容 通过点击pre和next按钮,从服务器取得最新内容. HTML代码 <div id="slide">图片显示区</div> &l ...

  10. Ajax实例一：利用服务器计算

    Ajax实例一:利用服务器计算 HTML代码 //输入两个数 <input id="number1" type="number"> <inpu ...

随机推荐

  1. CTS/APIO2019游记

    退役后游记... 这次是真·游记了 ghj1222自从省选翻车后心情一直不错 5.12 (CTS 报到) 没去thupc(话说都不知道thupc这时候举行),于是就这天从衡水出发了 翻来覆去睡不着觉, ...

  2. 学习Vim的四周计划

    来源:Python程序员 ID:pythonbuluo vim具有自定义配色方案,语法高亮,linting和自动填充功能 Vim是一个以非常难学而闻名的命令行文本编辑器(有个关于Vim的笑话:问如何生 ...

  3. luoguP4921 情侣？给我烧了！

    luogu 考虑对于\(n\)对情侣,恰好\(k\)对是和谐的方案数是 \[ ans[n][k]=\binom{n}{k}A^k_n2^kg(n-k) \] \(g(n)\)为全部\(n\)对情侣不和 ...

  4. 洛谷P1505 [国家集训队]旅游

    题目描述 \(Ray\) 乐忠于旅游,这次他来到了\(T\) 城.\(T\) 城是一个水上城市,一共有 \(N\) 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,\(T ...

  5. git教程3-分支

    https://git-scm.com/book/zh/v1/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%9A%84%E7%AE%A1%E7%90%86 ...

  6. js怎样实现继承

    js实现继承的5种方式 js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对 ...

  7. CAS操作

    CAS操作: Compare and Swap,比较并操作,CPU指令,在大多数处理器架构,包括IA32.Space中采用的都是CAS指令,CAS的语义是“我认为V的值应该为A,如果是,那么将V的值更 ...

  8. mysql主从复制之同步部分库表

    这里以mariadb为例,和mysql一样的配置 系统:centos7 主服务器:192.168.0.1:3305(两台服务器都做过时间同步) 从服务器:192.168.0.2:3306(两台服务器都 ...

  9. 物理机和虚拟机互相可以ping通，还是无法连接

    关闭防火墙服务 CentOS # systemctl stop firewalld.service Debian # iptables -F Ubuntu # ufw disable 安装SSH服务 ...

  10. Java面向对象_常用类库api——二分查找算法

    概念:又称为折半查找,优点是比较次数少,查找速度快,平均性能好:缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表. 例: public class Bi ...