A simple Ajax based GET operation using jQuery

by Jagadish Pulakhandam on 10/19/2012 8:32:14 AM
Rated 0 from 0 votes
Brief: Demonstrates on fetching information using HTTP GET with jQuery AJAX and ASP.NET
Posted to: Ajax programming using JQuery - Tutorials/Videos
Add to DiggAdd to del.icio.usAdd to FURLAdd to RedditAdd to YahooAdd to BlinklistAdd to GoogleAdd to ma.gnoliaAdd to ShadowsAdd to Technorati

Attached source code/video demonstrates the following:
  • How to use jQuery AJAX ($.ajax) to fetch information using HTTP GET operation
  • How to get HTML of a web page using HTTP GET using jQuery
  • How to write (or render) html to IFRAME (or modify HTML in IFRAME) using jQuery
  • How to fetch HTML of an ASP.NET web page using HTTP GET using jQuery
Source Code:

Screenshot:



ASP.NET markup (default.aspx):

01.<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="SampleWebSite._default" %>
02. 
03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05.<head runat="server">
06.    <title></title>
07.</head>
08.<body>
09.    <form id="form1" runat="server">
10.    <div style="border: 1px solid blue">
11.        this is just a page from asp.net
12.    </div>
13.    </form>
14.</body>
15.</html>

jQuery (to fetch html from above page)

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03.<head>
04.    <title></title>
05.    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
06.    <script type="text/javascript">
07. 
08.        //gets web page content using GET operation (using ajax)
09.        function GetWebPageContent() {
10.            $.ajax({
11.                url: "/default.aspx",
12.                type: "GET", //type of request - default is GET - optional
13.                dataType: "html", //type of content expecting from response - default is auto find based on MIME type returned - optional
14.                cache: false //whether to cache the response of this request - default is true - optional
15.            }).success(function (data) {
16.                var ContentFrames = $("#ContentIframe");
17.                //get document object of IFRAME
18.                var doc = ContentFrames[0].contentWindow.document;
19.                //get body element of IFRAME
20.                var body = $('body', doc);
21.                //modify HTML content of IFRAME
22.                body.html(data);
23.                ContentFrames.css("display", "inline");
24.            });
25.        }
26. 
27.    </script>
28.</head>
29.<body>
30.    <input type="button" value="Show News" onclick="GetWebPageContent();" /><br>
31.    <iframe id="ContentIframe" style="display:none">
32.    </iframe>
33.</body>
34.</html>




Rated 0 from 0 votes ( login  to rate)
DotnetKicks DotnetKicksDe DotNetShoutout

Attachments / Source Code
You need to Login or Join for FREE to download the following


Discussion
No comments yet!