Jquery Ajax Tutorial

Jquery Ajax Tutorial

in this tutorial we will see how to use AJAX and JQuery.
Well, many of you already know JQuery is a JavaScript library and
AJAX is Asynchronus JavaScript and XML.
Ajax is tecnique which let the browser comminicate with server asynchronusly without refreshing the page.
Inshort: It's a way to setup asynchronus comminication between client and server.
It allows you to load the data in background and display it on web page without refreshing it.
There are many websites like Gmail, Facebook, Youtube and hotmail uses AJAX techique.
Let's see how Jquery library comes into picture while using AJAX technique.

 

 

 

Jquery Ajax Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Ajax Tutorial</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>

        $("document").ready(function () {

            $("#button1").click(function () {

                $.ajax({

                    url: "htmlpage4.html",
                    success: function (result) {

                        $("#div1").html(result);

                    }

                });

            });

        });

    </script>
</head>
<body>
    <div id="div1" style="height: 500px; width: 500px">Dynamic content will be loaded here. </div>

    <input type="button" id="button1" value="Load content.">
</body>
</html>

Tags:

JQuery Ajax PostJquery CallBack TutorialBasics of jqueryLearning JqueryJQuery Animate Div Height and WidthJQuery SlideJquery Trim StringJQuery Select ChangeGoogle JQuery CDNHow to call function in JQueryAsp.net JQuery Calendar Control

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.