Yahoo! JavaScript Library and AjaxPro

Posted by: Ajax.NET Professional, on 06 Oct 2006 | View original | Bookmarked: 0 time(s)

There are a lot of great JavaScript libraries available that are used be developers to add Ajax and Web 2.0 to their web sites. While AjaxPro is optimized to run on all web browsers including Windows Mobile devices I got some requests on supporting the Yahoo! JavaScript libraries. I have done some internal changes that will allow you do use the Yahoo! JavaScript files instead of the generated files from AjaxPro. Because there is no JSON parser in the Yahoo! lib I'm using the json.js written by Douglas Crockford. But first have a look at the ASP.NET page (C#):

[AjaxPro.AjaxNamespace("Home")]
public partial class _Default : System.Web.UI.Page
{
    [AjaxPro.AjaxMethod]
    public static string HelloWorld(string name)
    {
        return "Hello " + name;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        // AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
    }
}

The only difference I do is removing the RegisterTypeForAjax call which will include the AjaxPro JavaScript files to the current page. Now, have a look at the client-side JavaScript source code:

<script type="text/javascript">

var callback = {
    success: function(json) {
        var o = json.parseJSON();
        alert(o.result);
    }
};

var args = {};
args.name = "Michael"; 

YAHOO.util.Connect.initHeader("x-ajaxpro-method", "HelloWorld"); 
var connectionObject = YAHOO.util.Connect.asyncRequest("POST",
    "ajaxpro/_Default,App_Code.ashx", callback, args.toJSONString()); 

</script>

The first object callback is used to run an asyncronous XmlHttpRequest request. The sucsess function will be called when the requests is finished. Next we have the arguments we need for the .NET method HelloWorld. If you look in the C# source code above you will see the correct notation of the argument name:

var args = {};
args.name = "Michael"; 

To call an AjaxMethod AjaxPro is using a http header x-ajaxpro-method. In my example you have set this value to HelloWorld:

YAHOO.util.Connect.initHeader("x-ajaxpro-method", "HelloWorld"); 

Now, we can invoke the AjaxMethod using the YAHOO.util.Connect method. AjaxPro needs the arguments in the http body as a JSON string. For this I use the method toJSONString() which is included in the json.js from Douglas.

var connectionObject = YAHOO.util.Connect.asyncRequest("POST",
    "ajaxpro/_Default,App_Code.ashx", callback, args.toJSONString()); 

I will publish a first beta during the weekend.

Share this post: Email it! | bookmark it! | digg it! | reddit!

Category: Ajax | Other Posts: View all posts by this blogger | Report as irrelevant | View bloggers stats | Views: 2059 | Hits: 82

News Categories

.NET | Agile | Ajax | Architecture | ASP.NET | BizTalk | C# | Certification | Data | DataGrid | DataSet | Debugger | DotNetNuke | Events | GridView | IIS | Indigo | JavaScript | Mobile | Mono | Patterns and Practices | Performance | Podcast | Refactor | Regex | Security | Sharepoint | Silverlight | Smart Client Applications | Software | SQL | VB.NET | Visual Studio | W3 | WCF | WinFx | WPF | WSE | XAML | XLinq | XML | XSD