jQuery无法加载Ajax

Question

I am a bit new and trying to load text in a local text file using ajax through "XAMPP" requests, by jquery. I am doing everything correct, but still ajax data not loading from text-file to my div. Can anyone tell me why, as I am doing everything right. Here, goes snippet:

Jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"/>
<script>
    $(document).ready(function(){ 
        $("#but1").click(function() {
            $("#div1").load("ajaxfile.txt");
        }); 
    });
</script>

CSS

*{
     margin:0px;
    padding:0px;
}
div{
    background:yellow;
    padding:30px;
    border:2px solid black;
    margin:20px;
}

Html

<button id=but1>One</button>
<div id=div1> 
   This is div:
</div> 

I can do it with javaScript, but, I want to do it with jQuery and by loading data from external txt file only. Also, if you may tell me, what changes will I make to load it with JSON format, and XML file format. Thank you dear!

@spirulence: Dear, for your request, I am posting the file which worked by 'javascript xmlhttp' rather than the 'jquery' method.

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxfile.txt",true);
xmlhttp.send();
}
</script>

Answer 1

If you are looking at downloading json then I recommend you to us:

$.getJSON( "ajax/test.json", function( data ) {

  });

For different content types, you can use $.get() and specify content types.

Also, make sure that the path is relative and attached to the same domain otherwise you will face CORS issues.

If you are getting 404 then you got to check that the file exists on server and your IIS Pool(whichever) user has rights to access the same.