AJAX asynchronous JavaScript and XML ajax is technique for creating fast and dynamic web pages when we use ajax suddleny load content using ajax without refresh How to work ajax xmlhttpReq pc request======> server | <========respone test file JSON data XML data STATUS responseText or ResponseXML (readyState) 200:"ok" 403:"forbidden" 404:"Not found" 5 steps 0:request not initialized 1:server connection established 2:request received 3:processing request 4:request finished and respone is ready javascrits ajax SYNTAX var xhttp=new XMLHttpRequest(); xhttp.onreadystatechange=function(){ if(this.readyState==4 && this.status==200){ document.getElementById("demo").innerHTML=this.responseText } } xhttp.open("GET",filename.txt,true); xhttp.send(); //true for asynchronous //false for synchronous with the help of XMLHttpRequest() method we read the txt file ajax.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax </title> </head> <body> <p id="demo"> Here We load</p> <button onclick="loadData()">Click</button> <script> function loadData(){ var xhttp=new XMLHttpRequest(); xhttp.onreadystatechange=function(){ if(this.readyState==4 && this.status==200){ // console.log(this.responseText); document.getElementById("demo").innerHTML=this.responseText; } }; xhttp.open('GET',"/content/readme.txt",true)//true for asynchronous xhttp.send(); } </script> </body> </html> create.content/reame.txt //API with ajax step 1 copy cdn <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> step 2 json placeholder for fake data go recourse post copy url:https://jsonplaceholder.typicode.com/posts with the help of ajax method we read the txt file ajax-api.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>api ajax</title> </head> <body> <p id="demo"> Here We load</p> <button onclick="loadData()">Click</button> <script> function loadData(){ var xhttp=new XMLHttpRequest(); xhttp.onreadystatechange=function(){ if(this.readyState==4 && this.status==200){ // console.log(this.responseText); document.getElementById("demo").innerHTML=this.responseText; } }; xhttp.open('GET',"https://jsonplaceholder.typicode.com/posts",true)//true for asynchronous xhttp.send(); } </script> </body> </html> javascrits fetch method?? method 1 AJAX jquery $.ajax() $.get() $.post() method 2 javascrits XMLHttpRequest method 3 ES6 fetch() insert update read delete FETCH() SYNTAX fetch(); fetch(file/url) ----->(return) promise fetch(file/url).then()---->promise(return) fetch(file/url).then(function(response){ return respone.data //notest data return json() or text() }); fetch(file/url).then(function(response){ return respone.data; }).then(function(result){ console.log(result) }).catch(function(error){ console.log(error); }) 2.with the help of fetch method we read the txt file case 1 fetch("/content/readme.txt") // .then(function(response){ .then((response)=>{ // console.log(response) //console.log(response.text()) return (response.text()) }); output /*Promise[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): "Promise"[[Prototype]]: Object[[PromiseState]]: "fulfilled"[[PromiseResult]]: "Hello This text files" */ write in short //short return fetch("/content/readme.txt") .then((response)=>response.text()) .then((data)=>document.write(data)); // output:Hello This text files case 3 fetch from fake data // fetching data from url fetch("https://jsonplaceholder.typicode.com/posts/20") .then((response)=>response.json()) .then((data)=> console.log(data)); .catch((error)=>console.log(error)) //for error // output:showing 10 data form fake placeholder // fetch data using for in loop fetch("https://jsonplaceholder.typicode.com/users") .then((response)=>response.json()) .then((data)=> { // console.log(data) for(var x in data){ // document.write( x); // document.write( data[x]); // object // document.write( `${data[x].name }<br>`); // object value name document.write( `${data[x].name } - ${data[x].email} -<>${data[x].phone}<br>`); } }) .catch((error)=>console.log("can't fetch data")) 4.json file fetch in broswer' fetch("/json/student_data.json") .then((response)=>response.json()) .then((data)=> { // console.log(data) for(var x in data){ // document.write( x); document.write( `${data[x].name } -- ${data[x].age} --${data[x].city}<br>`); } }) .catch((error)=>console.log("can't fetch data")) 5. fetch():Insert,Update,delete,get fetch(file/URL,{ method:"POST",-->put,delete,Get body:data ---->form Data/JSON Data /Text header:{ 'Content-Type''application/json', //for json data //'Content-Type''application/x-www-form-urlencoded', //for form data }, }); Type 1 insert use php,python,js,laravel,nodejs But here using jsonplaceholder recources->guide ->copy which is need creating ,reading,fetch https://jsonplaceholder.typicode.com/guide/ json.stringify :this function work js object convert in json fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1, }), headers: { 'Content-type': 'application/json;', },}) .then((response) => response.json()) .then((json) => console.log(json)); // form click insert fake data <form id="myForm"> Title<input type="text" id="titleText"><br><br> Body<input type="text" id="bodyText"><br><br> user ID<input type="text" id="userid"><br><br> <input type="submit" id="saveForm"> </form> <script> document.getElementById("saveForm").addEventListener("click",function(e){ e.preventDefault(); var obj={ title: document.getElementById("titleText").value, body : document.getElementById("bodyText").value, userId :document.getElementById("userid").value, }; fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify(obj), headers: { 'Content-type': 'application/json; charset=UTF-8', }, }) .then((response) => response.json()) .then((json) => console.log(json)); })
June-06-2025 21:23:08
June-06-2025 11:35:05
June-06-2025 08:25:42
June-02-2025 21:09:41
June-02-2025 10:56:22
June-02-2025 10:27:58
June-02-2025 10:15:40
May-30-2025 19:20:40
May-30-2025 19:14:29
May-27-2025 21:52:18
May-27-2025 21:33:30
May-26-2025 17:11:41
May-26-2025 16:53:29
May-26-2025 16:50:59
May-13-2025 21:02:32
May-13-2025 17:46:23
May-12-2025 15:41:29