First find an excuse: good early to analyze the Ajaxpro code to implement the mechanism, has been suffering from no time, now finally have so little, opening, and slowly analysis ...
Start with one of the simplest examples:
Click on a client button to trigger a JavaScript function, execute a server-side method with only one string parameter, and return a processed string, which will be processed by turning the incoming string into "Hi" +string +! Simple enough, in order to be not want wordy code impact simple analysis;
All the code is as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Test.aspx.cs" inherits= "Test"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled page </title>
<script type= "Text/javascript" >
function dotest ()
{
AJAXDemo.Examples.Test.TestMethod.GetTest ("Ajaxpro", dotest_callback);
}
function Dotest_callback (res) {
alert (res.value);
}
</script>
<body>
<form id= "Form1" runat= "Server"
<div>
<input id= "Button1" type= "button" value= "Test"/></DIV>
</form>
</body>
Test.aspx.cs
Public partial class Test:System.Web.UI.Page
{
protected void Page_Load (object sender, EventArgs e)
{
Utility.registertypeforajax (typeof (AJAXDemo.Examples.Test.TestMethod));
}
}
AJAXDemo.Examples.Test
using System;
Using Ajaxpro;
Namespace AJAXDemo.Examples.Test
{
public class TestMethod
{
Public TestMethod ()
{}
[Ajaxmethod]
public string Gettest (string testtext)
{
Return "Hi," + Testtext + "!";
}
}
}
1. First we look at the Ajaxpro on the page to create what?
TEST[1]
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
No title page
</title>
<script type= "Text/javascript" >
function Dotest ()
{
AJAXDemo.Examples.Test.TestMethod.GetTest ("Ajaxpro", dotest_callback);
}
function Dotest_callback (res) {
alert (Res.value);
}
</script>
<body>
<form name= "Form1" method= "Post" action= "Test.aspx" id= "Form1" >
<div>
<input type= "hidden" name= "__viewstate" id= "__viewstate" value= /dq== "/>
</div>
<script type= "Text/javascript" src= "/ajaxdemo.2/ajaxpro/prototype.ashx" ></script>
<script type= "Text/javascript" src= "/ajaxdemo.2/ajaxpro/core.ashx" ></script>
<script type= "Text/javascript" src= "/ajaxdemo.2/ajaxpro/converter.ashx" ></script>
<script type= "Text/javascript" src= "/ajaxdemo.2/ajaxpro/ajaxdemo.examples.test.testmethod,app_ Code.un7rskvh.ashx "></script>
<div>
<input id= "Button1" type= "button" value= "Test"/></div>
</form>
</body>
Be sure to pay attention to these lines
<script type= "Text/javascript" src= "/ajaxdemo.2/ajaxpro/prototype.ashx" ></script>
<script type= "Text/javascript" src= "/ajaxdemo.2/ajaxpro/core.ashx" ></script>
<script type= "Text/javascript" src= "/ajaxdemo.2/ajaxpro/converter.ashx" ></script>
<script type= "Text/javascript" src= "/ajaxdemo.2/ajaxpro/ajaxdemo.examples.test.testmethod,app_ Code.urx4hqkg.ashx "></script>
By using HTTP://LOCALHOST:3578/AJAXDEMO.2/AJAXPRO/PROTOTYPE.ASHX and http://localhost:3578/AJAXDemo.2/ajaxpro/ Core.ashx is not difficult to find, the first two are the source code with two JS files (Core.js and prototype.js) converted, the basic content is the same as the original file, and Converter.ashx and AJAXDemo.Examples.Test.TestMet What's inside the hod,app_code.urx4hqkg.ashx? Look below:
Ajaxdemo.examples.test.testmethod,app_code.urx4hqkg.ashx
AddNamespace ("AJAXDemo.Examples.Test");
AJAXDemo.Examples.Test.TestMethod_class = Class.create ();
AJAXDemo.Examples.Test.TestMethod_class.prototype = (new Ajaxpro.ajaxclass ()). Extend ({
Gettest:function (testtext) {
Return This.invoke ("Gettest", {"Testtext": Testtext}, this.) Gettest.getarguments (). Slice (1));
},
Initialize:function () {
This.url = '/ajaxdemo.2/ajaxpro/ajaxdemo.examples.test.testmethod,app_code.un7rskvh.ashx ';
}
});
AJAXDemo.Examples.Test.TestMethod = new AJAXDemo.Examples.Test.TestMethod_class ();
Converter.ashx
AddNamespace ("Ajax.web");
Ajax.Web.NameValueCollection = function ()
{
This.__type = "System.Collections.Specialized.NameValueCollection";
This.add = function (key, value) {
if (this[key] = = null) {
This[key] = value;
}
}
This.getkeys = function () {
var keys = [];
For (key in this)
if (typeof This[key]!= "function")
Keys.push (key);
return keys;
}
This.getvalue = function (key) {
return This[key];
}
This.tojson = function () {
var o = this;
O.tojson = null;
Delete O.tojson;
return Ajaxpro.tojson (o);
}
}
AddNamespace ("Ajax.web");
Ajax.Web.DataTable = function (columns, rows) {
This.__type = "System.Data.DataTable, System.Data";
This. Columns = new Array ();
This. Rows = new Array ();
This.addcolumn = function (name, type) {
var c = new Object ();
C.name = Name;
C.__type = type;
This. Columns.push (c);
}
This.tojson = function () {
var dt = new Object ();
Dt. Columns = [];
for (var i=0; i<this. Columns.length; i++)
Dt. Columns.push ([this.] Columns[i]. Name, this. Columns[i].__type]);
Dt. Rows = [];
for (var i=0; i<this. Rows.length; i++) {
var row = [];
for (var j=0; j<this. Columns.length; J + +)
Row.push (this. Rows[i][this. COLUMNS[J]. Name]);
Dt. Rows.push (row);
}
return Ajaxpro.tojson (DT);
}
This.addrow = function (row) {
This. Rows.push (row);
}
if (columns!= null) {
for (var i=0; i< Columns.length; i++) {
this.addcolumn (columns[i][0], COLUMNS[I][1]);
}
}
if (rows!= null) {
for (var i=0; i<rows.length; i++) {
var row = new Object ();
for (var c=0; c<this. Columns.length && c<rows[i].length; C + +) {
Row[this. COLUMNS[C]. Name] = Rows[i][c];
}
This.addrow (row);
}
}
}
AddNamespace ("Ajax.web");
Ajax.Web.DataSet = function (tables) {
This.__type = "System.Data.DataSet, System.Data";
This. Tables = new Array ();
this.addtable = function (table) {
This. Tables.push (table);
}
if (tables!= null) {
for (var i=0; i<tables.length; i++) {
This.addtable (Tables[i]);
}
}
}
function person (ID) {
This. FirstName = "";
This. Familyname = "";
This. Age = 0;
This.id = ID;
This.__type = ' AJAXDemo.Examples.Classes.Person, APP_CODE.UN7RSKVH, version=0.0.0.0, Culture=neutral, PublicKeyToken =null ';
}
Person.prototype.get_FullName = function () {
return this. FirstName + "" + this. Familyname;
}
Person.prototype.toJSON = function () {
var o = new Object ();
O.firstname = this. FirstName;
O.familyname = this. Familyname;
O.age = this. Age;
O.id = this.id;
return Ajaxpro.tojson (o);
}
Person.prototype.save = function () {
Return Person.save (this);
}
Person.save = function (p) {
var ps = new Personsaver ();
Return Ps.saveperson (P); Synchronous call
}
var personsaver = Class.create ();
Personsaver.prototype = (new Ajaxpro.request ()). Extend ({
Saveperson:function (p) {
Return This.invoke ("Saveperson", {"P":p}). value;
},
Initialize:function () {
This.url = "Ajaxpro/ajaxdemo.examples.classes.person, APP_CODE.UN7RSKVH, version=0.0.0.0, Culture=neutral, Publickeytoken=null.ashx ";
}
})
Because there are four ashx files on the top of our
function Dotest ()
{
AJAXDemo.Examples.Test.TestMethod.GetTest ("Ajaxpro", dotest_callback);
}
To execute asynchronously, and how these ashx files are generated on the page, thanks to the Web.config configuration and the following code:
Utility.registertypeforajax (typeof (AJAXDemo.Examples.Test.TestMethod));
As for the sequence of actions produced by the Utility.registertypeforajax method, I will continue to explain in the following article that interested in being able to track the execution of the code themselves.
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
