Ao encontrar problemas de domínio cruzado no desenvolvimento do projeto, eles geralmente são resolvidos através do JSONP. Mas o que é JSONP e qual é o princípio da implementação. Você pode estudá -lo com cuidado durante o tempo livre do projeto.
1. O que é jsonp?
Para entender o JSONP, tenho que mencionar o JSON, então o que é JSON?
JSON é um subconjunto da notação literal do objeto de JavaScript. Como o JSON é um subconjunto de JavaScript, ele pode ser usado no idioma sem muss ou barulho.
O JSONP (JSON com preenchimento) é um protocolo não oficial que permite que a integração de tags de script no lado do servidor retorne ao cliente, e o acesso ao domínio cruzado é alcançado através da forma de retorno de chamada JavaScript (esta é apenas uma implementação simples do JSONP).
2. Qual é a utilidade do JSONP?
Devido à limitação da política da mesma origem, o XmlHttPrequest permite apenas os recursos da fonte atual (nome de domínio, protocolo, porta). Para implementar solicitações de domínio cruzado, as solicitações de domínio cruzado podem ser implementadas por meio de tags de script e, em seguida, produzem dados JSON no servidor e executam funções de retorno de chamada, resolvendo assim solicitações de dados de domínio cruzado.
A geração de JSONP
1. Como todos sabemos, os recursos de solicitação do AJAX são restringidos pelo mesmo domínio, sejam eles recursos estáticos, páginas dinâmicas ou serviços da Web.
2. Ao mesmo tempo, descobrimos que, ao ligar para os arquivos JS na página da web, eles não são afetados pelos domínios cruzados (não apenas isso, também descobrimos que todas as tags com o atributo 'src' têm recursos de domínio cruzado, como <cript>, <mg>, <frame> etc.)
3. Pode -se imaginar que, atualmente, se você deseja acessar dados entre domínios através da Web (controles ActiveX, agentes do servidor, Websockets HTML5, etc.), existe apenas uma possibilidade, ou seja, o servidor carregará os dados em um arquivo de formato JS para ligar e processar
4. Transmissão de dados. Sabemos que um formato de dados de caracteres puro chamado JSON pode descrever concisamente estruturas de dados complexas e também é suportado nativamente pelo JS. Ele pode facilmente processar dados neste formato no cliente.
5. A solução é clara à primeira vista. O lado da Web chama os arquivos JS gerados dinamicamente no servidor de domínio cruzado da mesma maneira que o script de chamada. A razão pela qual o servidor deseja gerar arquivos JS dinamicamente é obter o nome da função de retorno de chamada do cliente e passar os dados exigidos pelo cliente no formato JSON (ou String Pure).
6. Depois que o cliente chama com sucesso o arquivo JS, os parâmetros na função de retorno de chamada são obtidos. O restante é o processamento dos dados. Esse método se parece muito parecido com o Ajax, mas não é o mesmo (o jQuery encapsula JSONP e AJAX juntos, e se você não entender, você o confundirá)
7. Para facilitar o cliente a usar dados, um protocolo informal de transmissão foi formado gradualmente. As pessoas chamam de JSONP. Um dos pontos -chave deste protocolo é permitir que os usuários passem um parâmetro de retorno de chamada para o servidor. Quando o servidor retornar dados, o parâmetro de retorno de chamada será usado como um nome de função para envolver os dados JSON, para que o cliente possa personalizar suas próprias funções para processar automaticamente os dados de retorno.
OK, eu não sei se você entende o JSONP. Caso contrário, vou resumir isso. Se você não tiver, não me bata.
De fato, o princípio é que o cliente solicita um link e adiciona os parâmetros necessários. O retorno de chamada significa que é uma solicitação JSONP (o front-end e o back-end podem ser unificados por si mesmos). O plano de fundo analisa o link de solicitação e descobre que é uma solicitação JSONP. Em seguida, gera um método de chamada e gera dinamicamente uma string (pode ser JSON ou String Pure) de acordo com os parâmetros de solicitação. Dessa forma, o cliente pode acessar os dados e executar o processamento subsequente.
Tendo dito muito, não é meu estilo não adicionar código, estou adicionando código. .
function test(data){console.log(data)}var url="http://www.x.com/test?a=1&callback=test"//pass the parameter a value of 1 to x.com/test, and tell him that the function name to be called is "test"//The background intercepts the callback, knowing that a calling method is to be generated, the method name is test, and the parameters are passed. O processamento em segundo plano gera o teste seguinte (Fictício) ("aaaaaaa") teste ({a: 1, b: 2}) // Então a extremidade frontal acessa e o executa através da tag de script, o script acima do script = document.createElement (''); script. script. document.getElementsByTagName ('Head') [0] .AppendChild (Script); // O método de teste da página será chamado, que é o princípio de implementação do JSONP.Sobre a realidade do JSONP em jQuery
$.ajax({type: "GET",url: "http://xdcn/asych/adv.html?loc=8&callBack=?",//Tell the background that this is a jsonp request, what method needs to be called? If it is "?", jq will automatically generate it for you (if you use jq, it is generally set to "?", so that the callback function of jq can be acionado no sucesso) Tipo: "post", // jsonp só pode enviar solicitações GET, mesmo se eu definir o tipo de solicitação como postDatype: "jsonp", // diga ao jQuery que são um dado jsonp, você precisa gerar script tags para carregar jsdata: {a: "1"},/*success: script (dados) {Datas) {Datas para o script para carregar JSDATA: {a: "1"},/*SUCCESS: função (Dados) {Dados) {Datas) {DataSeCt Tags para carregar JSData: {A: "1"},/*SUCCESS: função (Dados) {Data) {Datas). "?") $ ("corpo"). Anexe (dados);},*/erro: function (xmlhttprequest, textStatus, ertrorthrown) {//alert(errorthrown);} ).Done(function(data) (perfild foneira);Depois de ler o código e os comentários acima, acredito que todo mundo o entende. Embora o jQuery encapsule o JSONP no Ajax, ele é essencialmente diferente.
O núcleo do AJAX é obter conteúdo diferente desta página através do XMLHTTPREQUEST, enquanto o núcleo do JSONP é adicionar dinamicamente tags <Script> para chamar os scripts JS fornecidos pelo servidor.
Portanto, a diferença entre Ajax e JSONP não é se ele é o domínio cruzado. O AJAX também pode atingir o domínio cruzado através do proxy do lado do servidor, e o próprio JSONP não exclui a aquisição de dados no mesmo domínio.
Como mencionado acima, os formatos de dados de JSONP e AJAX não precisam ser JSON, mas também podem ser strings puros.
Em resumo, o JSONP não é um subconjunto de Ajax e, mesmo que o jQuery encapsule o JSONP no Ajax, não pode mudar isso.
O exposto acima é uma explicação detalhada do exemplo de solicitação de domínio cruzado do JSOP introduzido a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!