{"id":9782,"date":"2020-02-01T09:59:47","date_gmt":"2020-02-01T09:59:47","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=9782"},"modified":"2020-02-01T10:02:05","modified_gmt":"2020-02-01T10:02:05","slug":"ajax-crash-course","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/ajax-crash-course\/","title":{"rendered":"AJAX Crash Course"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">What is AJAX ?<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Asynchronous Javascript &amp; XML<\/li><li>Set of web technologies<\/li><li>Send &amp; receive data asynchronously<\/li><li>Does not interfere with current web page<\/li><li>JSON has replaced XML for the most part<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Why XmlHttpRequest (XHR) Object is Used ?<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>API in the form of an object<\/li><li>Provided by the browser&#8217;s JS environment<\/li><li>Methods transfer data between client\/server<\/li><li>Can be used with other protocols than HTTP<\/li><li>Can work with data other than XML (JSON, plain text)<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">How to retrieve data from sample.txt files through AJAX?<\/h4>\n\n\n\n<p>First of all, you should create an <strong>ajax1.html<\/strong> and one <strong>sample.txt<\/strong> file. then copy and paste the below codes to view the result. for below code testing. place the file in htdocs folder of xampp and open URL like this:  <em>http:\/\/localhost\/ajax\/ajax1.html<\/em> <\/p>\n\n\n\n<p><strong>ajax1.html<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/fe3c28b265f202504b0380f88db6511b.js\"><\/script>\n\n\n\n<p><strong>sample.txt<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/8a03ae6f97b145a0350b8143d2870bf4.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">How to retrieve data from json files through AJAX?<\/h4>\n\n\n\n<p>there are some example code for this. so you can check out below:<\/p>\n\n\n\n<p><strong>ajax2.html<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/3555b6b26af811c45d89e7757e397629.js\"><\/script>\n\n\n\n<p><strong>users.json<\/strong> <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/240c4757bdc43bbaf87edee8539b3408.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">How to retrieve data from external API through AJAX?<\/h4>\n\n\n\n<p>please look the codes of <strong>ajax3.html<\/strong> and url of external source i.e : <em>https:\/\/api.github.com\/users<\/em><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/ae5e07d449adfc5b6d841af3e326a796.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">How to retrieve data from database through AJAX?<\/h4>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/3aca3385237f343899d4337ead8b440e.js\"><\/script>\n\n\n\n<p><strong>users.php<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/c399dd33e5ff904b073669297b3bfebb.js\"><\/script>\n\n\n\n<p>there are 4 examples explained above for retrieving data from different locations by the help of Ajax. so this example are very easy to understand and apply it to your project easily. so if you hava any confusion then watch this video: <a rel=\"noreferrer noopener\" aria-label=\"Link (opens in a new tab)\" href=\"https:\/\/www.youtube.com\/watch?v=82hnvUYY6QA\" target=\"_blank\">Link<\/a> .<\/p>\n\n\n\n<p>Thanks for supporting us. if you like this blog then share with your friends.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is AJAX ? Asynchronous Javascript &amp; XML Set of web technologies Send &amp; receive data asynchronously Does not interfere with current web page JSON has replaced XML for the most part Why XmlHttpRequest (XHR) Object is Used ? API in the form of an object Provided by the browser&#8217;s JS environment Methods transfer data&#8230;<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5691],"tags":[5838,1056,5223,5345,524],"class_list":["post-9782","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-ajax","tag-api","tag-json","tag-text","tag-xml"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/9782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=9782"}],"version-history":[{"count":6,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/9782\/revisions"}],"predecessor-version":[{"id":9856,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/9782\/revisions\/9856"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=9782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=9782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=9782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}