jQuery - prelucrare date XML

XML (Extensible Markup Language) e un format special de trimitere si stocare date in fisiere cu extensia .xml, cu o sintaxa bazata pe tag-uri. Documentele XML sunt de obicei folosite in aplicatii web de accesare date de la un server la altul.
Acest tutorial arata cum puteti prelua date dintr-un fisier XML si sa le afisati in pagina web, folosind jQuery Ajax.

Iata un exemplu.
Mai intai se creaza un document XML simplu, intr-un fisier denumit "webpages.xml":

<?xml version="1.0" encoding="utf-8"?>
<webpages>
  <course id="1">
    <title>Curs JavaScript</title>
    <url>https://marplo.net/javascript</url>
  </course>
  <course id="2">
    <title>Curs jQuery</title>
    <url>https://marplo.net/javascript/curs-jquery-tutoriale-js</url>
  </course>
</webpages>

Acum se creaza codul HTML si jQuery pentru o pagina web care va afisa intr-un DIV date din acest document XML.
Pagina contine un buton care la click pe el va apela o functie jQuery ajax(), aceasta acceseaza fisierul XML creat mai sus (webpages.xml), preia date din el (id, title, si url), apoi le adauga intr-un <div> in pagina.
Pentru a lucra cu XML in jQuery, trebuie sa setati optiunea dataType:"xml" in metoda ajax() (vedeti si comentariile din cod):

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax - XML</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // la click pe tag-ul cu id="buton" se executa o cerere Ajax prin GET la un fisier XML
  // preia datele XML si afiseaza: id, title, si url
  $('#buton').click(function() {
    $.ajax({
      type: 'get',
      url: 'webpages.xml',
      beforeSend: function() {
        // inainte de a trimite cererea, afiseaza o notificare de "Incarcare..." in "#resp"
        $('#resp').html('Incarcare...');
      },
      timeout: 10000,        // timpul maxim permis pt. executia cererii (10 secunde)
      error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },     // alert in caz de eroare
      dataType: 'xml',
      success: function(response) {
        $('#resp').html('');        // sterge notificarea "Incarcare..." din "#resp"

        // acceseaza fiecare element copil din <webpages>
        $(response).find('webpages').children().each(function() {
          // preia "id", "title", si "url" din elementul curent
          var elm = $(this);
          var id = elm.attr('id');
          var title = elm.find('title').text();
          var url = elm.find('url').text();

          // adauga datele in "#resp"
          $('#resp').append(id+ ') Titlu: <b>'+ title+ '</b> -- URL: <b><i>'+ url+ '</i></b><br />');
        });
      }
    });
  });
});
--></script>
</head>
<body>
<div id="resp">Aici vor fi afisate datele din fisierul XML.</div><br />
<button id="buton">Click</button>
</body>
</html>

- obiect_jQuery.children().each() - preia fiecare element inclus direct in "obiect_jQuery".
- elm.attr('id') - returneaza valoarea atributului "id".
- elm.find('url').text() - returneaza textul din tag-ul <url> inclus in "elm".

Demo:

Aici vor fi afisate datele din fisierul XML.

<<-jQuery get() si post() -- Validare si trimitere formular->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag defineste zona de click intr-o harta creata dintr-o imagine?

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?

display overflow position

#id {
  overflow: auto;
}

Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.

onclick onmouseover onmouseout

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".

$_SESSION $_GET $_POST

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".

who which whoever

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".

que quien cuyo

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.

Last accessed pages

Prezentul simplu si continuu - Present Tense Simple and Continuous ^(46828)
Lectii audio-video de limba engleza ⁽⁹¹⁶⁶⁾
PHP PDO - exec INSERT UPDATE DELETE MySQL ⁽⁴⁶⁸⁾
Curs complet de limba engleza, incepatori ⁽⁵⁶²³⁾
Substantivul din limba engleza - The Noun ^(24820)

Popular pages this month

Gramatica limbii engleze - Prezentare Generala ⁽²⁹¹⁵⁾
Prezentul simplu si continuu - Present Tense Simple and Continuous ⁽²⁰⁵⁶⁾
Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax ⁽¹⁵⁶¹⁾
Prezent perfect si Prezent perfect continuu - Present perfect and Continuous ⁽¹²¹⁰⁾
Conditional IF in Limba Engleza - Fraze Conditionale ⁽¹¹⁷⁹⁾