学习ajax 笔记（一）
1.传统页面的过程
很多文件都是通过http协议请求来传送的
2.Ajax应用
异步的发生请求
页面部分刷新
减少数据传输量
（请求的数据传输量不变，主要是回发的数据传输量）
提高用户的体验
（胡乱应用的话，会造成反方向的结果）
3.asp.net的ajax应用
服务器为中心的开发（是不用写js代码的）
客户端为中心开发（提供了丰富的支持）
4．microsoft Ajax library
javascript基础扩展
浏览器兼容层（ie，forBox）
面向对象类型系统(维护和扩展的方法)
提供一个异步通信层（对象进行封装进行扩张，服务器端和客户端之间的通信
提供客户端基础类库（一些模型的基础）
下面是一段用JavaScript实现的面向对象的系统
客户端相应用户请求
<scriptlanguage="javascript"type="text/javascript">
//注册一个命名空间（一个类面向对象）
Type.registerNamespace("AspNetAjaxOverView");
//定义一个Person类
//顶一个构造函数，有两个参数，将用户传入的两个参数保存下来
//加下划线的是私有成员
AspNetAjaxOverView.Person=function(firstName,lastName)
{
this._firstName=firstName;
this._lastName=lastName;
}
//定义成员方法
AspNetAjaxOverView.Person.prototype=
{
//得到其属性(方法)
get_firstName:function()
{
returnthis._firstName;
},
get_lastName:function()
{
returnthis._lastName;
},
toString:function()
{
returnString.format("Hello,I'm{0}{1}.",
this.get_firstName(),
this.get_lastName());
}
}
AspNetAjaxOverView.Person.registerClass("AspNetAjaxOverView.Person");
AspNetAjaxOverView.Employee=function(firstName,lastName,title)
{
//要传入父类的构造函数参数给它
AspNetAjaxOverView.Employee.initializeBase(this,[firstName,lastName]);
this._title=title;
}
AspNetAjaxOverView.Employee.prototype=
{
get_title:function()
{
returnthis._title;
},
toString:function()
{
//调用父类的tostring方法
returnAspNetAjaxOverView.Employee.callBaseMethod(this,"toString")+
"Mytitleis'"+this.get_title()+"'.";
}
}
//后面是要继承的类
AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee",AspNetAjaxOverView.Person);
</script>
以及一个用异步通信层实现信息传输
<scriptlanguage="javascript"type="text/javascript">
functionshowEmployee(firstName,title)
{
//异步通信层定义一些类
varrequest=newSys.Net.WebRequest();
//(2)设置请求URL
request.set_url("GetEmployee.ashx");
//(3)设置请求方式
request.set_httpVerb("POST");
//(4)设置请求完成时的处理函数
//回调函数含义：发出一个请求，服务器通过你指定一个回调函数来回复你
request.add_completed(onGetEmployeeComplete);
//encodeURIComponent进行转义
varrequestBody=String.format(
"firstName={0}&lastName={1}&title={2}",
encodeURIComponent(firstName),
encodeURIComponent(lastName),
encodeURIComponent(title));
//传进去
request.set_body(requestBody);
//发送信息
request.invoke();
functiononGetEmployeeComplete(response)
{
if(response.get_responseAvailable())
{
varemployee=response.get_object();
alert(String.format(
"HelloI'm{0}{1},mytitleis'{2}'",
employee.FirstName,
employee.LastName,
employee.Title));
}
}
}
</script>
对应请求在一般处理程序写
<%@WebHandlerLanguage="C#"Class="AspNetAjaxOverview.GetEmployee"%>
usingSystem;
usingSystem.Web;
usingSystem.Web.Script.Serialization;
namespaceAspNetAjaxOverview
{
publicclassGetEmployee:IHttpHandler
{
//让服务器端相应客户端的请求，并发出相应的信息
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
stringfirstName=context.Request.Params["firstName"];
stringlastName=context.Request.Params["lastName"];
stringtitle=context.Request.Params["title"];
Employeeemployee=newEmployee(firstName,title);
//将对象序列化为json数据格式
JavaScriptSerializerserializer=newJavaScriptSerializer();
stringjsonEmp=serializer.Serialize(employee);
//进行输出
context.Response.Write(jsonEmp);
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}
其中的Employee类是
publicclassEmployee
{
privatestring_FirstName;
privatestring_LastName;
privatestring_Title;
publicEmployee(){}
publicEmployee(stringfirstName,stringlastName,stringtitle)
{
this._FirstName=firstName;
this._LastName=lastName;
this._Title=title;
}
publicstringFirstName
{
get
{
returnthis._FirstName;
}
}
publicstringLastName
{
get
{
returnthis._LastName;
}
}
publicstringTitle
{
get
{
returnthis._Title;
}
}
}
客户端访问WebService方法
对应的JavaScript
<scriptlanguage="javascript"type="text/javascript">
functionshowEmployee(firstName,title)
{
//调用WebService的方法
AspNetAjaxOverview.EmployeeService.GetEmployee(
firstName,
lastName,
title,
onGetEmployeeSuccess);
}
//显示出来
functiononGetEmployeeSuccess(employee)
{
alert(String.format(
"HelloI'm{0}{1},mytitleis'{2}'",
employee.Title));
}
</script>
webservice代码
<%@WebServiceLanguage="C#"Class="AspNetAjaxOverview.EmployeeService"%>
usingSystem;
usingSystem.Web;
usingSystem.Web.Services;
usingSystem.Web.Services.Protocols;
usingSystem.Web.Script.Services;
namespaceAspNetAjaxOverview
{
[WebService(Namespace="http://tempuri.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[ScriptService]
publicclassEmployeeService:System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod]
publicEmployeeGetEmployee(stringfirstName,stringtitle)
{
returnnewEmployee(firstName,title); } } }
