AJAX是创建交互式网页应用的网页开发技术的一种。
Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。可以用于创建快速动态网页的技术。在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
扩展资料
Ajax 开发与传统的 B/S开发有很大的不同。这些不同引入了新的编程问题,最大的问题在于易用性。由于 Ajax 依赖浏览器的 JavaScript 和XML,浏览器的兼容性和支持的标准也变得和 JavaScript 的运行时性能一样重要了。
综合各种变化的技术和强耦合的客户服务端环境,Ajax 提出了一种新的开发方式。Ajax 开发人员必须理解传统的 MVC 架构,这限制了应用层次之间的边界。同时,开发人员还需要考虑 B/S 环境的外部和使用 Ajax 技术来重定型 MVC 边界。
最重要的是,Ajax 开发人员必须禁止以页面集合的方式来考虑 Web 应用而需要将其认为是单个页面。一旦 UI 设计与服务架构之间的范围被严格区分开来后,开发人员就需要更新和变化的技术集合了。
参考资料来源:百度百科-ajax。
ajax回调函数中的 data参数只接受 在 Response.Write() 中输出的数据。
返回多个参数你可以使用json数据格式。
在后台输出JSON形式的字符串,如 Response.Write("{'key':'value'}");。
前台使用jQuery.Ajax。
$("#btntext").click(function(){。
$.get("Handler.ashx",{action:"checkvalidatecode"},。
function(data){。
/*。
现在的data是一个字符串为:{'key':'value'}。
用 var jsonData = eval("("+data+")"); 将字符串转换为json格式数据 。
alert(jsonData.key); 此出将弹出 "value"的窗口。
JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互,建议您可以试着用它,慢慢你会发现它带给你的方便。
*/ 。
});。
});。
运用ajax()方法,比其它如load()、get()、post()全局性函数它更多地关注实现过程中的细节;首先要了解其参数列表:
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个 “?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。
beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){。
this; //调用本次ajax请求时传递的options参数。
complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){。
this; //调用本次ajax请求时传递的options参数。
success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){。
//data可能是xmlDoc、jsonObj、html、text等等。
this; //调用本次ajax请求时传递的options参数 。
error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
ajax事件函数如下:
function(XMLHttpRequest, textStatus, errorThrown){。
//通常情况下textStatus和errorThrown只有其中一个包含信息。
this; //调用本次ajax请求时传递的options参数。
contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
dataFilter:要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){。
//返回处理后的数据
return data;
global:要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified:要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
username:要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
password:要求为String类型的参数,用于响应HTTP访问认证请求的密码。
processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-formurlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
scriptCharset:要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
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。