JavaScript_jquery에서 jQuery, Ajax 및 JSONP의 공동 사용에 대한 자세한 설명

XMLHttpRequest의 도움으로 브라우저는 전체 페이지를 새로 고치지 않고도 서버와 상호 작용할 수 있습니다. 이것이 바로 Ajax(Asynchronous JavaScript and XML)입니다. Ajax는 사용자에게 더욱 풍부한 사용자 경험을 제공할 수 있습니다.

Ajax 요청은 JavaScript 코드를 통해 URL로 전송됩니다. 서버가 응답하면 콜백 함수에서 서버가 반환한 정보를 처리할 수 있습니다. 요청과 응답을 보내는 전체 프로세스는 비동기식이므로 이 기간 동안 페이지의 다른 Javascript 코드는 중단 없이 계속 실행됩니다.

jQuery는 확실히 Ajax에 대한 훌륭한 지원을 제공하며 다양한 브라우저 간의 Ajax 지원에 대한 고통스러운 차이점도 추상화합니다. 모든 기능을 갖춘 $.ajax() 메소드뿐만 아니라 $.get(), $.getScript(), $.getJSON(), $.post() 및 $().load와 같은 추가 기능도 제공합니다. () 등 간단한 방법입니다.

Ajax라고 명명되었지만 많은 Ajax 애플리케이션은 XML을 사용하지 않습니다. 특히 jQuery Ajax 애플리케이션은 대부분 XML을 사용하지 않고 일반 텍스트, HTML 및 JSON(JavaScript) 객체 표기법과 같이 더 일반적으로 사용됩니다. .

일반적으로 동일 출처 정책(동일 프로토콜, 동일 도메인 이름, 동일 포트)의 제한으로 인해 Ajax는 JSONP(JSON with Padding)와 같은 솔루션을 사용하지 않는 한 도메인 간 요청을 수행할 수 없습니다. 일부 영향을 받은 요청. 도메인 간 기능이 제한되었습니다.
Ajax에 대한 몇 가지 중요한 개념

GET과 POST는 서버에 요청을 보내는 데 가장 일반적으로 사용되는 두 가지 방법입니다. 이 두 가지 방법의 차이점을 올바르게 이해하는 것은 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는 비동기를 의미합니다. 이 시점에서는 Ajax 요청이 기본적으로 비동기식이고 서버에서 반환된 정보를 즉시 사용할 수 없기 때문에 많은 jQuery 초보자가 비동기식이 무엇인지 이해하기 어려울 수 있습니다. 서버에서 반환된 모든 정보는 콜백 함수에서만 처리할 수 있습니다. 예를 들어 다음 코드는 잘못되었습니다.

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 的 <script> 标签却无此限制，它可以载入任何域下的脚本，jQuery 正是利用了这一点才得以拥有跨域执行 Ajax 的能力。</script>

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

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',

  // 要发给服务端的数据
  // （将会转化为查询字符串，如：?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 요청이 완료되면 실행되는 콜백 함수입니다. 이 콜백 함수는 실행 성공 여부에 관계없이 실행됩니다. 이 콜백 함수는 서버가 반환한 원본 정보와 상태 코드를 받아들일 수 있습니다.
Context: 콜백 함수가 실행될 때 범위를 정의합니다(콜백 함수 {alert(this)}가 가리키는 콜백 함수에서 이 작업을 수행하는 사람은 누구입니까?). 기본적으로 콜백 함수의 이 항목은 대형 개체인 $.ajax 메서드에 전달된 매개 변수를 가리킵니다.
데이터: 서버로 전송될 데이터는 객체 또는 foo=bar&baz=bim과 같은 쿼리 문자열일 수 있습니다.
DataType: 서버가 반환하는 데이터 유형입니다. 이 옵션을 설정하지 않으면 jQuery는 서버에서 반환된 데이터의 MIME 유형을 기반으로 이를 결정합니다.
오류: Ajax 실행 오류가 발생할 때 트리거되는 콜백 함수입니다. 이 함수는 원래 요청 정보와 상태 코드를 받아들입니다.
jsonp: JSONP 요청을 실행할 때 지정해야 하는 콜백 함수의 이름입니다. 기본값은 "callback"입니다.
성공: Ajax가 성공적으로 실행될 때 트리거되는 콜백 함수입니다. 함수에서는 서버가 반환한 정보를 얻을 수 있습니다. (dataType이 JSON으로 설정된 경우 반환된 데이터는 JavaScript 객체여야 합니다.) 물론 서버가 반환한 원본 데이터 정보와 상태 코드도 얻을 수 있습니다.
시간 초과: Ajax 요청에 대한 시간 초과를 밀리초 단위로 설정합니다.
유형: 요청 방법을 GET 또는 POST로 지정합니다. 기본값은 GET입니다. PUT 및 DELETE와 같은 다른 방법도 사용할 수 있지만 모든 브라우저가 이를 지원하는 것은 아닙니다.
url: 요청할 URL입니다.

url 옵션은 모든 옵션 중 유일한 필수 옵션이며, 나머지 옵션은 선택사항입니다.
간단한 방법

구성 가능한 옵션이 너무 많이 필요하지 않고 Ajax 실행 오류 처리에 신경 쓰지 않는 경우 jQuery는 Ajax 요청을 보다 간결한 방식으로 완료할 수 있는 매우 유용하고 편리한 방법도 제공합니다. 실제로 이러한 간단한 작성 방법은 $.ajax를 캡슐화하고 특정 옵션을 미리 설정하는 것뿐입니다.

jQuery에서 제공하는 간단한 메소드는 다음과 같습니다.

• $.get: 지정된 URL에 대해 GET 요청을 수행합니다.
• $.post: 지정된 URL에 대해 POST 요청을 수행합니다.
• $.getScript: 페이지에 스크립트를 추가합니다.
• $.getJSON: GET 요청을 실행하며, 서버에서 반환하는 정보는 JSON이어야 합니다.

위의 각 간단한 메소드에는 다음 매개변수가 전달될 수 있습니다.

url: 요청한 URL을 제공해야 합니다.
데이터: 서버로 전송되는 데이터(선택 사항) foo=bar&baz=bim과 같은 객체 또는 쿼리 문자열일 수 있습니다.

• 참고: $.getScript에는 이 옵션을 사용할 수 없습니다.

콜백 함수: 이 콜백 함수는 요청이 성공적으로 실행된 후에 실행됩니다. 선택 과목. 콜백 함수는 요청의 상태 코드와 원본 개체를 포함하여 서버가 반환한 데이터를 받아들입니다.
데이터 유형: 서버가 반환하는 데이터 유형입니다. 선택 과목.

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

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

// 获取纯文本或者 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(); });