Aj AX Asynchronous Java Script and XML Ajax
![Exemplu cu un program PHP <? php // array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella";](https://slidetodoc.com/presentation_image/3d4586b91a4f7db57815b6c5cdd76d1c/image-38.jpg "Exemplu cu un program PHP <? php // array with names $a[]=\"Anna\"; $a[]=\"Brittany\"; $a[]=\"Cinderella\";")
![<? php //get the q parameter from URL $q=$_GET["q"]; getrss. php //find out which](https://slidetodoc.com/presentation_image/3d4586b91a4f7db57815b6c5cdd76d1c/image-47.jpg "<? php //get the q parameter from URL $q=$_GET[\"q\"]; getrss. php //find out which")
- Slides: 50
Aj. AX Asynchronous Java. Script and XML
Ajax nu este o tehnologie, este un ansamblu de tehnologii: n n n HTML sau XHTML pentru structurarea informațiilor; CSS pentru prezentarea informațiilor; Javascript pentru interactivitate și pentru procesarea informațiilor prezentate; Obiectul XMLHttp. Request pentru schimbul și manipularea informațiilor într-o manieră asincronă cu server-ul web; XML este folosit de obicei pentru transferarea datelor între server și client, deși orice format funcționează, inclusiv HTML preformatat, text simplu etc.
Ajax nu este o tehnologie, este un ansamblu de tehnologii:
Ideea de bază AJAX este folosit pentru reînnoirea conţinutului paginilor web asinhronă prin schimbarea doar unui fragment al paginii fără reîncarcarea paginii completă. În procesul reînnoirii fragmentului al paginii se efectuiază schimb de informaţie între browser şi server.
Principiu de bază Aj. AX B r o w s e r Server XML Web-page Javascript Script fragment
Java. Script 1 eveniment reacţionează la un eveniment schimbă un fragment din pagină <html> <head> <script type="text/javascript"> function Executarea() {. . script. . . } </script> </head> <body> Oarecare text Click here <div id="my. Div"><h 2>Oarecare text</h 2></div> <button type="button" onclick=" Executarea()">Click here </button> </body> </html>
Java. Script reacţionează la un eveniment schimbă un fragment din pagină 1 eveniment Oarecare text <html> Click here <head> <script type="text/javascript"> function Executarea() { document. get. Element. By. Id("my. Div"). inner. HTML=“Alt text”; } </script> </head> <body> <div id="my. Div"><h 2>Oarecare text</h 2></div> <button type="button" onclick=" Executarea()">Click here </button> </body> </html>
Java. Script creează XMLHttp. Request object 2 obiect <head> <script type="text/javascript"> function Executarea() { var xmlhttp; // se declara o variabila noua if (window. XMLHttp. Request) // se verifica daca exista obiectul {// code for Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); // se creaza un obiect XMLHttp. Request } else {// code for IE xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } // se creaza un obiect Active. XObject. . script. . . } </script> </head>
Java. Script trimite request la server function load. Text() { var xmlhttp; if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } // se trimite request la server xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send(); } 3 trimite
Java. Script trimite request la server 3 trimite // exemplu xmlhttp. open("GET", "demo_get 2. asp? fname=Andrei&lname= Frunza", true); xmlhttp. send(); // alt exemplu xmlhttp. open("POST", "demo_post. asp", true); xmlhttp. send();
Java. Script trimite request la server function load. Text() { var xmlhttp; if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } // se trimite request la server xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send(); } 3 trimite
ajax_info. txt AJAX va saluta! 4 server
Aj. AX Server Response processing 5 callback xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("my. Div"). inner. HTML =xmlhttp. response. Text; } } // dacă în request e fişierul textual
Aj. AX Server Response (XML) xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { xml. Doc=xmlhttp. response. XML; txt=""; x=xml. Doc. get. Elements. By. Tag. Name("ARTIST"); for (i=0; i<x. length; i++) { txt=txt + x[i]. child. Nodes[0]. node. Value + " "; } document. get. Element. By. Id("my. Div"). inner. HTML=txt; } } 6 DOM
Aj. AX Server Response (XML) <? xml version="1. 0" encoding="ISO-8859 -1" ? > -<CATALOG> -<CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10. 90</PRICE> <YEAR>1985</YEAR> </CD> -<CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9. 90</PRICE> <YEAR>1988</YEAR> 4 server
Aj. AX Server Response 1 eveniment <body> <h 2>My CD Collection: </h 2> <div id="my. Div"></div> <button type="button" onclick="load. XMLDoc()">Get my CD collection</button> </body>
Aj. AX Server Response Rezultat: My CD Collection: Bob Dylan Bonnie Tyler Dolly Parton Gary Moore Eros Ramazzotti Bee Gees. . . 6 DOM
Aj. AX onreadystatechange event 5 callback Proprietatea onreadystatechange specifică funcţia care va fi apelată fiecare data cînd se schimbă proprietatea ready. State xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) {. . . } }
Aj. AX onreadystatechange event 5 callback Proprietatea ready. State: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready
Aj. AX onreadystatechange event 5 callback xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) {. . . } } Proprietatea status – codul standard statusului HTTP: 200: "OK" 404: Page not found
Shema generală de lucru cu obiectul XMLHttp. Request n n Crearea exemplarului obiectului XMLHttp. Request. Setarea de tratare a evenimentelor onreadystatechange. Conectarea cu server prin open. Trimiterea interogării prin send.
5 callback <html> <head> Exemplu cu fisier textual <script type="text/javascript"> function load. XMLDoc() { var xmlhttp; if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); 2 } object else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } 6 xmlhttp. onreadystatechange=function() DOM { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("my. Div"). inner. HTML=xmlhttp. response. Text; } } xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send(); 3 } trimite </script> </head>
Exemplu cu fisier textual <body> <div id="my. Div"><h 2>Textul acesta va fi schimbat</h 2></div> <button type="button" onclick="load. XMLDoc()">Change Content</button> </body> </html> 1 eveniment
Exemplu cu fisier XML <html> <head> <script type="text/javascript"> function load. XMLDoc(url) { var xmlhttp; if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } 2 object
Exemplu cu fisier XML xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { 5 document. get. Element. By. Id('A 1'). inner. HTML=xmlhttp. status; callback document. get. Element. By. Id('A 2'). inner. HTML=xmlhttp. status. Text; document. get. Element. By. Id('A 3'). inner. HTML=xmlhttp. response. Text; } } 6 xmlhttp. open("GET", url, true); DOM xmlhttp. send(); } 3 </script> trimite </head>
Exemplu cu fisier XML <body> <h 2>Retrieve data from XML file</h 2> <p><b>Status: </b><span id="A 1"></span></p> <p><b>Status text: </b><span id="A 2"></span></p> <p><b>Response: </b><span id="A 3"></span></p> <button onclick="load. XMLDoc('note. xml')">Get XML data</button> </body> </html> 1 eveniment
Exemplu cu fisier XML <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> 4 server
Exemplu cu fisier XML HTML fişier: Retrieve data from XML file Status: Status text: Response: Get XML data 1 event
Exemplu cu fisier XML După apasarea butonului: 6 DOM Retrieve data from XML file Status: 200 Status text: OK Response: Tove Jani Reminder Don't forget me this weekend! Get XML data
Proprietăţile obiectului XMLHttp. Request: n n n ready. State – status (gata sau nu) response. Text – textul transmis response. XML – obiect XML transmis status – HTTP status standard status. Text – text ce descrie status (ok sau not found)
Metodele obiectului XMLHttp. Request: n n n open(<method>, <URL> [, <async. Flag>[, <user. Name>[, <password>]]]) – conectarea cu server; send(<content>) – trimiterea interogării (pentru metoda GET – sring vid); set. Request. Header(<label>, <value>) – setarea header-ului interogării; get. Response. Header(<header. Label>) – obţinerea valorii elementului header-ului; get. All. Response. Headers( ) – obţinerea tuturor valorilor elementelor header-ului; abort( ) – întrerupe interogarea curentă.
Exemplu cu un program PHP <html> <head> <script type="text/javascript"> function show. Hint(str) { var xmlhttp; if (str. length==0) { document. get. Element. By. Id("txt. Hint"). inner. HTML=""; return; } if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); }
Exemplu cu un program PHP <html> <head> <script type="text/javascript"> function show. Hint(str) { var xmlhttp; if (str. length==0) { document. get. Element. By. Id("txt. Hint"). inner. HTML=""; return; } if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } 2 object
Exemplu cu un program PHP xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("txt. Hint"). inner. HTML=xmlhttp. response. Text; } } xmlhttp. open("GET", "ajax_info. php? q="+str, true); xmlhttp. send(); } </script> </head>
Exemplu cu un program PHP 5 xmlhttp. onreadystatechange=function() callback { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("txt. Hint"). inner. HTML=xmlhttp. response. Text; } } 6 xmlhttp. open("GET", "ajax_info. php? q="+str, true); DOM xmlhttp. send(); } </script> 3 </head> send
Exemplu cu un program PHP <body> <h 3>Start typing a name in the input field below: </h 3> <form action=""> First name: <input type="text" id="txt 1" onkeyup="show. Hint(this. value)" /> </form> <p>Suggestions: <span id="txt. Hint"></span></p> </body> </html>
Exemplu cu un program PHP <body> <h 3>Start typing a name in the input field below: </h 3> <form action=""> 1 First name: <input type="text" id="txt 1" event onkeyup="show. Hint(this. value)" /> </form> <p>Suggestions: <span id="txt. Hint"></span></p> </body> </html>
Exemplu cu un program PHP <? php // array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; . . . //get the q parameter from URL $q=$_GET["q"]; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; 4 server for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a [$i], 0, strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint. " , ". $a[$i]; } }
Exemplu cu un program PHP // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ? > 4 server
Exemplu cu un program PHP
Dacă Java. Script este blocat if(window. XMLHttp. Request){ xml. Obj = new XMLHttp. Request(); } else if(window. Active. XObject){ xml. Obj = new Active. XObject("Microsoft. XMLHTTP"); } else { return; }. . . <a href="data. xml" title=“Vizualizarea conţinutului fişierului XML" onclick="ajax. Read('data. xml'); return false">
Avantajele Aj. AX n n n AJAX este independent de browser şi platforma utilizată; AJAX este bazat pe standardele internet AJAX micşorează volumul datelor transferate AJAX micşorează volumul de lucru efectuat de server AJAX măreşte viteza de reînnoire a datelor pe pagina web
Neajunsurile Aj. AX n n n Nu este integrat cu instrumentele browserului Datele adăugate pe pagină nu sunt accesibile pentru sisteme de cautare Contoare de accesare a paginilor nu sunt valide Creşterea complexităţii sitului Se presupune Java. Script enabled
Aplicaţii ce utilizează AJAX: n n Google Maps Gmail Youtube Facebook tabs
Mai multe exemple n n n n http: //test 1. ru/ajax. html http: //test 1. ru/ajax_3. html http: //test 1. ru/ajax_4. html http: //localhost/ajax_5_u. html http: //localhost/index_idsi. html http: //test 1. ru/ajax_rss. html http: //htmlweb. ru/ajax/example/
Obţinerea RSS xmlhttp. onreadystatechange=function() { ajax_rss. html if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("rss. Output"). inner. HTML=xmlhttp. respon se. Text; } } xmlhttp. open("GET", "getrss. php? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form> <select onchange="show. RSS(this. value)"> <option value="">Select an RSS-feed: </option> <option value="Google">Google News</option> <option value="MSNBC">MSNBC News</option> </select> </form> <div id="rss. Output">RSS-feed will be listed here. . . </div> </body> </html>
<? php //get the q parameter from URL $q=$_GET["q"]; getrss. php //find out which feed was selected if($q=="Google") { $xml=("http: //news. google. com/news? ned=us&topic= h&output=rss"); } elseif($q=="MSNBC") { $xml=("http: //rss. msnbc. msn. com/id/3032091/device/r ss/rss. xml"); } $xml. Doc = new DOMDocument(); $xml. Doc->load($xml);
getrss. php (continuare) //get elements from "<channel>" $channel=$xml. Doc->get. Elements. By. Tag. Name('channel')>item(0); $channel_title = $channel->get. Elements. By. Tag. Name('title') ->item(0)->child. Nodes->item(0)->node. Value; $channel_link = $channel->get. Elements. By. Tag. Name('link') ->item(0)->child. Nodes->item(0)->node. Value; $channel_desc = $channel>get. Elements. By. Tag. Name('description') ->item(0)->child. Nodes->item(0)->node. Value; //output elements from "<channel>" echo("<p><a href='". $channel_link. "'>". $channel_title. "</a>"); echo(" "); echo($channel_desc. "</p>");
getrss. php (continuare) //get and output "<item>" elements $x=$xml. Doc->get. Elements. By. Tag. Name('item'); for ($i=0; $i<=2; $i++) { $item_title=$x->item($i)->get. Elements. By. Tag. Name('title') ->item(0)->child. Nodes->item(0)->node. Value; $item_link=$x->item($i)->get. Elements. By. Tag. Name('link') ->item(0)->child. Nodes->item(0)->node. Value; $item_desc=$x->item($i)>get. Elements. By. Tag. Name('description') ->item(0)->child. Nodes->item(0)->node. Value; echo ("<p><a href='". $item_link. "'>". $item_title. "</a>"); echo (" "); echo ($item_desc. "</p>"); }
Rezultat
Ajax asynchronous javascript and xml
What is ajax? *
What is ajax
Java asynchronous programming
Asynchronous programming in java
Java soap xml 파싱
Mitarbeiterverwaltung open source
Java dom tutorial
Terasoluna
Java xml deserialization
Script de java
Data types in javascript
Java script wikipedia
Language
"java script"
"java script"
Java script course
Java script
"java script"
Java khan academy
Java script examples
Inside which html element do we put the
Java script email
Slido softuni
"java script"
Riad wahby
Java script classes
Achilles and ajax playing dice
Exekias achilles and ajax playing a dice game
Red figure
Fdm
What is synchronous and asynchronous data transfer
Asynchronous data transfer
Lpc176
Synchronous and asynchronous i/o
Asynchronous transfer mode advantages and disadvantages
Synchronous and asynchronous bus
System bus in computer
Ajax google map
Ajax stands for
Ajax edition
Frenotomy ajax
Pinewood oshawa
Ajax cs
Asbetose
Shoah e sport
Microsoft ajax content delivery network
Wwv_flow.ajax
Security issues in ajax
Ajax cs
Mia ajax
