Thursday, January 11, 2018

Ajax Quick Tutorial


AJAX stands for Asynchronous JavaScript and XML. AJAX is not a programming language but a technique for creating interactive web applications. It sends and receives data from client browser to server(independent of server technology).

Significance

  • Though XML is the common format, Ajax supports other types like plain text, Json
  • It allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.


Limitations

  • AJAX has browser incompatibility 
  • For security reasons, modern browsers do not allow access across domains data


Workflow

  • Trigger (on page load, onclick, onchange, etc,.)
  • create XMLHttpRequest object in JavaScript
  • send a request to a web server
  • receive the response
  • process the response in JavaScript


3 Way to use Ajax

Direct Method

function loadDoc() {
  var xhttp = new XMLHttpRequest(); //create XMLHttpRequest object in JavaScript
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) //checking the status and read the data
{document.getElementById("result").innerHTML = this.responseText;}
  };
  xhttp.open("GET", "feed.xml", true); // get or post
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//to set header for content type or cookies
  xhttp.send("m=1&type=summary");//for get parameters can be passed
  xhttp.send();
}

-----------
Callback Method
onclick="loadDoc('ajax_info.txt', myFunction)"

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {cFunction(this);}
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("result").innerHTML = xhttp.responseText;
}

JQuery Method
add Jquery lib http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
<button id="readFile">Read File</button>
$(document).ready(function() {
    $("#readFile").click(function() {
        $.ajax({
            url : "http://macrolayer.blogspot.com/2016/03/waterways.html?m=1",
            dataType: "text",
            success : function (data) {
                alert(data.length);
                alert(data);
            }
        });
    });
});



MethodDescription
new XMLHttpRequest()Creates a new XMLHttpRequest object
abort()Cancels the current request
getAllResponseHeaders()Returns header information
getResponseHeader()Returns specific header information
open(method,url,async,user,psw)"Specifies the request
method: the request type GET or POST
url: the file location
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password"
send(optional string)Sends the request to the server. parameter is used for POST requests.
setRequestHeader()set the header content to be sent


PropertyDescription
onreadystatechangeDefines a function to be called when the readyState property changes
readyState"Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready"
responseTextReturns the response data as a string
responseXMLReturns the response data as XML data
status"Returns the status-number of a request 200: ""OK""
403: ""Forbidden""
404: ""Not Found"""
statusTextReturns the status-text (e.g. "OK" or "Not Found")




6 comments:

  1. Are you attending Blog, Please ?
    If so, having an AJAX API problem. Can it be said ?
    Regards

    ReplyDelete
  2. This is the said problem, please:

    A beautiful Gadget in my blogger blog which used AJAX, not working now. Worked awesome for years. Don't know why !
    Any help, to make it work, please ?
    Regard
    Link to ref blog page : https://ifindi.blogspot.com/p/related-comments.html
    Source of code from Blog : http://www.blogdoctor.me/2009/01/random-rotating-post-gadget-with.html#comment-form

    ReplyDelete
  3. Thanks To sharing blog Excellent information with us...
    sparkinfosys
    Sparkinfosys is one of the best company in hyderabad ,We provide Features of online Examination website designed and developed by Spark Infosys Hyderabad. Spark Infosys provides online exam portal development etc..

    ReplyDelete
  4. Hi Your Blog is very nice!!

    We are an mobile app Development company focusing on ios app development as also android app development. We are at the fore front of developing innovative and economical Mobile Apps. We test and integrate the applications across multiple platforms etc..

    ReplyDelete
  5. Hi Your Blog is very nice!!

    Best SEO Training in Hyderabad. We provide job oriented SEO training in Hyderabad. SEO Training, Digital Marketing Training in Hyderabad, SEO Training Institute etc..

    ReplyDelete
  6. To accomplish wellbeing and wellbeing then there must be the longing to make sure that you accomplish the status you are focusing on. This want that comes from inside Wellness Pitch assists make sure that the sensation of dread get to with being stifled to guarantee it doesn't divert you from accomplishing your objective.

    ReplyDelete

You Can use HTML code once it converted to NCcode by NCode converter