2 de dezembro. , 2016
Depois de escrever um artigo Como criar widgets integrados no JavaScript e PHP nativos. E tudo ficaria bem, mas um momento não afetou. Esses widgets podem ser usados \u200b\u200bem nosso próprio site, mas mais interessante para criá-los para recursos de terceiros. Mas, nesse caso, o navegador de dados desejado deve ser carregado de outro domínio - isso é solicitações de Ajax de domínio cruzado.
Do ponto de vista dos programadores de frontend, os pedidos de domínio não são diferentes do comum. Mas no Bekend há uma diferença. Por que com eles nem tudo é tão simples e como implementá-los - leia sobre isso no artigo.
Tentamos obter dados de outro domínio
Por simplicidade, considere obter solicitações. Suponha que o servidor esteja um determinado arquivo HTML, que a borda para nós como baixar o Ajax-ohm de outro domínio..html. Abra e certifique-se de que está realmente disponível - (abre em uma nova guia). Este é um DIV regular com o texto "conteúdo do template.html".
E agora vamos obter este html-ku ajax-ohm diretamente do console do navegador.
Não seremos rebatidos com o JavaScript nativo e direcionando uma solicitação usando jquery.get () e trazer para o console o que eles receberam em resposta do servidor.
$ .. html ", função (Responce) (Responce)));
Abra agora ferramentas de desenvolvedor no navegador e na guia Console, faça esta solicitação.
Você verá sobre o seguinte
Tudo é maravilhoso, enviou um pedido, recebeu uma resposta. Parece que poderia ser mais fácil? E agora vá para qualquer outro site onde o jQuery esteja conectado e tente fazer o mesmo. Somente não no site HTTPS, por que - aprenda no final do artigo.
Por exemplo, eu verifiquei solicitações no site de futebol da Bombdir.ru. E ao mesmo tempo, ele foi lançado, que lixo não se enquadra no console, mesmo em locais tão conhecidos. No entanto, a conversa não é sobre isso.
Execute uma solicitação de outro domínio e você verá o console não mais uma imagem tão flagrante. Diz, é impossível baixar, sem dados e em geral tristeza.
Se você abrir a guia Rede e encontrar uma consulta correspondente, você verá o servidor até mesmo retornado 200 OK 
E não há arquivo de conteúdo. Qual é a captura?
O que deu errado e qual será a decisão
A captura é que as políticas da Internet não permitem que os navegadores retenham dados de quaisquer recursos. Além dos casos em que esses próprios recursos estão interessados \u200b\u200bem distribuir dados específicos.
Nosso caso é tal. Para dar permissão para usar o arquivo HTML de qualquer lugar, você deseja enviar um cabeçalho HTTP de origem-controle de acesso ao acesso ao solicitar o arquivo.
Agora a questão é como fazer isso. Se você (ou administradores) tiver acesso ao NginX, então de uma maneira de configurar a contaminação deste cabeçalho para as ferramentas do servidor da Web. Você vai a Admins com a solicitação apropriada ou o Google você mesmo as configurações desejadas para o seu servidor da Web.
Se não houver esse acesso, como, por exemplo, em quase qualquer provedor de hospedagem em uma tarifa barata, então você precisa sair. E aqui o php chega ao resgate. A ideia é jogar nosso HTML-KU em um arquivo PHP, que é suportado pelo título e dará o conteúdo desejado.
Acontece que você cria o modelo de arquivo.php e a primeira string escreve o comando php
Cabeçalho ("" Access-Control-Permitir origem: * ");
Conteúdo do modelo.php.
Isto é, o conteúdo do template.php será assim, não se esqueça de mangas e suportes PHP 
O arquivo no WebDevkin é criado e está (abre na nova guia). Vamos agora tentar solicitá-lo de outro domínio e ver o que vai acontecer
$ .. php ", função (Responce));
Como você pode ver, tudo funciona bem - o arquivo é carregado! 
Olhe para a guia Rede.
Por favor, note que o cabeçalho de origem-degustação de controle de acesso está interessado no bloco de cabeçalhos de resposta. 
Em geral, o artigo é concluído. Resta coletar pensamentos em um monte e adicionar mais alguma informação.
Resumir e resumir
- 1. É impossível solicitar facilmente o AJAX qualquer recurso de outro domínio
- 2. Envie o cabeçalho de origem de controle de controle de acesso para todos os recursos para os quais o acesso pode ser necessário.
- 3. Faça com um servidor da Web ou PHP
- 4. No PHP, este cabeçalho é enviado pelo comando header ("" Access-Control-Permitir-origem: * ")
- 5. Acesso-Control-Allow-Origin: * - Permitir acesso a todos os domínios, Access-Control-Permitir-origem: Site.ru - somente o site do domínio.
- 6. Access-Control-Permitir-origem é enviado no início do arquivo PHP, mesmo antes da saída de outros dados (bem como quaisquer outras manchetes HTTP)
- 7. "Recurso" não é apenas um arquivo com a marca HTML, mas também qualquer URL ao qual a solicitação AJAX está chegando, por exemplo, recebendo um Dados JSON ou uma solicitação de postagem para adicionar uma string à tabela de banco de dados
E o último, realizado separadamente. Eu não procurei cumprir pedidos do site HTTP. Com https, não será possível carregar dados de HTTP por outro motivo - conteúdo misto. E o site ainda é site http ( atualizada: Não mais adiou o site em https)
Isso é o que você verá no console, tentando cumprir a mesma solicitação de qualquer site HTTPS. Portanto, se você estiver indo para se envolver em widgets incorporados ou algo assim, você definitivamente precisa colocar um certificado SSL no seu site.
jquery.ajax () - Executa uma solicitação para o servidor sem reinicializar a página. Este é um método de baixo nível. grande quantidade definições. Baseia-se no trabalho de todos os AJAX, que é frequentemente mais fácil de entender e usar, mas que ainda fornece funcionalidade limitada em comparação com este método.
$ .AJAX () Retorna o objeto XMLHTTTPREQUEST. Na maioria dos casos, você não precisará trabalhar diretamente com esse objeto, mas ainda está disponível, caso precise interromper a solicitação manualmente.
Como argumento, a função $ .Ajax () é transmitida um objeto que consiste em um par de chave / valor, que são usados \u200b\u200bpara inicializar e gerenciar a solicitação.
O pedido do AJAX tem duas opções de uso:
jquery.ajax (URL [, Configurações])
A diferença da versão anterior do método consiste apenas que a propriedade URL aqui faz parte das configurações e não um parâmetro separado.
Lista de configurações (configurações)
- aceita.(Padrão: depende do datatype)
Digite: objeto.
Ao executar uma consulta, os cabeçalhos (cabeçalho) indicam os tipos permitidos de conteúdo esperados do servidor. Os valores desses tipos serão retirados do parâmetro Accepts. Por exemplo, o exemplo a seguir indica os tipos permitidos de customype:$ .AJAX ((aceita: (MyCustomType: "Aplicação / X-Algo-Custom-Type"), conversores: ("Texto MyCustomType": Função (resultado) (retorna newresult;)), Datatype: "MyCustomType"));
$. Ajax ((
aceita: (
myCustomType: "Aplicação / X-Algo-Type"
conversores: (
"Texto MyCustomType": Função (resultado) (
retornar newresult;
dataType: "MyCustomType"
} ) ;
- assíncrono. (Padrão: true)
Tipo: valor lógico.
Por padrão, todas as solicitações são enviadas de forma assíncrona (ou seja, após o envio de uma solicitação para o servidor, a página não pára seu trabalho enquanto aguarda uma resposta). Se você precisar enviar consultas de forma sincronizada, defina esta opção em false. Solicitações de CrossDomain e solicitações do tipo "JSONP" não podem ser executados no modo síncrono. Por favor, note que as solicitações síncronas podem bloquear o navegador durante o tempo de execução. - befesert (jqxhr, configurações)
Tipo: Função.
Contém uma função que será chamada imediatamente antes de enviar a solicitação Ajax para o servidor. Esta função pode ser útil para modificar o objeto JQXHR (em versões iniciais Bibliotecas (até 1,5), em vez de JQXHR usa xmlhttprequest). Por exemplo, você pode alterar / especificar os cabeçalhos necessários (cabeçalhos) I.D. O objeto JQXHR será transmitido para a primeira função de argumentos. O segundo argumento passa as configurações de consulta.
Befesend refere-se a eventos AJAX. Portanto, se a função especificada em ele retornar false, a consulta AJAX será cancelada. Befesend é chamado independentemente do tipo de consulta. - cache. (Padrão: Verdadeiro, falso para "script" de datatype e "jsonp")
Tipo: valor lógico.
Se você quiser que o navegador não cache a solicitação, defina este parâmetro para False. Por favor, note que se o parâmetro estiver definido como False, a string "_ \u003d" será adicionada ao URL. - completo (JQXHR, TextStatus)
Tipo: Função.
Uma função executada toda vez depois de concluir a consulta AJAX (após sucesso e erro concluído). Dois parâmetros são transmitidos para a função: JQXHR (nas primeiras versões da biblioteca (até 1,5), em vez de JQXHR usa xmlhttprequest) e o status de execução da consulta (valor de string: "sucesso", "não modificado", " Erro "," Tempo limite "," abortar "ou" parserError ").
Começando com o JQuery-1.5, o parâmetro completo pode ser transmitido não uma função, mas uma matriz de funções. Todas as funções serão causadas na ordem em que a matriz é especificada. - conteúdo.
Digite: objeto.
O parâmetro apareceu no jQuery-1.5 é definido no objeto Formatar (string: expressão regular) e determina como o jQuery desmontará a resposta do servidor, dependendo do tipo. - tipo de conteúdo.
Digite: valor lógico ou string.
Ao enviar uma solicitação para o servidor, os dados são transmitidos no formato especificado no contentType. Por padrão, a 'aplicação / x-www-form-urlencoded; Charset \u003d utf-8 ', que é adequado na maioria dos casos. Se você especificar este parâmetro é explicitamente, ele será transferido para o servidor (mesmo que nenhum dado seja enviado lá).
Com o jQuery-1.6 você pode enviar falso para não instalar o título. - contexto.
Digite: objeto.
O objeto que será o contexto depois de executar a consulta (valor transmitido para a variável dessa variável). Por exemplo, se você especificar um elemento DOM como um contexto, todos os manipuladores de solicitação AJAX também serão realizados no contexto deste elemento DOM. Neste exemplo palavra-chave Isso conterá documento.Bodys:$ .AJAX ((URL: "Test.html", contexto: documento.body)). FEITO (FUNÇÃO () ($ ($ () .addclass ("feito"););
$. Ajax ((
uRL: "test.html",
contexto: documento. Corpo.
))). Feito (função () () ()
$ (isto). Addclass ("feito");
} ) ;
- conversores.(Padrão: ("* Texto": Window.String, "Texto HTML": TRUE ", texto JSON": jquery.parsejson, "Text XML": jquery.parsexml)
Digite: objeto.
O parâmetro apareceu no jQuery-1.5 determina, com a ajuda de quais funções serão convertidas nos valores do mesmo tipo, em outro. - domínio cruzado.(Padrão: Falso para o mesmo domínio, true para cruzamento)
Tipo: valor lógico.
O parâmetro apareceu no jQuery-1.5 se quiser executar uma consulta de domínio cruzado (por exemplo, JSONP) no mesmo domínio, defina na configuração CrossDomain. Isso permite, por exemplo, para tornar o redirecionamento do servidor para outro domínio. - dados.
Digite: objeto, string ou matriz.
Dados que serão transferidos para o servidor. Se os dados não forem uma string, eles serão convertidos na seqüência de consulta. Para obter solicitações, os dados são anexados ao URL. O objeto deve consistir em um par de chave / valor. Se um valor de matriz, os valores dos pedidos JQuery dependendo da configuração tradicional. Por padrão, por exemplo, (foo: ["Bar1", "Bar2"]) se transforma em & Foo \u003d Bar1 & Foo \u003d Bar2. - dataFilter (dados, tipo)
Tipo: Função.
Uma função que pré-processará os dados enviados pelo servidor, ou seja, Deve desempenhar o papel do filtro e retornar a string limpa. Dois parâmetros são transmitidos para esta função: os dados mencionados e o valor do parâmetro tipo de dados. A função especificada no DataFilter deve retornar os dados processados. - tipo de dados (Padrão: determinado automaticamente (xml, json, script ou html))
Tipo: linha.
O tipo de dados no qual é esperado para receber uma resposta do servidor. Se não for especificado, o jQuery tentará determinar automaticamente usando o servidor MIME. - erro
Tipo: Função
A função que será chamada em caso de conclusão malsucedida da solicitação ao servidor. Ele fornece três parâmetros: JQXHR (até 1.5 é usado xmlhttprequest), uma string com uma descrição do erro que ocorreu, bem como um objeto de exceção, se isso acontecesse. Valores possíveis do segundo argumento: "Tempo Limite", "Erro", "Notmodificado" e "ParserError" (em casos imprevistos, o valor nulo pode ser retornado). Começando com JQuery-1.5, este parâmetro pode tomar uma função uma e uma matriz de funções.
O evento de erro não ocorre quando o datatype é igual ao script ou jsonp. - global (Padrão: true)
Tipo: valor lógico.
Responsável pela operação dos eventos globais de solicitação AJAX (por exemplo, Ajaxstart ou Ajaxstop). Se você definir este parâmetro para eventos globais falsos para esse pedido Será chamado. - cabeçalhos.
Digite: objeto.
O parâmetro apareceu no jQuery-1.5 aqui você pode especificar cabeçalhos de consulta adicionais (cabeçalho). Os valores dessa configuração serão inseridos antes que a função Befesend seja chamada, na qual as alterações finais podem ser feitas nas manchetes. - ifmodificado
Tipo: valor lógico.
Quando você transfere essa configuração para True, a consulta será concluída com o status "bem-sucedido", somente se a resposta do servidor diferirem da resposta anterior. JQuery verifica este fato referindo-se ao último cabeçalho modificado. Começando com o jQuery-1.4, além do último modificado e 'ETAG' também é verificado (ambos são fornecidos pelo servidor e são necessários para notificar o navegador que os dados solicitados do servidor não são alterados da solicitação anterior). - islocal
Tipo: valor lógico.
O parâmetro apareceu no jQuery-1.5.1 permite que você defina o status da fonte de página local (como se tivesse acontecido via protocolo de arquivo), mesmo que o jQuery tenha reconhecido de outra forma. A biblioteca decide que a página está sendo executada localmente no caso dos seguintes protocolos: arquivo, * -extension e widget. Recomendado para definir o valor do parâmetro islocal globalmente - usando a função $ .ajaxsetup (), e não no configurações de consultas individuais de AJAX. - jsonp.
Digite: linha ou valor lógico.
Define o nome do parâmetro que é adicionado ao URL de solicitação JSONP (padrão, "Callback" é usado). Por exemplo, a configuração (JSONP: "OnJsonPload") é convertida para parte do URL da string "OnJsonpload \u003d?" . A partir da versão 1.5, a especificação neste parâmetro falso evita adicionar ao URL parâmetro adicional. Nesse caso, você precisa definir o valor de configuração do JSONPCallback. Por exemplo, isto é: (JSONP: FALSE, JSONPCALLACK: "CallbackName"). - jsonpcallback.
Digite: string ou função.
Define o nome da função que será chamada ao responder ao servidor na solicitação JSONP. Por padrão, o JQuery gera um nome arbitrário desse recurso, que é uma opção mais preferida que simplifica a operação da biblioteca. Uma das razões pelas quais é para especificar sua própria função de processamento de consulta JSONP é melhorar o cache de solicitações de obtenção.
Começando com JQuery-1.5, você pode especificar uma função neste parâmetro para processar a resposta do servidor. Nesse caso, a função especificada deve retornar os dados recebidos do servidor (na função especificada, estarão disponíveis no primeiro parâmetro). - método (padrão: "get")
Tipo: linha.
O parâmetro apareceu no jQuery-1.9.0 permite especificar o tipo de solicitação ao servidor ("post", "get", "colocar") - mimetype.
Tipo: linha.
O parâmetro apareceu no jQuery-1.5.1. Neste campo, você pode especificar o tipo de dados no qual a resposta do servidor é esperada em vez de XHR - senha.
Tipo: linha.
Senha para autenticação no servidor, se necessário. - processdata. (Padrão verdadeiro)
Tipo: valor lógico.
Por padrão, os dados transmitidos para o servidor são convertidos de um objeto na seqüência de consulta (formato de URL: fname1 \u003d value1 & fname2 \u003d valor2 e ...) e enviado como "aplicativo / x-www-form-urlencoded". Se você precisar enviar um documento Dom ou outros dados que não possam ser convertidos para definir a opção ProcessData em falso. - scriptrcharset.
Tipo: linha.
Aplica-se apenas para obter consultas do AJAX, o DataType pode ser ou "jsonp" ou "script". Se o servidor em um domínio de terceiros usa uma codificação diferente da sua, você deverá especificar uma codificação de um servidor de terceiros. - código de status.
Digite: objeto.
O parâmetro apareceu no jQuery-1.5.0 um conjunto de vapor, no qual os códigos de consulta são comparados com as funções que serão causadas. Por exemplo, para o código 404 (não existe), você pode desenhar uma mensagem para a tela:$ .AJAX (StatusCode: (404: Função () (alerta ("Página não encontrada");)));
$. Ajax ((
código de status: (
404: função () () ()
alerta ("página não encontrada");
} ) ;
Se a solicitação passasse com sucesso, então como parâmetro, função anônima Ele levará os mesmos parâmetros que as funções de uma execução bem-sucedida da consulta (especificada no parâmetro de sucesso) e, em caso de erro, o mesmo que as funções de erro. - sucesso (dados, textstatus, jqxhr)
Tipo: função, matriz.
A função que será chamada no caso de uma conclusão bem-sucedida da solicitação do servidor. Leva 3 argumentos:- dados (dados) enviados pelo servidor e pré-processamento;
- string com status de execução (textstatus);
- um objeto JQXHR (nas versões até 1.5 em vez de JQXHR usa xmlhttprequest). No jQuery 1.5, em vez de uma única função, esse parâmetro pode levar uma série de funções.
- tempo esgotado.
Tipo: Número.
Hora esperando por uma resposta do servidor em milissegundos. Reescreve configuração global O mesmo parâmetro em $ .ajaxsetup (). Se este tempo for excedido, a solicitação será concluída com um erro e o evento de erro ocorrerá, o que terá o status "Timeout".
O tempo está contando desde o momento de chamar a função $ .Ajax. Pode acontecer que neste momento várias outras solicitações serão lançadas e o navegador adiará a execução da solicitação atual. Nesse caso, o tempo limite pode ser concluído, embora, de fato, a solicitação nem sequer foi lançada.
No jQuery-1.4 e mais jovem, no final do tempo de espera, o objeto XMLHTTtPrequest mudará para o estado de erro e o acesso aos campos pode causar uma exceção. No Firefox 3.0+, o script e as consultas do JSONP não serão interrompidos quando o tempo de espera for excedido. Eles serão concluídos mesmo depois de expirar. - tradicional
Tipo: valor lógico.
Defina o valor desse parâmetro como true, a fim de usar os parâmetros tradicionais de conversão (serialização). - modelo(Padrão: "get")
Tipo: linha.
Método de parâmetro analógico. O parâmetro é usado em jQuery em 1,9.0 - uRL. (padrão: endereço da página atual)
Tipo: linha.
Define o endereço para o qual a solicitação será enviada. - nome do usuário.
Tipo: linha.
Nome de usuário para autenticação no servidor, se necessário. - xhr.(padrão: ActiveXObject no IE, o xmlhttprequest em outros navegadores)
Tipo: Função.
Uma função que fornecerá um objeto XMLHTTTPREQUEST. Por padrão, os navegadores IE este objeto é ActiveXObject e, em outros casos, é xmlhttprequest. Com este parâmetro, você pode implementar sua própria versão deste objeto. - xhrfields.
Digite: objeto.
O parâmetro apareceu no jQuery-1.5.1 um conjunto de pares (nome: sinal) para alterar / adicionar os valores dos campos correspondentes do ObjectXmlhttPrequest. Por exemplo, você pode definir sua propriedade WithCredentials em true, ao executar uma consulta CrossDomain:$ .AJAX ((URL: A_cross_domain_url, Xhrfields: (WithCredentials: true)));
$. Ajax ((
uRL: A_cross_domain_url,
xhrfields: (
withcredentials: verdadeiro.
} ) ;
Como mencionado acima, $ .Ajax () o método mais básico, e todos os métodos subseqüentes são apenas seu invólucro. Por parte, não há necessidade de chamar essa função, porque Existem alternativas de nível superior, como e. Eles são mais fáceis de compreender e usar, embora $ .Ajax () seja uma solução mais flexível.
A maneira mais fácil de usar será chamada de $ .ajax () sem especificar parâmetros:
$. Ajax (); |
Manipuladores de eventos.
Befesend, Error, DataFilter Settings, sucesso e preenchimento permitem instalar manipuladores de eventos que ocorram em determinados momentos de cada consulta AJAX.
- antes disso.ocorre imediatamente antes de enviar uma solicitação para o servidor;
- erro ocorre em caso de execução malsucedida da consulta;
- dataFilter. acontece no momento da chegada de dados do servidor. Permite que você lide com os dados "RAW" enviados pelo servidor;
- sucesso. ocorre no caso de uma conclusão bem-sucedida do pedido;
- completo.acontece em caso de qualquer conclusão do pedido. Sucesso: função () ()
- "XML" - O documento XML resultante estará disponível no formulário de texto. Você pode trabalhar com ele meios padrão jQuery (bem como com documento HTML).
- "HTML" - O HTML recebido estará disponível no formulário de texto. Se contiver scripts em tags
O número de algo no site do servidor2.ru -
alerta ( "Os dados foram enviados com sucesso".) ;
} ) ;
Atenção! As configurações discutidas acima.Success (), .Error () e-.pelate () foram adicionados ao jQuery-1.5, além dos métodos padrão de objeto diferidos.done (), .fail () i.then (), com O que você pode instalar manipuladores no entanto, começando com o jQuery-1.8, esses três métodos serão indesejáveis \u200b\u200bpara usar.
Tipo de dados
A função $ .Ajax () descobrirá sobre o tipo de servidor de dados enviados do próprio servidor (ferramentas MIME). Além disso, é possível especificar pessoalmente (esclarecer) como interpretar esses dados. Isso é feito usando o parâmetro. tipo de dados. Valores possíveis deste parâmetro: