Karteikarten
JavaScript AJAX Basics
Karten in diesem Stapel (35)
- 1Ajax é um acrônimo de quais palavras?Asynchronous JavaScript And XML
Que é a técnica de carregar novos conteúdos sem a necessidade de um novo Loading na pagina. - 2O que o AJAX faz?Pemite carregar um novo conteúdo na "Current Web Page" sem carregar uma nova pagina.
- 3Com quais linguagens Back End AJAX pode ser comunicar?Ruby, Python, PHP, Cold Fusion e muitas outras.
- 4Quando um servidor responde a uma "AJAX Request" ele retorna uma?Response, e então performa a "callback function" que definimos no AJAX.
- 5Você usa AJAX para se comunicar com um SERVIDOR enviando uma?Request, para então o servidor receber esses dados, manipulá-los e retornar a "Response" para que o Ajax performe a "Call Back Function".
- 6Qual é uma das principais características da "asynchronous" de uma AJAX request?É que a "Callbacks" para múltiplas requests podem não serem executadas na ordem que foram enviadas.
- 7Quais são os 4 passos para um "AJAX Request"?1. Criar um objeto XMLHttpRequest Object
2. Criar uma "callback function"
3. Abrir a "request"
4. Enviar a "request" - 8Como criamos um XMLHttpRequest Object?var variable = new XMLHttpRequest;
- 9Como criamos uma função "callback" para o AJAX?STEP 1
var variable = new XMLHttpRequest();
STEP 2
variable.onreadystatechange = function () {
if (request.readyState === 4) {
do something
}
}; - 10Como abrimos a "Request"?variable.open('method', 'database.extention')
onde metodo pode ser
GET ou POST
e no database
podemos ter qualquer arquivo que queremos manipular, como um HTML para anexar em uma pagina. - 11Como podemos enviar essa "Request"?variable.send();
envia a request para o servidor. - 12O que é uma "query string"?É uma informação que é enviada para o web server, ela é adicionada ao final da URL.
lembrar de como fica nas urls, não possuem espaço e alguns caracteries especiais são alterados por outros. - 13Qual é a diferença entre os métodos "GET" e "POST"?A diferença básica é que POST envia dados no "corpo" de uma "request", enquanto o GET envia dados pela URL, tornando assim o método GET com uma capacidade menor de enviar dados.
Devemos obtar pelo método POST quando :
Quando queremos enviar dados que podem ser armazenados em nosso bando de dados.
Quando você quer enviar mais de 2083 caracteries de dados para o web server (limite de dados do método GET)
Uma razão comum para usar o método "Get" é
Quando nos só temos interesse de acessar ou pegar informações do servidor e não de modifica-las ou envia-las. - 14O que significa CORS?"Cross-Origin resource sharing" ou compartilhamento de recursos de origem cruzada. É uma especificação de uma tecnologia de navegadores que define meios para um servidor permitir que seus recursos sejam acessados por uma página web de um domínio diferente.
- 15Porque o uso de um "Web Proxy" é muito útil quando falamos em uma "AJAX request"?Porque ele permite ignorar a politica dos web browser's da "same origin" de dados, permitindo você acessar dados de outros servidores, mantendo suas "AJAX requests" no mesmo dominio.
- 16Qual é o valor de uma "XMLHttpRequest" ou "AJAX Request" em sua propriedade "readyState" quando o navegador já recebeu TODOS os dados de um servidor, correspodente a request realizada?4, então para sabermos se ocorreu tudo bem no envio desses dados, podemos verificar na call back function, antes de executar algo :
if (variableAJAXrequest.readyState === 4){
do something;
} - 17O que significa o status HTTP 200? e o 404?200 significa que está tudo OK.
404 significa "File not Found".
podemos estar se recebemos todas as informações e se tudo ocorreu ok no servidor dessa forma na "callback function"
variable.onreadystatechange = function() {
if(variable.readyState === 4 && variable.status === 200) {
}
}; - 18Como podemos acessar a resposta do servidor, para colocar dentro de um documento HTML, por exemplo?document.getElementById('div').innerHTML = variableAJAXrequest.responseText;
a resposta do servidor pode ser acessada por:
variable.responseText; - 19O que significa JSON? Como utilizamos?JavaScript Object Notation, devemos separa em seus arquivos por dupla aspas suas propriedades e valores.
"property": "value",
podendo ser formatado como um Array de valores, objeto com propriedade e valores e também um Array de Objetos. - 20Quando um servidor em envia dados JSON para o AJAX, para o javascript o que ele enviou?Ele recebe esse dados como um string, para convertermos precisamos submeter a resposta do servidor ao método:
JSON.parse() ; - 21O que $('div').load('updatecontent.html') faz?Carrega o conteudo do arquivo 'updatecontent.html' na div selecionada pelo AJAX.
- 22O que faz o metódo .load()?.load() Carrega dados de um arquivo ou servidor e coloca os dados retornados em um elemento selecionado.
- 23Qual é a diferença entre o método jQuery .load() aos outros métodos do jQuery?Esse método .load() deve estar sempre atrelado a uma seleção jQuery -
$('elementoAtrelado').load('content.html') - 24O método $.get() ou jQuey.get() aceita 3 argumentos (parâmetros), em qual ordem eles vão?1. URL
2. Dados do servidor
3. Callback function para processar a resposta do servidor.
exemplo
footer.html é onde queremos extrair os dados .
devemos lembrar que o parâmetro para rodar a função é o "response" que é a resposta do servidor.
$.get('footer.html','app.js', function(response){
do somethig;
}); - 25Qual método jQuery AJAX, posta dados no servidor?$.post()
ou
jQuery.post() - 26Como podemos adicionar um "submit event handler" manipulador de eventos em uma form?$('form').submit(function(evt) {
});
dessa forma miramos na "form" assim que ela for submetida e então podemos performar uma função para manipular os dados obtidos. - 27O que o método serialize() faz?serialize() codifica os elementos de uma "form" como uma string para submissão( envio ao servidor).
- 28Como podemos evitar com jQuey o comportamento padrão do navegador, por exemplo quando submetemos uma "form", então o navegador por padrão vai carregar uma nova pagina, como evitamos isso?$('form').submit(function(){
evt.preventDefault()
});
evitamos o carregamento de uma nova pagina e podemos performar outras ações, como confirmar o login ainda na mesma pagina, sem a necessidade de carregar mais contéudo. - 29Quais são os 2 parametros que o método de "Low-Level interface" $.ajax() ou jQuery.ajax() aceita?1. A URL
2. Um objeto Javascript contendo as configurações que controlam como a AJAX request é feita.
Então as propriedades e valores deste objeto definem como será executada e quais dados serão extraídos do servidor. - 30Porque deveriamos usar o método $.ajax() ou jQuery.ajax() em vez de simplesmente usar metodos como, $.get(), $.getJSON(), $.post()?O $.ajax() método, possui mais opções e fornece um grande controle sobre as AJAX requests.
O $.ajax() ,método permite que você defina um tempo limite e controle o quanto tempo você está disposto a esperar por uma resposta de um servidor.
O $.ajax() método permite você enviar um nome de usuário e password para as fontes para conseguir uma autenticação. - 31Qual é o método jQuery para manipular erros na resposta AJAX?.fail()
podemos colocar no final da callback function para performar algo caso a resposta AJAX não tenha tido sucesso.
porém demoves lembrar que .fail() funciona com $.ajax()
o parametro para .fail é (jqXHR)
que é o jQuery XHR object, onde vamos trabalhar o erro.
os parametros que .fail() recebe da "ajax request" são similares ao que vimos sem jQuery,
statusText - com a descrição do erro
status- com o erro (numerico, como 404.) - 32Como podemos utilizar esse .fail()?$.get("missing.html", function(data) {
$("#footer").html(data);
}).fail(function(jqXHR){
alert(jqXHR.statusText);
});
jqXHR é o objeto retornado da Request
.statusText - obtemos qual erro tivemos
.status- o erro de forma numerica. - 33O que significa API? E quais linguagens de programação podem ser utilizadas para falar com "apis de terceiros"?API siginifica - Application Programming Interface, e pode ser usadas por linguagens como JavaScript, Ruby, PHP, Python.
- 34Para que serve uma "API key"?Permite que o desenvolvedor web se conecte com um terceiro servidor como Google Maps, permite que que os donos da API limitem o acesso, pemitem que um site venda o acesso a sua API.
- 35Quais são os 3 parametros aceitos pelo método $.getJSON()?$.getJSON() aceita
1. UMA URL
2. Um objeto JavaScript para enviar os dados para o servidor.
3. Uma "callback" function para processar as respostas do servido.
um exemplo com de uso do método com a api do Open Weather:
$(document).ready(function() {
var weatherAPI = 'http://api.openweathermap.org/data/2.5/weather';
var data = {
q : "Portland,OR",
units : "metric"
};
function showWeather(weatherReport) {
$('#temperature').text(weatherReport.main.temp);
}
$.getJSON(weatherAPI, data, showWeather);
});
Informationen
- Beschreibung
- asa Technical Skills (JavaScript / jQuery) Karteikarten am JavaScript AJAX Basics, erstellt von Victor Bini am 09/04/2016.
- Erstellt von
- Victor Bini
- Aufrufe
- 2
- Tags
- Bewertung