ajax实例教程材料.pdfVIP

完整的Ajax实例

写面的话:

用了很久的Asp.NetAjax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起

xmlHttpRequest的该如何使用了.

以前记的也不怎么清楚,这次就重新完整的学遍吧,也为了自己以后能找个完整的地方

来复习.

什么是Ajax

Ajax的全称是AsynchronousJavascriptAndXML.AJax由HTML,Javascript,DHTML

和DOM组成.

HTML用于建立Web表单

Javascript代码用于运行Ajax应用程序的代码,用于和服务器程序进行通信

DHTML用于动态更新表单

DOM用于处理HTML结构和服务器返回的XML

时至今日,Js中可以处理的数据包括了字符串,JSON,XML数据.

优点

通过XMLHttpRequest对象来和服务器进行通信;在与服务器进行异步数据传输时,传输的

数据更少;更好的用户体验.

实例

get.htm页面HTML代码如下:

body

labelfor=txt_username

:/label

inputtype=textid=txt_username/

br/

labelfor=txt_age

:/label

inputtype=textid=txt_age/

br/

inputtype=buttonvalue=GETid=btnonclick=btn_click();/

divid=result

/div

/body

js代码如下:

scripttype=text/javascript

functionbtn_click(){

//创建XMLHttpRequest对象

varxmlHttp=newXMLHttpRequest();

//获取值

varusername=

document.getElementById(txt_username).value;

varage=document.getElementById(txt_age).value;

//配置XMLHttpRequest对象

xmlHttp.open(get,Get.aspx?username=+username

+age=+age);

//设置回调函数

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState4xmlHttp.status200){

document.getElementById(result).innerHTML=

xmlHttp.responseText;

}

}

//发送请求

xmlHttp.send(null);

}

/script

新建Get.aspx页,Get.aspx.cs代码如下:

protectedvoidPage_Load(objectsender,EventArgse)

{

Response.Clear();

stringusername=Request.QueryString[use