学习ajax 笔记(一)
1.传统页面的过程
很多文件都是通过http协议请求来传送的
2.Ajax应用
异步的发生请求
页面部分刷新
减少数据传输量
(请求的数据传输量不变,主要是回发的数据传输量)
提高用户的体验
(胡乱应用的话,会造成反方向的结果)
3. asp.net的ajax应用
服务器为中心的开发(是不用写js代码的)
客户端为中心开发(提供了丰富的支持)
4.microsoft Ajax library
javascript基础扩展
浏览器兼容层(ie,forbox)
面向对象类型系统(维护和扩展的方法)
提供一个异步通信层(对象进行封装进行扩张,服务器端和客户端之间的通信
提供客户端基础类库(一些模型的基础)
下面是一段用JavaScript实现的面向对象的系统
客户端相应用户请求
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<script language="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()
{
return this._firstName;
},
get_lastName :function()
{
return this._lastName;
},
toString :function()
{
return String.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 ()
{
return this._title;
},
toString:function ()
{
//调用父类的tostring方法
return AspNetAjaxOverView.Employee.callBaseMethod(this,"toString")+
"My title is '"+this.get_title()+"'.";
}
}
//后面是要继承的类
AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee",AspNetAjaxOverView.Person);
</script>
以及一个用异步通信层实现信息传输
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<script language="javascript" type="text/javascript">
function showEmployee(firstName, lastName, title)
{
//异步通信层定义一些类
var request=new Sys.Net.WebRequest();
//(2)设置请求URL
request.set_url("GetEmployee.ashx");
//(3)设置请求方式
request.set_httpVerb("POST");
//(4)设置请求完成时的处理函数
//回调函数含义:发出一个请求,服务器通过你指定一个回调函数来回复你
request.add_completed(onGetEmployeeComplete);
//encodeURIComponent进行转义
var requestBody=String.format(
"firstName={0}&lastName={1}&title={2}",
encodeURIComponent(firstName),
encodeURIComponent(lastName),
encodeURIComponent(title));
//传进去
request.set_body(requestBody);
//发送信息
request.invoke();
function onGetEmployeeComplete(response)
{
if(response.get_responseAvailable())
{
var employee = response.get_object();
alert(String.format(
"Hello I'm {0} {1}, my title is '{2}'",
employee.FirstName,
employee.LastName,
employee.Title));
}
}
}
</script>
对应请求在一般处理程序写
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<%@ WebHandler Language="C#" Class="AspNetAjaxOverview.GetEmployee" %>
using System;
using System.Web;
using System.Web.Script.Serialization;
namespace AspNetAjaxOverview
{
public class GetEmployee : IHttpHandler
{
//让服务器端相应客户端的请求,并发出相应的信息
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string firstName = context.Request.Params["firstName"];
string lastName = context.Request.Params["lastName"];
string title = context.Request.Params["title"];
Employee employee = new Employee(firstName, lastName, title);
//将对象序列化为json数据格式
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonEmp = serializer.Serialize(employee);
//进行输出
context.Response.Write(jsonEmp);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
其中的Employee类是
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
public class Employee
{
private string _FirstName;
private string _LastName;
private string _Title;
public Employee() { }
public Employee(string firstName, string lastName, string title)
{
this._FirstName = firstName;
this._LastName = lastName;
this._Title = title;
}
public string FirstName
{
get
{
return this._FirstName;
}
}
public string LastName
{
get
{
return this._LastName;
}
}
public string Title
{
get
{
return this._Title;
}
}
}
客户端访问WebService方法
对应的JavaScript
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<script language="javascript" type="text/javascript">
function showEmployee(firstName, lastName, title)
{
//调用WebService的方法
AspNetAjaxOverview.EmployeeService.GetEmployee(
firstName,
lastName,
title,
onGetEmployeeSuccess);
}
//显示出来
function onGetEmployeeSuccess(employee)
{
alert(String.format(
"Hello I'm {0} {1}, my title is '{2}'",
employee.FirstName,
employee.LastName,
employee.Title));
}
</script>
webservice代码
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<%@ WebService Language="C#" Class="AspNetAjaxOverview.EmployeeService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
namespace AspNetAjaxOverview
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class EmployeeService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod]
public Employee GetEmployee(string firstName, string lastName, string title)
{
return new Employee(firstName, lastName, title);
}
}
}