2 Replies Latest reply on Oct 12, 2006 7:07 AM by 666705

    AJAX documentation

    666705
      Is there any documentation for using built in AJAX functionality in weblogic portal?
        • 1. Re: AJAX documentation
          666705
          Hi,

          For the WLP 9 we are going to provide several new features that use AJAX, including a AJAX portlet. For Tech Preview 2 you will be able to see more on how this is going to work. Tech Preview 1, was focus on GroupSpace. We should have some documentation covering this in Tech Preview 2, but the full docs won't be available until GA.

          On another note, we have several customers doing AJAX with WLP 8.1.x today. We are not doing anything that prevents you from deploying AJAX with portal.

          Regards,

          --alex                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
          • 2. Re: AJAX documentation
            666705
            What is Ajax?
            Ajax is java script technology which allows develop dynamic static web applications. The Ajax is browser dependent compound, creation of Ajax request will vary browser to browser. Ajax helps make more dynamic static web applications. Ajax dynamically changes the values of static pages with out refreshing.

            Web Applications
            Web applications works based on client and server communicate with each other. Web applications will execute on server side that resultant shows on client side. This communication with each other as request and response. The request carries all the information to the server, which has sent by client. The server gives back appropriate response to client, what for client requested server gives response for each client request. This process will continue unless until client stop the request.


            Ajax on Client side
            Ajax is a client side browser dependent component that creates client request object, carries client side information to server. Ajax processes the request as synchronies and asynchronies for past processing. XmlHttpRequest is (java script) Ajax request object, process request to server for response. The xmlHttpRequest can creation in different ways depends on browser. If the browser doesn’t supports the Ajax feature we can’t approach farther.

            Using constructor
            var xmlHttpRequest = new XMLHttpRequest();

            Using Microsoft Internet explorer
            var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

            Here the browser will provide activex object for request object creation. “Microsoft.XMLHTTP” is free defined activex objects witch supported by MS Internet explorer.

            Using other browsers
            var xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            Here "Msxml2.XMLHTTP” is free defined activex object witch supported by Netscape navigator browser.

            Note : The free defined key word will change browser to browser.


            XmlHttpRequest Prosperities and methods
            The xmlHttpRequest object support all the functionality, which is existed for establish communication between client and server. It means that client will pass information as request to server, in the same manner the Ajax xmlHttpRequest will do. For this the xmlHttpRequest has the following methods and properties.

            open() method The open method will submit all the information to specified url which existed on server side. This method has three parameters.
            Syntax: -- xmlHttpRequest.open ("GET", "/flight/reservation.jsp", true);


            1. Parameter (GET or POST, HEAD) how you want to submit your information to server. GET will submit small size of data, POST will submit much data. POST is the best practices for submit secured information or much data

            2. Parameter (URL) where you want to submit your request means server side file name or alias of the file. In this case
            "/flight/reservation.jsp. Note please verify url is existed or not.

            3. Parameter (true or false) represents the process type. There are two types of process synchronies and asynchronies. We will see this in next chapter. Time being you can use, as you like.

            onreadystatechange The ready state change property has very important role in Ajax. The request open () method will submit the client information, once submits to server need to process the request and gives success full response. All this process will take some time. Java script won’t wait for response, it execute continues line by line until completed function, we can’t change this. If this is the case we can’t process response to display dynamically. For this reason Ajax introduce onreadystatechange (event) property. If the response came from server immediately onreadystatechange will change. For the display information dynamically from server response onreadystatechange will call the call back method, which has assigned to this. Taking advantage we can finish up displaying process.



            Ex: -- xmlHttpRequest.open ("GET", "/flight/reservation.jsp", true);
            xmlHttpRequest.onreadystatechange=function() {
                 if (xmlHttpRequest.readyState==4) {
            alert(xmlHttpRequest.responseText)
            }
            }

            Here function() will execute, once “onreadystatechange” state has changed.


            readyState      represent the status of response. If response came from the server the readyState = 4.Based on the status user will understand server response came to client or not. If server given success full response then readyState=4, reset of other cases readyState value is 0 or 1 or 2 or 3.There different cases for example some time server shouldn’t respond immediately, It mite be busy with other client. But client shouldn’t wait much time with the same task. We can notify the task status-taking help of readyState.

            0 = uninitialized
            1 = loading
            2 = loaded
            3 = interactive
            4 = complete

            Status There a lot of difference between readyState and status. The readyState always represent response is ready or not. Once response is ready the status represent that response is valid or not. It means that some times we send request to not existed url. But server always give proper response which readyState=4.
            Here proper response came from server but that response not carried proper information, which for client requested. In this cases taking help of status we can find what is the error with response. If server giving success full response then the status=200, if server giving success full response for not existed url then status=404.It means that Ajax request submit url not existed on server side (We can understand that (url) file not found error).


            Ex -
            If (xmlHttpRequest.readyState==4) {
            if(xmlHttpRequest.status==200)
            alert("URL Exists! Proper Response came");
            else
            if(xmlHttpRequest.status==404)
            alert("URL doesn't exist!");
            else
            alert("Other Error Status is "+ xmlHttpRequest.status);
            }


            responseText This property gives resulting text which has response came from server. The responseText have all the information that client requested the server.

            Ex: --
            var xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open ("GET", "/flight/reservation.jsp?nooftickets=5&bookingtype=group", true);
                 xmlHttpRequest.onreadystatechange=function() {
                 If (xmlHttpRequest.readyState==4) {
                 if(xmlHttpRequest.status==200)
            alert("Your booking Successfully completed!! Booking referenced no "+ xmlHttpRequest.responseText);
            else
            if(xmlHttpRequest.status==404)
            alert("URL doesn't exist!");
            else
            alert("Other Error Status is "+ xmlHttpRequest.status);
            }
            } // function closed


            responseXML DOM-compatible document object of data returned.


            statusText String message associated with the status code.

            send() method This method provides to send additional data to server. The send method takes one text parameter, if you don’t like to send any additional text data just send null.

            Ex: --
            XmlHttpRequest.send(“<deposit><accno>1234</accno><deposit-amount>1000.00</ deposit-amount></deposit>”);

            Here the parameter carrying xml text data to the server.

            Ex: --
            XmlHttpRequest.send(null);

            Here the null parameter passing to server.


            Method      Description
            abort() Stops the current request
            getAllResponseHeaders()      Returns all headers (name and value) as a string
            getResponseHeader( Returns the value of the specified header"<headerName>")
            open("<method>", "URL"[,          Opens a connection and retrieves response from the specified URL.
            asyncFlag[, "<username>"[,        Can also specify optional values method (GET/POST), username and
            "<password>"]]]) password for secured sites
            send(content)      Transmits request (can include postable string or DOM object data)
            setRequestHeader           Assigns values to the specified header ("<name>", "<value>")