Quando usamos solicitações para buscar uma página, os resultados que obtemos podem ser diferentes do que vemos no navegador: os dados da página normalmente exibidos no navegador, usando solicitações, mas nenhum resultado. Isso ocorre porque as solicitações obtidas são todos documentos HTML originais e as páginas no navegador são os resultados gerados após o processamento de dados JavaScript. Existem muitas fontes desses dados, que podem ser carregados através do Ajax, podem estar contidos em um documento HTML ou gerados após cálculos por JavaScript e algoritmos específicos.
Para o primeiro caso, o carregamento de dados é um método de carregamento assíncrono. A página original não conterá alguns dados. Somente após o carregamento, ela solicitará uma interface para obter os dados do servidor, e então os dados serão processados e apresentados na página da web Acima, esse processo realmente envia uma solicitação Ajax para a interface do servidor.
De acordo com a tendência de desenvolvimento da Web, haverá cada vez mais páginas dessa forma. O documento HTML original da página da web não contém nenhum dado. Os dados são apresentados após serem carregados uniformemente por meio do Ajax, de forma que a frente e o back-ends possam ser separados no desenvolvimento da Web e a pressão exercida pelo servidor que renderiza diretamente a página possa ser reduzida.
Portanto, se você encontrar essa página, será impossível obter dados válidos usando diretamente bibliotecas, como solicitações para buscar a página original. Neste momento, precisamos analisar a solicitação Ajax enviada para a interface pelo backend da página da Web. Se as solicitações puderem ser usadas para simular a solicitação Ajax, ela poderá ser capturada com sucesso.
Portanto, nesta lição, entenderemos o que é Ajax e como analisar e capturar solicitações Ajax.
O que é Ajax
Ajax, o nome completo é Asynchronous JavaScript and XML, ou seja, Asynchronous JavaScript and XML. Não é uma linguagem de programação, mas uma tecnologia que usa JavaScript para trocar dados com o servidor e atualizar parte da página da web, garantindo que a página não seja atualizada e o link da página não seja alterado.
Para páginas da web tradicionais, se você deseja atualizar seu conteúdo, deve atualizar a página inteira. Com Ajax, você pode atualizar o conteúdo da página sem ser completamente atualizado. Nesse processo, a página realmente realiza a interação dos dados com o servidor em segundo plano.Após os dados serem obtidos, o JavaScript é usado para alterar a página, de modo que o conteúdo da página seja atualizado.
Você pode acessar o W3School para experimentar algumas demos para ter uma ideia: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp .
Introdução de instância
Ao navegar na web, descobriremos que muitas páginas da web têm que rolar para baixo para ver mais opções. Veja a página inicial do meu Weibo como exemplo: https://m.weibo.cn/u/2830678474 . Mudamos para a página do Weibo e descobrimos que depois de deslizar para baixo alguns Weibo, o seguinte conteúdo não será exibido diretamente, mas uma animação de carregamento aparecerá. Depois que o carregamento for concluído, o novo conteúdo do Weibo continuará a aparecer abaixo. Este processo é na verdade Ajax O processo de carregamento é mostrado na figura:
Percebemos que a página não foi totalmente atualizada, o que significa que o link da página não mudou, mas há um novo conteúdo na página, que é o novo Weibo que foi postado mais tarde. Este é o processo de obtenção de novos dados e apresentação por meio do Ajax.
Fundamental
Após uma compreensão preliminar do Ajax, vamos aprender mais sobre seus princípios básicos. O processo de envio de uma solicitação Ajax para uma atualização de página da web pode ser simplesmente dividido nas três etapas a seguir:
- enviar pedido
- Analisar conteúdo
- Renderizar página da web
Apresentaremos esses processos em detalhes a seguir.
enviar pedido
Sabemos que JavaScript pode implementar várias funções interativas da página, e Ajax não é exceção. Ele é implementado por JavaScript e o seguinte código é realmente executado:
var xmlhttp;
if (window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();} else {
//code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/ajax/",true);
xmlhttp.send();
Esta é a implementação de Ajax de nível mais baixo do JavaScript. Esse processo está, na verdade, criando um novo objeto XMLHttpRequest, chamando a propriedade onreadystatechange para definir o monitor e, finalmente, chamando os métodos open () e send () para enviar uma solicitação a um link (ou seja, o servidor).
Depois de usarmos Python para enviar a solicitação, podemos obter o resultado da resposta, mas aqui a solicitação é enviada por JavaScript. Uma vez que o monitoramento está configurado, quando o servidor retornar uma resposta, o método correspondente a onreadystatechange será disparado.Podemos analisar o conteúdo da resposta neste método.
Analisar conteúdo
Depois de obter a resposta, o método correspondente ao atributo onreadystatechange será acionado.Neste momento, o conteúdo da resposta pode ser obtido usando o atributo responseText de xmlhttp. Isso é semelhante ao processo de usar solicitações para iniciar uma solicitação ao servidor em Python e obter uma resposta.
O conteúdo retornado pode ser HTML ou JSON e, então, só precisamos usar JavaScript no método para processamento posterior. Por exemplo, se o conteúdo retornado for JSON, podemos analisá-lo e transformá-lo.
Renderizar página da web
JavaScript tem a capacidade de alterar o conteúdo de uma página da Web. Depois de analisar o conteúdo da resposta, você pode chamar o JavaScript para executar a próxima etapa de processamento da página da Web no conteúdo analisado. Por exemplo, por meio de operações como document.getElementById (). InnerHTML, o código-fonte em um determinado elemento é alterado, de modo que o conteúdo exibido na página da Web seja alterado. Esse tipo de operação, como alterar e excluir o documento da página da Web do Documento também é chamado Faça manipulação de DOM.
No exemplo acima, a operação document.getElementById ("myDiv"). InnerHTML = xmlhttp.responseText altera o código HTML dentro do nó cujo ID é myDiv para o conteúdo retornado pelo servidor, de modo que o novo elemento retornado pelo servidor apareça dentro do elemento myDiv Dados, parte do conteúdo da página da web parece estar atualizado.
Como você pode ver, as três etapas de envio da solicitação, análise do conteúdo e renderização da página da web são, na verdade, concluídas por JavaScript.
Análise Ajax
Pegue o Weibo anterior como exemplo. Sabemos que o conteúdo a ser atualizado arrastando é carregado pelo Ajax e o URL da página não mudou. Neste momento, onde devemos verificar essas solicitações Ajax?
Aqui também precisa usar as ferramentas de desenvolvedor do navegador, a seguir leva o navegador Chrome como um exemplo para apresentar.
Primeiro, use o navegador Chrome para abrir o link do Weibo https://m.weibo.cn/u/2830678474 , clique com o botão direito do mouse na página e selecione a opção "verificar" no menu de atalho pop-up e o desenvolvimento aparecerá Ferramenta Maker, conforme mostrado:
Conforme mencionado anteriormente, aqui estão todos os registros de solicitações enviadas e respostas recebidas entre o navegador e o servidor durante o processo de carregamento da página.
Ajax tem seu tipo de solicitação especial, que é chamado xhr. Na figura, podemos encontrar uma solicitação começando com getIndex cujo tipo é xhr, que é uma solicitação Ajax. Clique nesta solicitação com o mouse para visualizar as informações detalhadas desta solicitação.
Informações como cabeçalhos de solicitação, URL e cabeçalhos de resposta podem ser observados à direita. Existe uma mensagem nos Cabeçalhos de Solicitação como X-Solicitado-Com: XMLHttpRequest, que marca a solicitação como uma solicitação Ajax, conforme mostrado na figura:
Em seguida, clicamos em Visualizar e você pode ver o conteúdo da resposta, que está no formato JSON. Aqui, o Chrome faz a análise automaticamente para nós, clique na seta para expandir e recolher o conteúdo correspondente.
Podemos observar que o resultado retornado são minhas informações pessoais, incluindo apelido, perfil, avatar, etc. Esses também são os dados usados para renderizar a página inicial pessoal. Depois que o JavaScript recebe esses dados, ele executa o método de renderização correspondente e a página inteira é renderizada.
Além disso, nós também pode alternar para a guia Response, que observou os dados de retorno real, como mostrado:
Em seguida, corte de volta para a primeira solicitação, olhar para o que a sua resposta, como mostrado abaixo:
Esta é O resultado retornado pelo link original https://m.weibo.cn/u/2830678474 tem menos de 50 linhas de código e uma estrutura muito simples, exceto que algum JavaScript é executado.
Portanto, os dados reais da página Weibo que vemos não são retornados da página original, mas depois de executar o JavaScript, ele envia uma solicitação Ajax para o segundo plano novamente e o navegador obtém os dados e os processa posteriormente.
Pedido de filtro
Em seguida, usamos a função de filtragem das Ferramentas do desenvolvedor do Chrome para filtrar todas as solicitações Ajax. Há uma camada de barra de filtro acima da solicitação, clique em XHR diretamente, neste momento todas as solicitações exibidas abaixo são solicitações Ajax, conforme mostrado na figura: A
seguir, continue deslizando a página, você pode ver que existem novas na parte inferior da página O Weibo foi postado e as solicitações Ajax continuaram aparecendo nas ferramentas do desenvolvedor, para que pudéssemos capturar todas as solicitações Ajax.
Se você clicar em um item à vontade, poderá ver claramente seu URL de Solicitação, Cabeçalhos de Solicitação, Cabeçalhos de Resposta, Corpo de Resposta e outros conteúdos.Neste momento, é muito simples simular a solicitação e extrair.
O conteúdo mostrado na figura abaixo é a lista de informações de uma determinada página do meu Weibo:
Até agora, pudemos analisar algumas informações detalhadas de solicitações Ajax, e então só precisamos simular essas solicitações Ajax com um programa para extraí-las facilmente As informações de que precisamos.