<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
<style>
div{
width:500px;
height: 100px;
border: solid 1pt burlywood;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h1>AJAX JQUERY</h1>
<h2>Load Text using AJAX without Jquery</h2>
<button onclick="loadDoc()">Change content</button>
<div id="loadtxt"></div>
<script>
function loadDoc(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
document.getElementById("loadtxt").innerHTML=this.responseText;
}
};
xhr.open("GET","content.txt",true);
xhr.send();
}
</script>
<h2>Load Text using AJAX with Jquery</h2>
<button id="btnload">Change content using jquery</button>
<div id="loadjqtxt"></div>
<script>
$("#btnload").click(function(){
$.ajax({url:"content.txt" ,success:function(result){
$("#loadjqtxt").html(result);
}});
});
</script>
<h2>Get JSON in jquery</h2>
<button id="btngetjson">get json content</button>
<div id="studentinfo"></div>
<script>
$("#btngetjson").click(function(){
$.getJSON("student.json", function(result){
$("#studentinfo").html("USN: "+ result.usn);
$("#studentinfo").append("<br> Name: "+ result.name);
$("#studentinfo").append("<br> Dept: "+ result.dept);
});
});
</script>
<h2>Parse JSON in jquery</h2>
<button id="btnparsejson">parse json content</button>
<div id="courseinfo"></div>
<script>
$("#btnparsejson").click(function(){
let txt='{"cname":"Web tech", "code":"BCSL504"}'
let obj=jQuery.parseJSON(txt);
$("#courseinfo").html("name: "+obj.cname);
$("#courseinfo").append("<br> code: "+obj.code);
});
</script>
</body>
</html>