Como espionar as requisições e respostas HTTP do seu navegador.

Neste artigo, você irá

• Aprenda como espionar as requisições e respostas HTTP do seu navegador web.
• Comece a entender por que seu navegador envia cabeçalhos de requisição HTTP e por que os servidores web enviam cabeçalhos de resposta HTTP.

O que você precisará

• O Google Chrome, pelas suas ferramentas de desenvolvedor.
• Alternativamente, você pode usar outros navegadores, caso consiga descobrir como usar as ferramentas de desenvolvimento que eles oferecem.

O HTTP não é nenhum segredo e é extremamente fácil espionar o seu navegador.

Você já se sentiu como se estivesse envolvido em uma mágica misteriosa o que seu navegador e servidores remotos fazem juntos? Para que você não pense que as requisições e respostas HTTP são como um aperto de mãos secreto que apenas os fabricantes de navegadores e operadores de sites conhecem e podem ver: Eles não são. Supondo que você esteja usando o Google Chrome, faça o seguinte:

1. Abra uma nova janela ou aba.
2. Bata o F12 tecla para abrir as ferramentas de desenvolvedor do Google Chrome e clique em Network aba
3. Abra o Google em uma nova janela. Você poderá estudar o funcionamento interno da requisição HTTP usada para obter a página inicial do Google.com.

Observe a método de solicitação e cabeçalhos de solicitação seção

Como você pode ver, o método de solicitação is ENTREE abaixo disso há um grande saco de Cabeçalhos da requisição. Vamos destacar apenas os principais cabeçalhos por enquanto. Os cabeçalhos de requisição HTTP entrarão em jogo quando começarmos a estudar como enviar dados para o servidor. Digital.ai Agility, anteriormente VersionOne, API REST porque precisaremos especificar alguns "cabeçalhos personalizados".

Os cabeçalhos HTTP fornecem mais informações para ajudar o servidor a responder corretamente.

Seu navegador envia cabeçalhos HTTP como parte da requisição HTTP para fornecer ao servidor informações adicionais necessárias para processar a requisição. Os mais relevantes, na prática, são os seguintes: aceitar cabeçalho e o biscoito O cabeçalho Accept informa ao servidor em que formato o navegador deseja receber a resposta, e o cookie é, na verdade, um valor único que me identifica e que meu navegador obteve anteriormente do Google. Meu navegador envia o cookie de volta ao Google em solicitações subsequentes para que o Google possa correlacionar solicitações diferentes comigo.

Agora, role o painel para baixo para ver o cabeçalhos de resposta seção

Da mesma forma, a resposta possui cabeçalhos. conteúdo/tipo O cabeçalho é o mais relevante aqui, e você notará que text / html corresponde a um dos valores contidos na solicitação HTTP inicial. aceitar cabeçalho. Isso será importante mais tarde, quando usarmos JavaScript para criar solicitações para o Digital.ai Agility API REST.

Clique na resposta aba

Você se lembra da declaração de Tim Berners-Lee, o criador da web, no último artigo, sobre o método HTTP GET quando ele o projetou? Ele disse:

A resposta do servidor era sempre uma página HTML.

Embora o início da resposta diga A maior parte da resposta contém código JavaScript, e um código JavaScript com uma aparência realmente bizarra. Isso é chamado de minified JavaScript. Os desenvolvedores minimizam o código para reduzir o tamanho da resposta. Mas isso certamente dificulta a compreensão!

Agora, vamos examinar uma requisição HTTP POST.

Supondo que você ainda tenha outro navegador ou aba aberta e as ferramentas de desenvolvedor à mão:

1. Acesse http://www.pastebin.com
2. Digite algo no nova pasta preencha, role para baixo e clique enviar

Destaques das solicitações e respostas POST

Aqui estão alguns destaques da solicitação e da resposta que você pode ver na janela de ferramentas de desenvolvedor:

Solicitar cabeçalhos

URL da solicitação: http://pastebin.com/post.php Método da solicitação: POST

Solicitar carga útil

Os valores contidos na carga útil correspondem aos valores dos campos de um formulário HTML. O código-fonte do elemento do formulário HTML é semelhante a este:

Se você, assim como eu, digitou Digital.ai Agility é a minha ferramenta de gestão ágil favorita! no nova pasta campo (nomeado) colar_código no HTML), então sua carga útil deve ser semelhante a esta:

//////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition: form/data; name="post_key" KgvURkjA //////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition: form/data; name="submit_hidden" submit_hidden //////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition: form/data; name="paste_code"

Digital.ai Agility é a minha ferramenta de gestão ágil favorita!

Cabeçalhos de resposta

Novamente, como vimos na resposta GET do Google.com, o conteúdo/tipo O cabeçalho é texto/xml, mas o novo local O cabeçalho especifica para onde o navegador deve navegar automaticamente para obter o documento de resposta (GET), já que, se você observar a guia de resposta, verá que ela está vazia. Este é um bom padrão de design chamado... Postar/Redirecionar/Obtenha padrão, e aprenderemos mais sobre isso em artigos posteriores.