1. #1
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    igorvin is on a distinguished road

      0  

    Default Server side technology to use with extjs

    Server side technology to use with extjs


    Hello, guys. We plan to use extjs libraries on the client side to build Ajax-type web application, but having some problem to choose the proper server side technology to work with extjs. Our options are: Tomcat+JSP, IIS+ASP.NET and IIS+WCF. Tomcat+JSP sounds good, but we should integrate server side code with C++ libraries (COM objects) and the option would be to build JNI layer in this case to make calls from Java to C++ - not very attractive choice for us. IIS+ASP.NET would work straightforward to execute COM objects on the server, but ASP.NET generates __typeof(...) information in JSON responses, which we couldn't figure out how to work around. We need to generate plenty of small JSON objects to pass from the server to client, and __typeof(...) prefix for each object will create a lot of traffic... IIS+WCF is another choice and with webHTTP endpoint for JSON we can turn off __type info. But this approach doesn't generate proper exceptions when we need to return error messages from the server to expjs - somehow we are getting bulky XML responses instead of JSON object with exception info.

    Does anybody have recommendations on which technology works the best on the server side to integrate with extjs to build high-available and responsive Ajax web applications? Thanks for your help.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,657
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It doesn't really matter, people use Ext with lots of different stuff (ASP.NET, Java, PHP, Ruby).

    I'd suggest you use whatever your developers are most familiar with.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User Jonny's Avatar
    Join Date
    Apr 2008
    Posts
    28
    Vote Rating
    0
    Jonny is on a distinguished road

      0  

    Default


    Igorvin, welcome to these forums! You may find this thread handy.

  4. #4
    Sencha User harley.333's Avatar
    Join Date
    Mar 2007
    Posts
    286
    Vote Rating
    4
    harley.333 is on a distinguished road

      0  

    Default


    Here's the JSONHelper class I use to serialize and deserialize JSON objects from C#. I don't get the __typeof(...) junk. I left an alternative method (commented), if you have a preference.

    Code:
    using System;
    using System.IO;
    using System.Runtime.Serialization.Json;
    using System.Text;
    using System.Web.Script.Serialization;
    
    public sealed class JSONHelper {
    	public static String Serialize<T>(T obj) {
    		String s;
    
    		JavaScriptSerializer ser = new JavaScriptSerializer();
    		ser.MaxJsonLength = Int32.MaxValue;
    		s = ser.Serialize(obj);
    		/*
    		DataContractJsonSerializer ser = new DataContractJsonSerializer(obj.GetType());
    		using (MemoryStream ms = new MemoryStream()) {
    			ser.WriteObject(ms, obj);
    			s = Encoding.Default.GetString(ms.ToArray());
    		}
    		*/
    		return s;
    	}
    
    	public static T Deserialize<T>(String json) {
    		T o;
    
    		JavaScriptSerializer ser = new JavaScriptSerializer();
    		ser.MaxJsonLength = Int32.MaxValue;
    		o = ser.Deserialize<T>(json);
    		/*
    		o = Activator.CreateInstance<T>();
    		using (MemoryStream ms = new MemoryStream(Encoding.Unicode.GetBytes(json))) {
    			DataContractJsonSerializer ser = new DataContractJsonSerializer(o.GetType());
    			o = (T)(ser.ReadObject(ms));
    		}
    		*/
    		return o;
    	}
    }

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    igorvin is on a distinguished road

      0  

    Default


    Great - thanks a lot for example! I was thinking to use DataContractJsonSerializer to control JSON serialization/deserialization manually... But since i am new to ASP.NET here is my issue: i am using [WebMethod] tag to implement web services inside ASP.NET application to consume them from expjs library. With [WebMethod] i don't know mechanism to control how JSON requests/responses are created, and using [ScriptMethod] tag generates __typeof(...) info inside JSON responses. How can i use your JSONHelper class inside ASP.NET application to implement my services? (sorry for asking this question if the answer is trivial - like i said, i am new to ASP.NET)

  6. #6
    Sencha User harley.333's Avatar
    Join Date
    Mar 2007
    Posts
    286
    Vote Rating
    4
    harley.333 is on a distinguished road

      0  

    Default


    I don't use WebServices, so I can't answer your question. I've used WebServices in the past, but never to return JSON data. As I understand WebServices, they transmit using the SOAP protocol. SOAP requires the use of XML and the __typeof attribute. (The __typeof attribute enables SOAP to properly deserialize once the data has been received by the consumer. So, __typeof is very important and very required by SOAP.)

    Currently, I'm using ASP.Net to respond to data requests. My code looks something like this:

    Code:
    using System;
    using System.Collections;
    
    public partial class _MyPage : MyBasePage {
    
    	protected override void OnInit(EventArgs e) {
    		base.OnInit(e);
    		BusinessLayer bl;
    
    		try {
    			String sAction = Request.Form["a"];
    			if (!String.IsNullOrEmpty(sAction)) {
    				switch (sAction) {
    					case "GetData":
    						bl = new BusinessLayer(DataContext);
    						OutputJson(bl.GetData(Request.Form["param1"]));
    						break;
    					case "GetSomethingElse":
    						bl = new BusinessLayer(DataContext);
    						OutputJson(bl.GetOtherData());
    						break;
    				}
    			}
    		} catch (Exception ex) {
    			OutputJsonException(ex);
    		}
    	}
    }
    In the above code, you've got a properly tiered design which performs well and is easy to read. The page's base-class (MyBasePage) contains the following helper functions and properties:
    DataContext
    A readonly property containing a custom object which contains everything the application needs to know in order to work with the database (connection strings, etc). The UI layer constructs this object, but the BusinessLayer makes the most use of it.
    OutputJson(Object o)
    OutputJson(Array a, Int32 count)

    Methods to serialize data into JSON (using the JSONHelper class), write this data to the Response object, and close the Response. The overload with two parameters assists in paging data (count equals the total number of rows. ie: the Array contains 50 rows, and count equals 124).
    OutputJsonException(Exception ex)
    A method to serialize an Exception, write it to the Response object, and close the Response. This method allows the developer to do any server-side logging, etc.

    As you can see, all parameters are passed to the server within the Request.Form collection. I'm using "a" as my generic "Action" parameter (meaning, "Hey server, this is the Action I want you to perform"). I use a simple case statement to find the relevant action.

    Here's the HTML for this page:
    HTML Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="_MyPage" %>
    In fact, as you can see, there is no HTML! This ASPX file is simply a handler for data requests. I do NOT have one giant ASPX for all data requests. Instead, I compartmentalize the different types of data. So, I'll end up having a User.aspx page which serves up User data; and a Order.aspx page which serves up Order data.

    I prefer this technique over WebServices because I have total control of the code-flow and the output. (For example, how do you handle an exception thrown by your WebService?) On the other hand, this technique is not standardized across vendors, so you can't generate code from it (like you can with SOAP).

  7. #7
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    igorvin is on a distinguished road

      0  

    Default


    Great example - thanks a lot! Yes, full control of the data flow gives a good confidence in development and will prevent from blockages. There are two questions about your design though:

    1. How do you pass data from the client to the server? I don't see JSON deserialization, so i assume you don't send JSON objects in your request to the server. Is it possible? Btw, is it POST or GET request?
    2. When you generate JSONException, what HTTP error code you return to force extjs execute your "failure" function? I assume that's the idea - return exception in serialized JSON object to execute failure function on Ext.Ajax.request call... correct?

    Thanks again for detailed example - it helps a lot!

  8. #8
    Sencha User harley.333's Avatar
    Join Date
    Mar 2007
    Posts
    286
    Vote Rating
    4
    harley.333 is on a distinguished road

      0  

    Default


    1.
    So far, I've always used Ext to post data to the server (I haven't had to dip into the raw XMLHttpRequest object). And Ext uses POST (by default). In other words, the load method on Ext.data.Store and the submit method on Ext.form.BasicForm are used almost exclusively (this covers grids, trees, forms, etc).

    I've sent JSON objects to the server, and it's a pretty painless process. I construct the object in JavaScript, and add it to the parameters collection:
    Code:
      JavaScript :
    var a = [];
    a[a.length] = {FirstName: "Bob", LastName: "Smith"};
    a[a.length] = {FirstName: "Gary", LastName: "Johnson"};
    action.options.params.Users = Ext.encode(a);
    When the parameters reach the server:
    Code:
      C# :
    User[] a = JSONHelper.Deserialize<User[]>(Request.Form["Users"]);
    2.
    In C#, I catch Exceptions and copy the relevant properties to a custom serializable object. I then serialize this object to JSON. I return generic HTTP status codes of 200 (success) and 400 (failure). Ext also expects a success flag on the returned JSON object. So my resulting JSON object looks something like this:
    Code:
    {
        data: whatever,
        success: true,
        count: if returning a page of data
    }
    An exception looks something like this:
    Code:
    {
        errors: whatever,
        success: false
    }
    An HTTP status code outside the range of 200-299 will invoke Ext.data.Connection.handleFailure. I've overridden this function so my special flavor of exceptions can be handled in my special way.

  9. #9
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    igorvin is on a distinguished road

      0  

    Default


    At this point i have enough information to move forward . Thanks - i really appreciate your help!

Thread Participants: 3