jsonp クロスドメインリクエストの概要-jsチュートリアル-php.cn

jsonp クロスドメインリクエストの概要

零下一度

リリース： 2017-07-16 15:22:24

オリジナル

1415 人が閲覧しました

この記事では主にjsonpクロスドメインリクエストの関連情報を詳しく紹介し、ブラウザのクロスドメインリクエストをサポートするためにすべてのインターフェースのカプセル化を有効にし、一定の参考値を持っています。

別の説明:

1. JSONP:

直感的な理解:

は、クライアント上で関数を動的に登録することです

function a(data)。その後、関数名をサーバーに渡し、サーバーはa({/ *json*/}) をクライアントに渡して実行し、クライアントの

関数 a(data) を呼び出します。これにより、

誕生の背景: Ajax は、通常のファイルを直接リクエストします。この問題は、静的ページ、動的 Web ページ、Web サービス、WCF のいずれであっても、クロスドメイン要求である限り機能しません。

2. ただし、Web ページで js ファイルを呼び出す場合は影響を受けません。

3. さらに、Src 属性を持つすべてのタグには次のようなクロスドメイン機能があることがわかりました。 ;iframe>

4. したがって、現時点で純粋な Web 側 (ActiveX コントロール、サーバー側プロキシ、将来の HTML5 に属する WebSocket などは含まれません) を介してデータにクロスドメインにアクセスしたい場合は、次のことしかできません。次の方法を使用します。つまり、リモートサーバーは、クライアントの呼び出しとさらなる処理のためにデータを js 形式のテキストにロードしようとします。

5. JSON は純粋な文字データ形式であり、js でネイティブにサポートできます。

6. 解決策は次のとおりです。Web クライアントは、スクリプトを呼び出すのとまったく同じ方法で、クロスドメインサーバー上で動的に生成された js 形式ファイル (通常は接尾辞として json が付きます) を呼び出します。

7. クライアントが json ファイルを正常に呼び出すと、必要なデータが取得され、残りは独自のニーズに従って処理されます。

クライアントが

data を使用できるようにするために、jsonp と呼ばれる非公式の送信プロトコルが徐々に形成されてきました。このプロトコルの重要な点は、ユーザーがコールバックパラメーターをサーバーに渡すことを許可し、サーバーがデータを返すときに、このコールバックパラメーターを関数名として使用して JSON データをラップし、クライアントがそのデータをカスタマイズできるようにすることです。返されたデータを処理する独自の関数。具体的な実装:

jQuery、extjs、または jsonp をサポートする他のフレームワークであっても、舞台裏で行われる作業は同じです。クライアントでの jsonp の実装をステップごとに説明します:

1.クロスドメイン js ファイル内のコード (もちろん Web スクリプトのセキュリティポリシーに準拠している) であっても、Web ページは無条件に実行される可能性があることがわかっています。

remoteserver.com のルートディレクトリには、remote.js ファイルがあります。コードは次のとおりです:

alert('I am

remote file

');特に言うことはありません。コアコードを参照してください

1. クラスを定義し、MappingJackson2HttpMessageConverter を継承し、writeInternal メソッドを書き換えて、メソッドにコールバックパラメーターがあるかどうかを判断します。存在する場合、データは括弧で囲まれ、その値が返されます。コールバックパラメータが返されます。

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.http.HttpOutputMessage;
import org.springframework.http.converter.HttpMessageNotWritableException;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import com.fasterxml.jackson.core.JsonEncoding;
import com.fasterxml.jackson.core.JsonProcessingException;

public class CallbackMappingJackson2HttpMessageConverter extends MappingJackson2HttpMessageConverter {

 // 做jsonp的支持的标识，在请求参数中加该参数
 private String callbackName;

 @Override
 protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException,
   HttpMessageNotWritableException {
  // 从threadLocal中获取当前的Request对象
  HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder
    .currentRequestAttributes()).getRequest();
  String callbackParam = request.getParameter(callbackName);
  if (StringUtils.isEmpty(callbackParam)) {
   // 没有找到callback参数，直接返回json数据
   super.writeInternal(object, outputMessage);
  } else {
   JsonEncoding encoding = getJsonEncoding(outputMessage.getHeaders().getContentType());
   try {
    String result = callbackParam + "(" + super.getObjectMapper().writeValueAsString(object)
      + ");";
    IOUtils.write(result, outputMessage.getBody(), encoding.getJavaName());
   } catch (JsonProcessingException ex) {
    throw new HttpMessageNotWritableException("Could not write JSON: " + ex.getMessage(), ex);
   }
  }

 }

 public String getCallbackName() {
  return callbackName;
 }

 public void setCallbackName(String callbackName) {
  this.callbackName = callbackName;
 }

}

ログイン後にコピー

2. Java Bean を定義し、リクエストがコールバックパラメーターをもたらす場合は、MappingJackson2HttpMessageConverter クラスの riteInternal メソッドが呼び出されるように、クラスのスキャンパスを変更することに注意してください。 callbackValue('data') の形式データはフロントエンドに返されます。

<!-- 定义注解驱动 -->
 <mvc:annotation-driven>
  <mvc:message-converters register-defaults="true">
   <bean
    class="xxx.xxx.xxx.CallbackMappingJackson2HttpMessageConverter">
    <property name="callbackName" value="callback" />
   </bean>
  </mvc:message-converters>
 </mvc:annotation-driven>

ログイン後にコピー

3. フロントエンドは、

jquery でカプセル化された ajax

を通じて呼び出され、キーコードは赤でマークされています

。

以上がjsonp クロスドメインリクエストの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。