ASP.NET AJAX 学习笔记 〈一〉
-
AJAX 简单介绍:
AJAX是由JavaScript、XML、CSS、DOM等技术组成,其中XMLHttpRequest对象是AJAX的核心,该对象由JavaScript创建,负责在后台以异步的方式让客户端与服务器交互.
代码演示:
Default.aspx <head>部分:
var xmlHttp;
function checkUsername() {
var username = document.getElementById("txtUsername").value;
xmlHttp = getXMLHttpObject();
//指明服务器端响应后的回调函数.
xmlHttp.onreadystatechange = callBack_CheckUsername;
//连接到服务器端.
xmlHttp.open("get", "CheckUsername.aspx?username=" + username, true);
//发送请求.
xmlHttp.send(null);
}
//根据浏览器的不同创建xmlHttp对象.
function getXMLHttpObject() {
try {
xmlHttp = new XMLHttpRequest();
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function callBack_CheckUsername() {
//状态为4即服务器端成功返回.
if (xmlHttp.readyState == 4) {
var checkResult = document.getElementById("checkResult");
//responseText为服务器端返回的字符串.
checkResult.innerHTML = xmlHttp.responseText == "true" ? "" : "Please choose another name.";
}
}
</script>
<body>部分:
<div id="checkResult"></div>
CheckUsername.aspx.cs :
{
Response.Clear();
Response.Write(Request.QueryString["username"] == "admin" ? "false" : "true");
Response.End();
}
结果预览:
AJAX技术给用户带来了流畅友好的体验,同时发现以上JS代码实现起来比较麻烦.
如何来简化这些操作,其实我们可以使用ASP.NET AJAX框架,或者说直接在客户端就能调用服务器页面方法.
ASP.NET AJAX 框架简单介绍:
ASP.NET AJAX可分为Microsoft AJAX Library(客户端部分),AJAX Extensions AJAX Control Toolkit(服务器端部分)两个部分.
Microsoft AJAX Library: 它包括类似于ASP.NET服务器端控件一样良好封装,可运用于各种主流浏览器之上的客户端组件.
AJAX Extensions,包括由开发者社区共同创建的AJAX Control Toolkit,则是ASP.NET服务器端组件的扩展.
代码演示:
分别以WebService、PageMethods两种方式调用服务器端方法.
WebService方式:
SayHelloService.asmx:
namespace AJAXExercise
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class SayHelloService : System.Web.Services.WebService
{
[WebMethod]
public string SayHello(string name)
{
return "Hello " + name;
}
}
//类和方法上面的ScriptService、WebMethod是客户端访问到该WebService所必需的.
}
Default.aspx <body>部分:
ScriptManager控件是ASP.NET AJAX的核心,用来将ASP.NET AJAX框架所需要的JavaScript文件、自定义的ASP.NET AJAX客户端组件以及该页面将要调用的Web Service的客户端代理发送到客户端.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="JScript.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="SayHelloService.asmx" />
</Services>
</asp:ScriptManager>
<input id="txtName" type="text" />
<input type="button" value="Say Hello" onclick="sayHello()" />
<div id="show"></div>
JScript.js:
/*
别忘了前面的命名空间,我这里的是AJAXExercise.
通过ASP.NET AJAX框架,可以使用$get("")来代替document.getElementById("")
SayHello传递的第1个参数是name,第2个参数是指明服务器端成功返回后的回调函数.还
可以指明第3个参数即失败后要调用的回调函数.
*/
AJAXExercise.SayHelloService.SayHello($get("txtName").value, succeeded);
}
function succeeded(result) {
$get("show").innerHTML = result;
}
PageMethods方式:
Default.aspx <body>部分
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" />
<input id="txtUsername" type="text" />
<input type="button" value="Say Hello" onclick="sayHello()" />
<div id="show"></div>
Default.aspx <head>部分
function sayHello() {
PageMethods.SayHello($get("txtName").value, succeeded);
}
function succeeded(result) {
$get("show").innerHTML = result;
}
</script>
Default.aspx.cs :
{
}
[System.Web.Services.WebMethod]
//该方法必须为static.
public static string SayHello(string name)
{
return "Hello " + name;
}
两种方式,结果预览:
