ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript_jqueryにおけるjQuery、Ajax、JSONPの併用の詳細説明

JavaScript_jqueryにおけるjQuery、Ajax、JSONPの併用の詳細説明

WBOYオリジナル: 2016-05-16 15:45:141079ブラウズ

XMLHttpRequest を使用すると、ブラウザはページ全体を更新せずにサーバーと対話できます。これは、いわゆる Ajax (非同期 JavaScript および XML) です。 Ajax はユーザーに、より豊かなユーザーエクスペリエンスを提供できます。

Ajax リクエストは JavaScript によって駆動され、リクエストは JavaScript コードを通じて URL に送信され、サーバーから返された情報はコールバック関数で処理されます。リクエストとレスポンスを送信するプロセス全体が非同期であるため、ページ内の他の Javascript コードは、この期間中も中断されることなく実行され続けます。

jQuery は確かに Ajax に対する優れたサポートを提供しており、また、さまざまなブラウザー間の Ajax サポートにおける痛ましい違いを抽象化します。フル機能の $.ajax() メソッドだけでなく、$.get()、$.getScript()、$.getJSON()、$.post()、$().load などのその他の関数も提供します。 ()など簡単な方法です。

Ajax という名前ですが、多くの Ajax アプリケーション、特に jQuery Ajax アプリケーションは XML を使用せず、代わりにプレーンテキスト、HTML、および JSON (JavaScript) オブジェクト表記が使用されます。。

一般に、同一オリジンポリシー (同じプロトコル、同じドメイン名、同じポート) の制限により、JSONP (パディング付き JSON) などのソリューションを使用しない限り、Ajax はクロスドメインリクエストを実行できません。影響を受ける一部のリクエスト。クロスドメイン機能が制限されます。
Ajax に関するいくつかの重要な概念

GET と POST、これらはサーバーにリクエストを送信する最も一般的に使用される 2 つの方法です。これら 2 つの方法の違いを正しく理解することは、Ajax 開発にとって非常に重要です。

GET メソッドは通常、一部の非破壊操作 (つまり、サーバー上の情報を変更せずにサーバーから情報を取得するだけ) を実行するために使用されます。たとえば、検索クエリサービスは通常、GET リクエストを使用します。さらに、GET リクエストはブラウザによってキャッシュされることもあるため、予期せぬ問題が発生する可能性があります。一般に、GET リクエストはクエリ文字列を通じてのみサーバーにデータを送信できます。

POST メソッドは通常、サーバー上で何らかの破壊的な操作を実行する (つまり、サーバー上のデータを変更する) ために使用されます。たとえば、ブログ投稿を公開する場合は、POST リクエストを使用する必要があります。 GET リクエストとは異なり、POST リクエストにはキャッシュの問題がありません。 POST リクエストでは、URL の一部としてクエリ文字列をサーバーに送信することもできますが、この方法はすべてのデータを URL とは別に送信することはお勧めできません。

データ型。jQuery では通常、サーバーから返されるデータ型を指定する必要があります。場合によっては、そのデータ型が $.getJSON() などのメソッド名にすでに含まれている場合があります。それ以外の場合は、データ型がメソッド名として使用されます。 available 最終的に $.ajax() メソッドのパラメーターとして使用される、構成されたオブジェクトの一部。通常、データ型には次のものが含まれます:

テキスト: 単純な文字列を送信するために使用されるプレーンテキスト。
html: HTML の一部を送信するために使用されます。
スクリプト: ページにスクリプトを追加します。
json: 文字列、配列、またはオブジェクトを含めることができる、フォーマットされた JSON オブジェクトを送信します。
jsonp: 他のドメインから返された JSON データを送信するために使用されます。
xml: カスタマイズされた XML 形式のデータを送信するために使用されます。

非同期実行。Ajax の A は非同期を指します。この時点で、多くの jQuery 初心者にとって非同期とは何かを理解するのは難しいかもしれません。Ajax リクエストはデフォルトで非同期であり、サーバーから返された情報はすぐに利用できないためです。サーバーから返されたすべての情報は、コールバック関数でのみ処理できます。たとえば、次のコードは間違っています:

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

正しいアプローチは、サーバーから返されたデータをコールバック関数で処理することです。コールバック関数は、Ajax リクエストが正常に完了したときにのみ実行されます。

$.get('foo.php', function(response) { console.log(response); });

同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签却无此限制，它可以载入任何域下的脚本，jQuery 正是利用了这一点才得以拥有跨域执行 Ajax 的能力。

所谓 JSONP，就是其它域的服务端返回给我们的是 JavaScript 代码，这段代码可以被加载到 HTML 中的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签中，这段 JavaScript 代码中包含有从其它域下的服务端返回的 JSON 数据，并以回调函数的形式提供。这样一来 jQuery 就回避了同源策略的限制，曲线拥有了跨域执行 Ajax 的能力。

