ホームページ  >  記事  >  バックエンド開発  >  AJAX は JSONP を使用してクロスドメイン データ転送を実現します

AJAX は JSONP を使用してクロスドメイン データ転送を実現します

WBOY
WBOYオリジナル
2016-08-08 09:29:20942ブラウズ

少し前に、Webサイト上のIFRAME呼び出しを完全に削除したいと思い、ajax+jsonを使用して実装しようとしましたが、後で「No 'Access-Control-Allow-Origin」というメッセージが表示されることに気づきました' ヘッダーが存在します 「requested resource」エラー。ajax はドメインを越えることができないため、JSONP モードで実装されます。それは非常に簡単です:

1. クライアントのソース コード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>

<body>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
		var url = "http://192.168.1.102/index_szxx_ajax.php";
		$.ajax({
		  type: "get",
          async: false,
		  url: url,
		  dataType: "jsonp",
		  jsonp: "callback",
		  jsonpCallback:"infolist",
		  success: function infolist(data){//数据返回后的处理函数infolist
			  var backdata="";
			  for(var a in data){
				  for(var b in data[a]){
					  backdata=backdata+data[a][b]+"<br>";	
				  }
			  }
			  $("#backdata").html(backdata);
		}
	  });
});

</script>
<div id="backdata">正在查询...</div>
</body>
</html>

2. サーバー側のソース コードindex_szxx_ajax.php

りりー


上記は、コンテンツの側面を含めて、AJAX による JSONP の使用を紹介し、PHP チュートリアルに興味がある友人に役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。