Scribd Logo
Upload

Welcome to Scribd!

  • 15 views

    CH 1

    Uploaded by

    vraj patel
    The document provides an overview of AJAX (Asynchronous JavaScript and XML) including what it is, how it works, the technologies involved, and examples of its use. Specifically, it explains that AJAX allows for asynchronous data retrieval, sending requests without reloading the page for faster interactions. It describes how AJAX uses XMLHttpRequest objects and callbacks to exchange data between the client and server in the background. Finally, it covers advantages like faster pages and disadvantages like integration challenges.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CH 1

    Uploaded by

    vraj patel
    15 views36 pages
    The document provides an overview of AJAX (Asynchronous JavaScript and XML) including what it is, how it works, the technologies involved, and examples of its use. Specifically, it explains that AJAX allows for asynchronous data retrieval, sending requests without reloading the page for faster interactions. It describes how AJAX uses XMLHttpRequest objects and callbacks to exchange data between the client and server in the background. Finally, it covers advantages like faster pages and disadvantages like integration challenges.

    Original Description:

    Subject chapter 1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides an overview of AJAX (Asynchronous JavaScript and XML) including what it is, how it works, the technologies involved, and examples of its use. Specifically, it explains that AJAX allows for asynchronous data retrieval, sending requests without reloading the page for faster interactions. It describes how AJAX uses XMLHttpRequest objects and callbacks to exchange data between the client and server in the background. Finally, it covers advantages like faster pages and disadvantages like integration challenges.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    15 views36 pages

    CH 1

    Uploaded by

    vraj patel
    The document provides an overview of AJAX (Asynchronous JavaScript and XML) including what it is, how it works, the technologies involved, and examples of its use. Specifically, it explains that AJAX allows for asynchronous data retrieval, sending requests without reloading the page for faster interactions. It describes how AJAX uses XMLHttpRequest objects and callbacks to exchange data between the client and server in the background. Finally, it covers advantages like faster pages and disadvantages like integration challenges.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 36

    Advanced Web Technologies

    Chapter : 1
    AJAX
    submitted by:
    kinjal patni
    content
    WHAT IS AJAX?
    TECHNOLOGIES
    AJAX WORKS
    AJAX XMLHttpRequest
    AJAX - SEND A REQUEST To A SERVER
    AJAX - SERVER RESPONSE
    AJAX PHP
    AJAX DATABSE
    AJAX APPLICATION
    ADVANTAGES
    DISADVANTAGES
    CONCLUSIONS
    Motivation to use AJAX?
     AJAX stands for Asynchronous JavaScript And Xml.
     It is primarily used to fetch/send the data from the server to client without any
    page refresh.
     Also, since it only communicates small pieces of data (usually), it's super fast
    and lightweight.
    Real World Example of Ajax
     There are too many web applications running on the web that are using ajax
    technology like;
     Gmail
     Facebook
     Twitter
     Google
     Youtube
    Introduction to
    AJAX
    WHAT IS AJAX?
     Ajax stands for asynchronous JavaScript and XML.
     AJAX is not a programming language.
     It is a group of interrelated web development techniques used on the client-
    side to create interactive web applications .
     AJAX is a developer's dream, because you can:
    Update a web page without reloading the page(site)
    Request data from a server - after the page has loaded
    Receive data from a server - after the page has loaded
    Send data to a server - in the background
     Ajax uses a combination of HTML and CSS to mark up and style information
     Not a stand-alone language or technology.
     Combines a set of known technologies in order to create faster and more user
    friendly web pages.
     Client side technology.
     Makes web pages more responsive by exchanging small amounts of data.
     Allows the web page to change its content without refreshing the whole
    page.
     Web browser technology independent of web server software.
    technologies
     HTML or XHTML and CSS for presentation.
     The Document Object Model for dynamic display of and interaction with data.
     XML for the interchange of data.
     The XMLHttpRequest object for asynchronous communication.
     JavaScript to bring these technologies together.
    Features of Ajax
    Important Features of Ajax
     User Friendly
     It make web page faster.
     Independent of server technology.
     Increase the Performance of web page.
     Support for Live data binding
     Support for the Data View control
     Support for Client-side template rendering
     Rich and, responsive user interfaces
     Reduced consumption of server resources
    Features of Ajax
     No need to pushing on a submit button and reloading the complete website.
     No need to reload the whole page only some part of page is reloaded which is
    required to reload.
     Apart from obtaining the XMLHTTP object, all processing is same for all
    browser types, because JavaScript is used.
     Using ajax develop faster and more interactive web applications.
     Not require to completely reload page due to this server use less bandwidth.
    Working of AJAX
    How AJAX Works
    As you can see in the above example, XMLHttpRequest object plays a
    important role.
     User sends a request from the UI and a javascript call goes to
    XMLHttpRequest object.
     HTTP Request is sent to the server by XMLHttpRequest object.
     Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
     Data is retrieved.
     Server sends XML data or JSON data to the XMLHttpRequest callback
    function.
     HTML and CSS data is displayed on the browser.
    AJAX
    XMLHTTPrequest
    AJAX - The XMLHttpRequest Object
     All modern browsers support the XMLHttpRequest object.

     The XMLHttpRequest object can be used to exchange data with a server


    behind the scenes. This means that it is possible to update parts of a web
    page, without reloading the whole page.
    CREATE AN XMLHttpRequest Object
     All modern browsers (Chrome, Firefox, IE7+, Edge, Safari Opera) have
    a built-in XMLHttpRequest object.

    Syntax for creating an XMLHttpRequest object:


    Var variable = new XMLHttpRequest();

    Example
    var xhttp = new XMLHttpRequest();
    XMLHttpRequest Object METHODS
    Method Description
    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() Sends the request to the server
    Used for GET requests

    send(string) Sends the request to the server.


    Used for POST requests

    setRequestHeader() Adds a label/value pair to the header to be


    sent
    XMLHttpRequest Object pROPERTIES
    Property Description
    onreadystatechange Defines 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

    responseText Returns the response data as a string

    responseXML Returns the response data as XML data


    status Returns the status-number of a request
    200: "OK"
    403: "Forbidden"
    404: "Not Found"
    statusText Returns the status-text (e.g. "OK" or "Not
    Found")
    AJAX - Send
    a Request To a
    Server
    AJAX - Send a Request To a Server
     The XMLHttpRequest object is used to exchange data with a server.
     To send a request to a server, we use the open() and send() methods of the
    XMLHttpRequest object:

    xhttp.open("GET", "ajax_info.txt", true)


    xhttp.send();
    Method Description
    open(method, url, async) Specifies the type of request

    method: the type of request: GET or


    POST
    url: the server (file) location
    async: true (asynchronous) or false
    (synchronous)
    send() Sends the request to the server (used for
    GET)
    send(string) Sends the request to the server (used for
    POST)
    GET or POST?
     GET is simpler and faster than POST, and can be used in most cases.
    However, always use POST requests when:
     A cached file is not an option (update a file or database on the server).
     Sending a large amount of data to the server (POST has no size
    limitations).
     Sending user input (which can contain unknown characters), POST is
    more robust and secure than GET.
    GET
     GET Requests
     A simple GET request:

    Example

    xhttp.open("GET", " sybca_get.asp", true)


    xhttp.send();
    POST
     POST Requests
     A simple POST request:

    Example

    xhttp.open(“POST", " sybca_get.php", true)


    xhttp.send();
    Callback Function
     A callback function is a function passed as a parameter to another
    function.
     If you have more than one AJAX task in a website, you should create
    one function for executing the XMLHttpRequest object, and one
    callback function for each AJAX task.
     The function call should contain the URL and what function to call
    when the response is ready.
    AJAX – Server
    response
    AJAX Server RESPONSE
     The responseText Property is used when the response from the server is
    not XML, returns the response as a string.
     To get the response from a server, use the responseText or responseXML
    property.
    AJAX Server RESPONSE properties
    Property Description
    responseText get the response data as a string
    responseXML get the response data as XML data
    AJAX Server RESPONSE method
    Method Description
    getResponseHeader() Returns specific header information
    from the server resource
    getAllResponseHeaders() Returns all the header information
    from the server resource
    server side technology
     AJAX is used to create more interactive applications.
     There are many type of server side technology available like:
    1. PHP
    2. ASP
    AJAX database
     AJAX can be used for interactive communication with a database.
    advantages
     page can be refreshed dynamically
     response of the interface to user is faster
     load much faster because the payload is much smaller
     reduces the demand for bandwidth
     allows the web applications to be much more efficient
     operate more like an application rather than a standalone program
    disadvantages
     integration of browsers
     hard for the user to bookmark the state of the web page
    AJAX APPLICATION
     Login Forms
     Auto-Complete
     Voting and Rating
     Updating With User Content
     Form Submission & Validation
     Chat Rooms And Instant Messaging
     Lightboxes instead of pop-ups
     Using AJAX With Flash

    You might also like