学习ajax 笔记（一）

发布时间：2020-12-16 00:56:36 所属栏目：百科来源：网络整理

导读：学习ajax 笔记（一） 1. 传统页面的过程很多文件都是通过http协议请求来传送的 2. Ajax应用异步的发生请求页面部分刷新减少数据传输量（请求的数据传输量不变，主要是回发的数据传输量）提高用户的体验（胡乱应用的话，会造成反方向的结果） 3. asp.n

学习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); } } }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!