1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: AJAX
slug: Web/Guide/AJAX
tags:
- AJAX
- DOM
- JSON
- JavaScript
- Referências
- XML
- XMLHttRequest
translation_of: Web/Guide/AJAX
---
<p> </p>
<div class="callout-box"><strong><a href="/pt-PT/docs/Web/Guide/AJAX/Como_começar">Primeiros Passos</a></strong>
<p>Uma introdução ao AJAX</p>
</div>
<div>
<p><strong>JavaScript Assíncrono e XML,</strong> enquanto não uma tecnologia em si, é um termo criado em 2005 por Jesse James Garret, que descreve uma "nova" abordagem para utilizar uma série de tecnologias existentes em conjunto, incluindo <a href="/pt-PT/docs/Web/HTML">HTML</a> ou <a href="/pt-PT/docs/XHTML">XHTML</a>, <a href="/pt-PT/docs/Web/CSS">Cascading Style Sheets</a>, <a href="/pt-PT/docs/Web/JavaScript">JavaScript</a>, <a href="/pt-PT/docs/DOM/DOM_Reference">Document Object Model</a>, <a href="/pt-PT/docs/Introducao_a_XML">XML</a>, <a href="/pt-PT/docs/XSLT">XSLT</a> e o objeto <a href="/pt-PT/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>.<br>
Quando estas tecnologias são combinadas no modelo AJAX, as aplicações da Web são capazes de efetuar atualizações incrementais e rápidas na interface do utilizador sem recarregar toda a página. Isto torna a aplicação mais rápida e mais responsiva para as ações do do utilizador.</p>
</div>
<p>Although X in Ajax stands for XML, <a href="/en-US/docs/JSON" title="https://developer.mozilla.org/en-US/docs/JSON">JSON</a> is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.</p>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentação">Documentação</h2>
<dl>
<dt><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">Primeiros Passos</a></dt>
<dd>This article guides you through the Ajax basics and gives you two simple hands-on examples to get you started.</dd>
<dt><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utilizar a API XMLHttpRequest</a></dt>
<dd>The <a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code> API</a> is the core of Ajax. This article will explain how to use some Ajax techniques, like:
<ul>
<li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">analyzing and manipulating the response of the server</a></li>
<li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">monitoring the progress of a request</a></li>
<li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">submitting forms and upload binary files</a> – in <em>pure</em> Ajax, or using <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> objects</li>
<li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">creating synchronous or asynchronous requests</a></li>
<li>using Ajax within <a href="/en-US/docs/DOM/Worker" title="/en-US/docs/DOM/Worker">Web workers</a></li>
</ul>
</dd>
<dt><a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a></dt>
<dd>The Fetch API provides an interface for fetching resources. It will seem familiar to anyone who has used {{domxref("XMLHTTPRequest")}}, but this API provides a more powerful and flexible feature set.</dd>
<dt><a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Eventos de envio do servidor</a></dt>
<dd>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/DOM/event" title="DOM/Event">Events</a> + data</em> inside the web page. See also: <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</dd>
<dt><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example"><em>Pure-Ajax</em> navigation example</a></dt>
<dd>This article provides a working (minimalist) example of a <em>pure-Ajax</em> website composed only of three pages.</dd>
<dt><a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Enviar e Receber Dados Binário</a></dt>
<dd>The <code>responseType</code> property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>"arraybuffer"</code>, <code>"blob"</code>, <code>"document"</code>, <code>"json"</code>, and <code>"text"</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd>
<dt><a href="/en-US/docs/XML" title="XML">XML</a></dt>
<dd>The <strong>Extensible Markup Language (XML)</strong> is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.</dd>
<dt><a href="/en-US/docs/JXON" title="JXON">JXON</a></dt>
<dd>JXON stands for lossless <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation, it is a generic name by which is defined the representation of Javascript object trees (JSON) using XML.</dd>
<dt><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Analisar e serializar XML</a></dt>
<dd>How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.</dd>
<dt><a href="/en-US/docs/XPath" title="XPath">XPath</a></dt>
<dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML" title="XML">XML</a> document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.</dd>
<dt><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">A API <code>FileReader</code></a></dt>
<dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using <a href="https://developer.mozilla.org/en-US/docs/DOM/File" title="/en-US/docs/DOM/File"><code>File</code></a> or <a href="https://developer.mozilla.org/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> objects to specify the file or data to read. File objects may be obtained from a <a href="https://developer.mozilla.org/en-US/docs/DOM/FileList" title="/en-US/docs/DOM/FileList"><code>FileList</code></a> object returned as a result of a user selecting files using the <code><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/input" title="<input>"><input></a></code> element, from a drag and drop operation's <a href="https://developer.mozilla.org/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement"><code>HTMLCanvasElement</code></a>.</dd>
<dt><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="en-US/docs/HTML_in_XMLHttpRequest">HTML no XMLHttpRequest</a></dt>
<dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to <a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd>
<dt><a href="/en-US/docs/AJAX/Other_Resources" title="en-US/docs/AJAX/Other_Resources">Outros recursos</a></dt>
<dd>Outros recursos Ajax que poderão ser úteis.</dd>
</dl>
<p><span class="alllinks"><a href="/pt-PT/docs/tag/AJAX" title="en-US/docs/tag/AJAX">Ver Todos...</a></span></p>
<h2 class="Other" id="Consulte_também">Consulte também</h2>
<dl>
<dt><a href="http://www.webreference.com/programming/ajax_tech/">Alternate Ajax Techniques</a></dt>
<dd>Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.</dd>
<dt><a href="http://adaptivepath.org/ideas/ajax-new-approach-web-applications/">Ajax: A New Approach to Web Applications</a></dt>
<dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd>
<dt><a href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt>
<dd>"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."</dd>
<dt><a href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt>
<dd>Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.</dd>
<dt><a href="http://www.xul.fr/en-xml-ajax.html">Tutorial</a> with examples.</dt>
<dd> </dd>
<dt><a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest specification</a></dt>
<dd>W3C Working draft</dd>
</dl>
</div>
<div class="section">
<h2 class="Community" id="Comunidade">Comunidade</h2>
<ul>
<li>View Mozilla forums...</li>
</ul>
<div>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</div>
<ul>
<li><a href="/pt-PT/docs/Web/Guide/AJAX/Comunidade" title="en-US/docs/AJAX/Community">Hiperligações da comunidade do Ajax</a></li>
</ul>
<h2 class="Tools" id="Ferramentas">Ferramentas</h2>
<ul>
<li><a href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li>
<li><a href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li>
<li><a href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li>
<li><a href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li>
<li><a href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li>
</ul>
<p><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">View All...</a></span></p>
<h2 id="Exemplos">Exemplos</h2>
<ul>
<li><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">Ajax poller script</a></li>
<li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li>
<li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with Ajax</a></li>
<li><a href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li>
<li><a href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">Ajax: Creating Huge Bookmarklets</a></li>
<li><a href="http://www.hotajax.org">Ajax: Hot!Ajax There are many cool examples</a></li>
</ul>
<h2 class="Related_Topics" id="Tópicos_Relacionados">Tópicos Relacionados</h2>
<p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p>
</div>
</div>
<p>{{ListSubpages}}</p>
|