クロスドメインリクエスト: jQuery の ajax jsonp 使用ソリューション-jsチュートリアル-php.cn

クロスドメインリクエスト: jQuery の ajax jsonp 使用ソリューション

高洛峰

リリース： 2017-01-12 09:45:32

オリジナル

894 人が閲覧しました

error メソッドを直接実行するとエラーが発生しました。ajax jsonp はこれまで使用されたことがなく、その理解は通常の ajax リクエストと同様であり、何度かデバッグした後にこのエラーが発生しました。（バックグラウンドコードとJSパーツのプロパティ設定を確認してください）それでも動作しないため、非常に驚き、困惑しています。そこで、ajax jsonp の使用法を注意深く研究し、最終的に成功したテストの学習体験をみんなと共有することにしました
まず、正常に実行できるコードを投稿します:
(ページ部分)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$.ajax({ 
type : "get", 
async:false, 
url : "ajax.ashx", 
dataType : "jsonp", 
jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) 
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 
success : function(json){ 
alert(json); 
alert(json[0].name); 
}, 
error:function(){ 
alert(&#39;fail&#39;); 
} 
}); 
var a="firstName Brett"; 
alert(a); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

ログイン後にコピー

(ハンドラー部分)

<%@ WebHandler Language="C#" Class="ajax" %> 
using System; 
using System.Web; 
public class ajax : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
string callbackFunName = context.Request["callbackparam"]; 
context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )"); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

ログイン後にコピー

ajax リクエストパラメーターの説明:
dataType String
サーバーによって返されることが予期されるデータ型。指定しない場合、jQuery は HTTP パッケージの MIME 情報に基づいて自動的にインテリジェントな判断を行います。たとえば、XML の MIME タイプは XML として認識されます。 1.4 では、JSON が JavaScript オブジェクトを生成し、script がスクリプトを実行します。サーバーから返されたデータは、この値に基づいて解析され、コールバック関数に渡されます。使用可能な値:
"xml": jQuery で処理できる XML ドキュメントを返します。
"html": プレーンテキストの HTML 情報を返します。含まれているスクリプトタグは、DOM に挿入されると実行されます。
"script": プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。「キャッシュ」パラメータが設定されていない限り。 ''''注意:''''リモートリクエスト (同じドメインの下ではない) を行う場合、すべての POST リクエストは GET リクエストに変換されます。 (読み込みにDOMスクリプトタグを使用するため)
"json": JSONデータを返します。
「jsonp」: JSONP形式。「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出すと、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。
"text": プレーンテキスト文字列を返します。
jsonp String
jsonp リクエスト内のコールバック関数の名前を書き換えます。この値は、「callback=?」などの GET または POST リクエストの URL パラメーターの「callback」部分を置換するために使用されます。たとえば、{jsonp:'onJsonPLoad'} は「onJsonPLoad=?」に渡されます。サーバー。
jsonpCallback String
jsonpリクエストのコールバック関数名を指定します。この値は、jQuery によって自動的に生成されるランダムな関数名の代わりに使用されます。これは主に、jQuery が固有の関数名を生成できるようにして、リクエストの管理やコールバック関数とエラー処理の提供を容易にするために使用されます。ブラウザで GET リクエストをキャッシュする場合は、このコールバック関数名を指定することもできます。
ajax jsonp と通常の ajax リクエストの主な違いは、リクエストの応答結果の処理です。上記のコードに示されている応答結果は次のとおりです:
success_jsonpCallback([ { name: "John"} ] ); ————実際には、jsonp コールバック関数 success_jsonpCallback を呼び出し、応答する文字列または json をこのメソッドに渡します。 (パラメータ値として)、その基礎となる実装の大まかな推測は次のようになります:

function success_jsonpCallback(data) 
{ 
success(data); 
}

ログイン後にコピー

jQuery の ajax jsonp の使用に関するクロスドメインリクエストと関連記事の詳細については、PHP の中国語 Web サイトに注目してください。