Ajax 调试工具，现在比较新的浏览器如 Chrome 和 Safari，甚至 IE 都内置了调试工具，Firefox 也有无比强大 FireBug 插件，借助于这些调试工具，可以非常详细的查看 Ajax 的执行过程。
和 Ajax 相关的一些方法

jQuery 提供了好多种简便的 Ajax 方法，但是它们的核心都是 $.ajax，所以必须正确理解 $.ajax。

jQuery 的 $.ajax 是创建 Ajax 请求中最直接也是最有效的方法，它的参数是一个 JavaScript 对象，我们可以在这个对象中对 Ajax 作非常详细的配置。另外，$.ajax 方法还可以分别定义 Ajax 请求成功和失败时的回调函数；而且它以一个可配置的对象作为参数的特性，使得我们可以在 Ajax 方法外配置这个对象，然后再传进来，这非常有助于实现代码复用。关于这个方法的详细文档：http://api.jquery.com/jQuery.ajax/

一个典型的示例如下：

$.ajax({
  // 要请求的 URL
  url : 'post.php',

  // 要发给服务端的数据
  // （将会转化为查询字符串，如：&#63;id=123）
  data : { id : 123 },

  // 定义此 Ajax 请求是 POST 还是 GET
  type : 'GET',

  // 服务端返回的数据类型
  dataType : 'json',

  // Ajax 成功执行时的回调函数；
  // 回调函数的参数即为服务端返回的数据
  success : function(json) {
    $('<h1/>').text(json.title).appendTo('body');
    $('<div class="content"/>')
      .html(json.html).appendTo('body');
  },

  // 如果 Ajax 执行失败；
  // 将返回原始错误信息以及状态码
  // 传入这个回调函数中
  error : function(xhr, status) {
    alert('Sorry, there was a problem!');
  },

  // 这里是无论 Ajax 是否成功执行都会触发的回调函数
  complete : function(xhr, status) {
    alert('The request is complete!');
  }
});

備考:

dataType について: ここで定義された dataType がサーバーから返されるデータ形式と異なる場合、コードの実行に失敗する可能性があります。HTTP から返されるステータスコードにはエラーが表示されないため、その理由を見つけるのは困難です。。したがって、Ajax リクエストを実行するときは、サーバーから返されるデータ形式が事前定義された定義と一致していることを確認する必要があります。通常、HTTP ヘッダー情報の Content-type を確認することが有効です。JSON の場合、対応する Content-type は application/json である必要があります。

$.ajax のいくつかのカスタマイズオプション

$.ajax メソッドには多くのカスタマイズオプションがあるため、このメソッドは非常に強力です。すべてのカスタマイズオプションを確認するには、公式ドキュメントを参照してください: http://api.jquery.com/jQuery.ajax/ 以下に、一般的に使用されるオプションのみを示します。

async: デフォルト値は true で、Ajax を同期的に実行する必要がある場合は、false に設定できます。この値を false に設定すると、Ajax リクエストが完了し、サーバーから返されたデータが受信されるまで、他の JavaScript コードが中断されることに注意してください。したがって、このオプションは注意して使用してください。

キャッシュ：サーバーから返信されたデータをキャッシュするかどうかを設定します。「script」と「jsonp」以外の形式のデータのデフォルト値は true です。 false に設定すると、サーバーにリクエストを送信するときに、各リクエストの URL が異なることを確認するために、クエリ文字列が URL に追加されます。存在しません。キャッシュに問題があります。 JavaScriptでタイムスタンプを取得するメソッドはnew Date().getTime()です。
Complete: Ajax リクエストが完了するとトリガーされるコールバック関数。このコールバック関数は、実行が成功したかどうかに関係なくトリガーされます。このコールバック関数は、サーバーから返された元の情報とステータスコードを受け入れることができます。
コンテキスト: コールバック関数が実行されるときのスコープを定義します (コールバック関数関数 {alert(this)} の中でこれが誰を指すのか?)。デフォルトでは、コールバック関数の this は、ラージオブジェクトである $.ajax メソッドに渡されるパラメータを指します。
データ: サーバーに送信されるデータの値は、オブジェクトまたはクエリ文字列 (foo=bar&baz=bim など) です。
DataType: サーバーから返されるデータのタイプ。このオプションを設定しない場合、jQuery はサーバーから返されたデータの MIME タイプに基づいて決定します。
Error: Ajax 実行エラーが発生したときにトリガーされるコールバック関数。この関数は元のリクエスト情報とステータスコードを受け取ります。
jsonp: JSONP リクエストを実行するときに指定する必要があるコールバック関数の名前。デフォルト値は「callback」です。
Success: Ajax が正常に実行されたときにトリガーされるコールバック関数。この関数では、サーバーから返された情報を取得できます (dataType が JSON に設定されている場合、返されるデータは JavaScript オブジェクトである必要があります)。もちろん、サーバーから返された元のデータ情報とステータスコードを取得することもできます。
タイムアウト: Ajax リクエストのタイムアウトをミリ秒単位で設定します。
タイプ: リクエストメソッド、GET または POST を指定します。デフォルト値は GET です。 PUT や DELETE などの他のメソッドも使用できますが、すべてのブラウザがそれらをサポートしているわけではありません。
url: リクエストされる URL。

url オプションは、すべてのオプションの中で唯一必須のオプションであり、他のオプションはオプションです。

いくつかの簡単な方法

それほど多くの構成可能なオプションが必要なく、Ajax 実行エラーの処理を気にしない場合、jQuery には、より簡潔な方法で Ajax リクエストを完了するための非常に便利なメソッドもいくつか用意されています。実際、これらの単純な記述方法は $.ajax をカプセル化し、特定のオプションを事前設定するだけです。

jQuery が提供する簡単なメソッドは次のとおりです:

上記の単純なメソッドのそれぞれに次のパラメータを渡すことができます:

url: 要求された URL を指定する必要があります。

データ: サーバーに送信されるデータ (オプション)。オブジェクトまたはクエリ文字列 (foo=bar&baz=bim など) を指定できます。

コールバック関数: このコールバック関数は、リクエストが正常に実行された後にトリガーされます。オプション。コールバック関数は、リクエストのステータスコードや元のオブジェクトなど、サーバーから返されたデータを受け取ります。

データ型: サーバーから返されるデータの型。オプション。

备注：此选项只适用于那些在其名称中没指定数据类型的方法。

下面是三个简便方法的示例：

// 获取纯文本或者 html
$.get('/users.php', { userId : 1234 }, function(resp) {
  console.log(resp);
});

// 向页面中添加脚本，然后执行脚本中定义的函数。
$.getScript('/static/js/myScript.js', function() {
  functionFromMyScript();
});

// 从服务端获取 JSON 格式的数据。
$.getJSON('/details.php', function(resp) {
  $.each(resp, function(k, v) {
    console.log(k + ' : ' + v);
  });
});

$.fn.load

$.fn.load 方法是 jQuery 所有 Ajax 方法中唯一在选择器结果集上调用的方法。$.fn.load 方法从给定的 URL 上获取信息，然后填充到选择器结果集包含的元素中。另外，在 URL 后面还可以附加一些选择器，jQuery 最终只会把跟选择器相匹配的内容填充到对应的 HTML 元素中。

下面是示例：

$('#newContent').load('/foo.html');

// 或
$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
 alert('加载完毕！');
});

Ajax 和表单

在跟表单打交道方面，jQuery 的 Ajax 更显神威。最为有用的两个方法就是 $.fn.serialize 和 $.fn.serializeArray，下面是它们的用法：

// 将表单中数据转化为查询字符串
$('#myForm').serialize();

$('#myForm').serializeArray();
// 将表单中数据转化为对象数组，如：
[
  { name : 'field1', value : 123 },
  { name : 'field2', value : 'hello world' }
]

使用 JSONP

JSON 的本质其实是一种跨站点脚本注入。现在有很多比较好的网站都提供了 JSONP 服务，允许我们用他们预先定义好的 API 获取他们的数据。下面是一个示例，来源于 http://www.giantflyingsaucer.com/blog/?p=2682

服务端代码：

<&#63;php
  header("content-type: text/javascript");

  if(isset($_GET['name']) && isset($_GET['callback'])) {
    $obj->name = $_GET['name'];
    $obj->message = "Hello " . $obj->name;

    echo $_GET['callback']. '(' . json_encode($obj) . ');';
  }
&#63;>

客户端代码：

$.ajax({
  url: 'http://otherDomail.com:8080/JSONP/jsonp-demo.php',
  data: {name: 'Super man'},
  dataType: 'jsonp',
  jsonp: 'callback',
  success: function( response ) {
    console.log( response.message );
  }
});

jQuery 把 JSONP 的实现细节隐藏在幕后，我们要做的就是告诉 jQuery 服务端定义好的函数名以及我们请求的数据类型是 JSONP，其它方面和普通的 Ajax 请求没什么区别。
Ajax 事件

很多时候我们都需要在 Ajax 请求开始或结束时做一些操作，例如显示或隐藏一个 loading… 图片。这些工作本可以在每个 Ajax 请求中各自实现，但是 jQuery 提供了更好的方法，你可以像绑定普通事件一样绑定 Ajax 事件。若要参阅全部事件列表，可访问 http://docs.jquery.com/Ajax_Events。下面是简单示例：

$('#loading_indicator')
  .ajaxStart(function() { $(this).show(); })
  .ajaxStop(function() { $(this).hide(); });

声明：

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

前の記事：オブジェクトが空かどうかを判断する Freemark メソッド_JavaScript スキル次の記事：オブジェクトが空かどうかを判断する Freemark メソッド_JavaScript スキル

続きを見る

JavaScript_jqueryにおけるjQuery、Ajax、JSONPの併用の詳細説明

関連記事