For Ajax, do not write JavascriptCodeIt is almost impossible to implement a good Ajax page,
Of course, you can use updatepanel in Ajax extensions to implement some basic Ajax functions,
However, if you want to better understand Ajax, you cannot avoid it when writing JavaScript on the client,
In ASP. NET Ajax, Microsoft has developed a Good OOP extension for Javascript,
It implements basic OOP functions, such as namespaces, classes, inheritance, interfaces, reflection, and so on,
Therefore, in terms of development, we have made further improvements compared to the previously cumbersome JavaScript.
The following example shows how to use the basic OOP function of Microsoft Ajax library for JavaScript,
It mainly includes namespace usage, class usage, inheritance implementation, and some basic usage of interfaces.
The Code-behind on the page does not contain any code. It is implemented purely on the client using JavaScript,
Because it is relatively simple, let's look at the Code directly, and there are many annotations.
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
// To use the OOP Extension function of JavaScript, there must be a scriptmanager on the page
// This scriptmanager downloads the basic JavaScript library of the Microsoft Ajax library.
<Asp: scriptmanager id = "scriptmanager1" runat = "server">
</ASP: scriptmanager>
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
// At the beginning, the type in the global namespace is used to define the namespace.
Type. Registernamespace ("Baobeime ");
// Then you can define your own class in the namespace.
// Class Constructor
Baobeime. Person = function (name, sex, age ){
This. _ name = Name;
This. _ sex = sex;
This. _ age = age;
}
// Class body
Baobeime. Person. Prototype = {
Set_sex: function (sex ){
This. _ sex = sex;
},
Get_sex: function (){
Return this. _ sex;
},
Set_name: function (name ){
This. _ name = Name;
},
Get_name: function (){
Return this. _ name;
},
Set_age: function (AGE ){
This. _ age = age;
},
Get_age: function (){
Return this. _ age;
},
Tostring: function (){
Return String. Format ("I am {0}, Gender: {1}. I am {2} years old! ",
This. get_name (), this. get_sex (), this. get_age ());
}
}
// Associate a custom namespace with a custom class
// This class does not inherit from any class or implement any interface
Baobeime. Person. Registerclass ("Baobeime. Person", null, null );
// Register another interface baobeime. myinterface
Baobeime. myinterface = function (){
}
Baobeime. myinterface. Prototype = {
// Obtain the name, gender, and age.
Igetpersonmsg: function (){},
// Obtain employee ID, department, and salary
Igetemployeemsg: function (){}
}
Baobeime. myinterface.Registerinterface("Baobeime. myinterface ");
// Register another class to inherit from the baobeime. Person class,
// The baobeime. myinterface interface defined above will be implemented
Baobeime. Employee = function (name, sex, age, number, department, money ){
// Call the constructor of the parent class to initialize the basic structure of the parent class.
Baobeime. employee. initializebase (this, [name, sex, age]);
This. _ number = number;
This. _ Department = Department;
This. _ money = money;
}
Baobeime. employee. Prototype = {
Set_number: function (number ){
This. _ number = number;
},
Get_number: function (){
Return this. _ number;
},
Set_department: function (department ){
This. _ Department = Department;
},
Get_department: function (){
Return this. _ department;
},
Set_money: function (money ){
This. _ money = money;
},
Get_money: function (){
Return this. _ money;
},
// Because the tostring () method also exists in the parent class, it is essentially an Overwrite
// And the tostring () of the parent class is also called through callbasemethod ()
Tostring: function (){
Return string. Format ("{0}, employee number: {1}, working in {2}, salary: {3 }! ",
Baobeime. employee. callbasemethod (this, "tostring "),
This. get_number (), this. get_department (), this. get_money ());
},
// Here we need to implement two methods in the interface
Igetpersonmsg: function (){
Return string. Format ("I am {0}, Gender: {1}. I am {2} years old! ",
This. get_name (), this. get_sex (), this. get_age ());
},
Igetemployeemsg: function (){
Return string. Format ("My employee number is {0}. I work at {1} and my salary is {2} RMB! ",
This. get_number (), this. get_department (), this. get_money ());
}
}
// When registering a class, specify the parent class as baobeime. person, and implement the interface baobeime. myinterface
Baobeime. employee. registerclass ("baobeime. Employee ",
Baobeime. Person, baobeime. myinterface );
var person;
var employee;
function buttonemedionclick () {
person = new baobeime. person ("Xiaozhen", "male", "20");
alert (person. tostring ();
}
function button2_onclick () {
If (person) {
person. set_age ("21");
person. set_name ("bill");
alert (person. tostring ();
}< br> else {
alert ("person object not created");
}< BR >}
Function button3_onclick (){
Employee = new baobeime. employee ("Xiaozhen", "male", "20 ",
"10093323", "R & D department", "15000 ");
Alert (employee. tostring ());
}
Function button4_onclick (){
If (employee ){
Employee. set_name ("bill ");
Employee. set_age ("21 ");
Employee. set_money ("20000 ");
Alert (employee. tostring ());
}
Else {
Alert ("Employee object not created ");
}
}
Function button5_onclick (){
If (employee ){
Alert (employee. igetpersonmsg ());
}
Else {
Alert ("Employee object not created ");
}
}
Function button6_onclick (){
If (employee ){
Alert (employee. igetemployeemsg ());
}
Else {
Alert ("Employee object not created ");
}
}
</SCRIPT>
<Div>
<Input id = "button1" type = "button" value = "create person object"
Onclick = "Return button1_onclick ()"/> <br/>
<Br/>
<Input id = "button2" type = "button" value = "change person information"
Onclick = "Return button2_onclick ()"/> <br/>
<Br/>
<Input id = "button3" type = "button" value = "Create an employee object"
Onclick = "Return button3_onclick ()"/> <br/>
<Br/>
<Input id = "button4" type = "button" value = "Change employee information"
Onclick = "Return button4_onclick ()"/> <br/>
<Br/>
<Input id = "button5" type = "button" value = "get basic information through interfaces"
Onclick = "Return button5_onclick ()"/> <br/>
<Br/>
<Input id = "button6" type = "button" value = "get work information through interfaces"
Onclick = "Return button6_onclick ()"/> </div>
</Form>
</Body>
</Html>
Result
Click Create person object.
Click Change person object.
Click Create employee object.
Click Change employee object.
Click "get basic information through interface ".
Click "get work information through interface" to obtain
2010-1-25
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
