AJAXAsynchronous JavaScript and XML       Ahmed farag mostafa
What is Ajax ?• an acronym for Asynchronous JavaScript and XML is a group of  interrelated web development techniques used...
Technologies• HTML (or XHTML) and CSS for presentation• The Document Object Model (DOM) for  dynamic display of and intera...
Examples of applications using AJAX:• Google Maps, Gmail, Youtube, and Facebook  tabs.
How AJAX Works
AJAX app and classic web
AJAX app and classic web
Ajax•   create The XMLHttpRequest Object   variable=new XMLHttpRequest();• Send a Request To a Server  - get requestxmlhtt...
• Server Responsedocument.getElementById("myDiv").innerHTML=xmlhttp.responseText;
The onreadystatechange Event•   xmlhttp.onreadystatechange=function()     {     if (xmlhttp.readyState==4 && xmlhttp.statu...
Questions?
Thanks ^_^
Upcoming SlideShare
Loading in...5
×

Ajax

593

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • good subject
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
593
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
28
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • مكونات الاجاكس1- XML HTTP REQUEST وهي المسئولة عن الاتصال بالسيرفر JAVA SCRIPT -2 وهي المسئولة عن عرض العناصر بالصفحات وتتفاعل مع المستخدم XML -3 وهي عبارة عن وسيط بين السيرفر وصفحات HTMLCSS -4وهي تقوم بتسيق الصفحات
  • open(method,url,async) Specifies the type of request, the URL, and if the request should be handled asynchronously or not.method: the type of request: GET or POSTurl: the location of the file on the serverasync: true (asynchronous) or false (synchronous)send(string)Sends the request off to the server.string: Only used for POST requestsA 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
  • Ajax

    1. 1. AJAXAsynchronous JavaScript and XML Ahmed farag mostafa
    2. 2. What is Ajax ?• an acronym for Asynchronous JavaScript and XML is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not needed (JSON is often used instead), and the requests do not need to be asynchronous.• Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.
    3. 3. Technologies• HTML (or XHTML) and CSS for presentation• The Document Object Model (DOM) 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
    4. 4. Examples of applications using AJAX:• Google Maps, Gmail, Youtube, and Facebook tabs.
    5. 5. How AJAX Works
    6. 6. AJAX app and classic web
    7. 7. AJAX app and classic web
    8. 8. Ajax• create The XMLHttpRequest Object variable=new XMLHttpRequest();• Send a Request To a Server - get requestxmlhttp.open("GET","demo_get2.asp?fname=ahmed&lname=farag",tr ue); xmlhttp.send();- post requestxmlhttp.open("POST","demo_post.asp",true);xmlhttp.send("fname=ahmed&lname=farag");
    9. 9. • Server Responsedocument.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    10. 10. The onreadystatechange Event• xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
    11. 11. Questions?
    12. 12. Thanks ^_^
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×