Curs Javascript

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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut e folosit in tag-ul <a> pentru adresa link-ului?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-size
h2 {
  font-family:"Calibri", sans-serif;
}
Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);
Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studied
We studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decir
Yo digo siempre la verdad.
- Eu spun mereu adevarul.
jQuery - prelucrare date XML

Last accessed pages

  1. Curs si Tutoriale JavaScript (70094)
  2. Articolul din limba engleza - The article (41275)
  3. Creare aceeasi inaltime la elemente HTML (127)
  4. Trecutul simplu - Exercitii si teste incepatori (13482)
  5. Creare ceas cu data si ora (248)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (5365)
  2. Curs HTML gratuit Tutoriale HTML5 (4411)
  3. Curs si Tutoriale JavaScript (3776)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3698)
  5. Curs CSS Online Tutoriale CSS3 (3651)