Thursday, November 8, 2012

jQuery Post XML Response Example

The jQuery Post() ajax method supports HTML, XML, JSON and Text type responses sent by the server. In this post we shall see on how to process XML data returned from the server using the jQuery Post() method.

The syntax for receiving and processing XML response is as follows.

$.post("<Server URL>",<POST parameters>, successHandlerFunction(…));

The following example receives a XML format data from the server and displays the data in a DIV tag in the browser.

.aspx Page (Client Side)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery Ajax Load</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script
        type="text/javascript"
        language="javascript">
        $(document).ready(function() {
            // Get XML Response data from the Server
            $('#btnGetXML').click(function(event) {
                event.preventDefault();
                var nameList = "";
                $.post("AjaxData.aspx", { ID: "1" }, function(result) {
                    $(result).find("Name").each(function() {
                        nameList = nameList + $(this).text() + "
"
;
                    });
                    $("#divXML").html(nameList);
                }
                );
            });
        });
    </script>                 
</head>
<body>
    <form id="frmAjax" runat="server">
    <table border="1">
        <tr>
            <td><b>Action</b></td>
            <td><b>Response</b></td>
        </tr>
            <tr valign="middle">
                <td>
                    <asp:Button
                        ID="btnGetXML"
                        runat="server"
                        Text="Get XML" />
                </td>
                <td align="center">
                    <br /><div id="divXML"></div> 
                </td>
            </tr>
           
    </table>
    </form>
</body>
</html>

.AjaxData.aspx.cs(Server Side)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;

namespace jQuery
{
    public partial class AjaxData : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if ((Request.Form != null)&&(Request.Form.Count > 0))
            {
                // Process HTTP POST Request
                string strFilterID = Request.Form["ID"].ToString();
                List<clsContacts> lstContacts = getContactByID(strFilterID);
                Response.Write(buildXML(lstContacts));
            }
        }
        //
        private List<clsContacts> getContactList()
        {
            List<clsContacts> lstContacts = new List<clsContacts>();
            lstContacts.Add(new clsContacts("1","John", "34"));
            lstContacts.Add(new clsContacts("2", "David", "24"));
            return lstContacts;
        }
        //
        private List<clsContacts> getContactByID(string filterKey)
        {
            List<clsContacts> lstContacts = new List<clsContacts>();
            lstContacts.Add(new clsContacts("1", "John", "34"));
            lstContacts.Add(new clsContacts("2", "David", "24"));
            //
            var filteredContacts = from c in lstContacts
                                   where c.ID.Equals(filterKey)
                                    select c;
            //
            return filteredContacts.ToList();
        }
        //
        private string buildXML(List<clsContacts> lstContacts)
        {
            XElement contactsXML = new XElement("Contacts");
            //
            foreach (clsContacts objContact in lstContacts)
            {
                contactsXML.Add(
                    new XElement("Contact",
                        new XElement("Name", objContact.Name),
                        new XElement("Age", objContact.Age)
                    )
                );
            }
            return contactsXML.ToString();
        }
        //
        private string buildHTML(List<clsContacts> lstContacts)
        {
            string strHTML = ""
;
            strHTML += "
Name
Age
";
            XElement contactsXML = new XElement("Contacts");
            //
            foreach (clsContacts objContact in lstContacts)
            {
                strHTML += "
"
+ objContact.Name + "


" + objContact.Age + "";
            }
            return strHTML;
        }
    }
    //
    public class clsContacts
    {
        public string _id;
        public string _name;
        public string _age;
        //
        public clsContacts(string strID, string strname, string strAge)
        {
            this._id = strID;
            this._name = strname;
            this._age = strAge;
        }
        //
        public string ID
        {
            get { return _id; }
            set { _id = value; }
        }
        //
        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }
        //
        public string Age
        {
            get { return _age; }
            set { _age = value; }
        }
    }

Search Flipkart Products:
Flipkart.com

No comments: