1. how to loading HTML/JSON/XML dataType via AJAX

As we know,we can dynamic loading the file via ajax,it is very convient for customer.

And,there are three kinds of dataType: JSON,XML,HTML. but the method to call file is different,here is themy demo.

This is my demo indx page.

this is code of the Index:

<html>
<body>
<h2>This is AJAX Example</h2>
<button type="button"  id="btn">post html file</button>
<button type="button" id="btn2">post json file </button>
<button type="button" id="btn3">post xml file</button>
    <br/>
    <br/>
<div id="myDiv">This is ajax result</div>
</body>
</html>

Note: Because I had use two kind of methods to call the AJAX,then hiddencode is equal to the $.ajax({}) function,it means you use the hidden code instead of the $.ajax({}) function.

2.Dynamic loading html file.

a.Create a html file to store some div,this will load in index page:

<div class="right">This is html</div>
<div>This is html number two</div>
<div>This is html number three</div>

b. add script code in head tag

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){

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

        $.ajax({
            url:"1.html",type: "get",dataType:"html",success: function (data) {
                $("#myDiv").load("1.html .right");
            }

        });

//$("#myDiv").load("1.html .right");                       
return false;
});

</head>

c. Run the index page and click the button named "post html file",here is the result:

2.Dynamic loading JSON file.

a. Create a json file extend name is 2.json

[ 
{ 
"name":"Tristan","number":"001" 
},{ 
"name":"Tristan2","number":"003" 
},{ 
"name":"Tristan3","number":"002" 
} 
]

b. Add click event to head

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

 /*
    $.getJSON("2.json",function(data) {
        var html = "";
        $.each(data,function(index,key) {
            html += "<div>" + key.name + "</div>";
            html += "<div>" + key.number + "</div>";
        });
        $("#myDiv2").append(html);
    });
    */
   
    $.ajax({
        url: "2.json",dataType:"json",success: function (data) {
         
            var html = "";
            $.each(data,function (index,key) {
                html += "<div>" + key.name + "</div>";
                html += "<div>" + key.number + "</div>";
            });
            $("#myDiv").append(html) ;
            
        }
    });
    
    return false;
});

c. Click the button named "psot json file" and get the result:

2.Dynamic loading XML file.

a. Create a xml file extend name 3.xml

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>

b. Addclick functionin head

$("#btn3").click(function () {
    
    $.ajax({
        url: "3.xml",dataType:"xml",success: function (data) {
            $(data).find("book").each(function () {
                html = "";
                html += "<div>" + $(this).find("title").text() + "</div>";
                $("#myDiv").append(html);
            });
        }

    });
  
/*
    $.get("3.xml",function (data) {
        $(data).find("book").each(function () {
            html = "";
            html +="<div>" +  $(this).find("title").text() + "</div>";
            $("#myDiv3").append(html);
        });

    })
   */
    return false;
});

c. The result:

2. here is the completed code:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){

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

        $.ajax({
            url:"1.html",success: function (data) {
                $("#myDiv").load("1.html .right");
            }

        });

//$("#myDiv").load("1.html .right");
return false;
});

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

 /*
    $.getJSON("2.json",key) {
                html += "<div>" + key.name + "</div>";
                html += "<div>" + key.number + "</div>";
            });
            $("#myDiv").append(html) ;
            
        }
    });
    
    return false;
});

$("#btn3").click(function () {
    
    $.ajax({
        url: "3.xml",success: function (data) {
            $(data).find("book").each(function () {
                html = "";
                html += "<div>" + $(this).find("title").text() + "</div>";
                $("#myDiv").append(html);
            });
        }

    });
    /*
    $.get("3.xml",function (data) {
        $(data).find("book").each(function () {
            html = "";
            html +="<div>" +  $(this).find("title").text() + "</div>";
            $("#myDiv3").append(html);
        });

    })
   */
    return false;
});

});

</script>
</head>
<body>
<h2>This is AJAX Example</h2>
<button type="button"  id="btn">post html file</button>
<button type="button" id="btn2">post json file </button>
<button type="button" id="btn3">post xml file</button>
    <br/>
    <br/>
<div id="myDiv">This is ajax result</div>
</body>
</html>

More to link: http://www.w3school.com.cn/ajax/index.asp

Introduce AJAX about how to dynamic loading HTML/JSON/XML dataType