아약스 기능이란 무엇입니까?

ajax 기능은 다음과 같습니다: 1. "$(selector).load()", 선택한 요소에 원격 데이터를 로드하는 데 사용됨 2. "$.ajax()" 3. "$.get() "; . "$.post()"; 5. "$.getJSON()"; 6. "$.getScript()".

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

AJAX 요청 기능

Request	Description
$(selector).load(url,data,callback)	원격 데이터를 선택한 요소에 로드
$ .ajax( 옵션)	XMLHttpRequest 개체에 원격 데이터 로드
$.get(url,data,callback,type)	HTTP GET을 사용하여 원격 데이터 로드
$.post(url, data, callback, 유형)	HTTP POST를 사용하여 원격 데이터 로드
$.getJSON(url,data,callback)	HTTP GET을 사용하여 원격 JSON 데이터 로드
$.getScript(url,callback )	Load 원격 JavaScript 파일을 실행합니다

(url) 로드되는 데이터의 URL(주소)

(data) 서버로 전송되는 데이터의 키/값 객체

(콜백) 데이터가 로드되면 함수가 실행됨

(유형) 반환됩니다. 데이터 유형(html, xml, json, jasonp, script, text)

(옵션) 전체 AJAX 요청

One, $.get(url,[data], [콜백] )

설명: url은 요청 주소이고, data는 요청된 데이터의 목록이며, callback은 요청이 성공한 후의 콜백 함수입니다. 이 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 반환된 데이터입니다. 두 번째 매개변수는 서버의 상태이며 선택적 매개변수입니다.

그리고 그 중 서버에서 반환하는 데이터의 형식은 실제로 우리가 원하는 json 데이터 형식이 아닌 문자열 형식입니다. 단지 비교와 설명을 위해 여기에 인용했습니다

$.get("data.php",$("#firstName.val()"),function(data){
$("#getResponse").html(data); }//返回的data是字符串类型
);

두 번째, $.post (url,[data],[ 콜백],[type])

설명: 이 함수는 $.get() 매개변수와 유사하며 추가 유형 매개변수가 있으며 유형은 요청입니다. 데이터 유형은 html, xml, json 및 기타 유형일 수 있습니다. 이 매개변수를 json으로 설정하면 반환되는 형식은 json 형식이 됩니다. $.get()에서 반환되는 형식은 동일하며 둘 다 문자열

$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的
);

Three, $.ajax(opiton)

설명: $.ajax() 함수는 강력하며 ajax에서 많은 정확한 작업을 수행할 수 있습니다. 컨트롤, 자세한 설명이 필요하시면 관련 내용을 참고해주세요

$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});

Four, $.getJSON(url,[data],[callback])

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//无需设置，直接获取的数据类型为json，所以调用时需要使用jsonData.id方式
);

Ajax가 jQuery를 만났을 때 AJAX 기반 애플리케이션이 점점 더 많아지고 있으며 프런트엔드 개발자의 경우 기본 HTTPRequest를 직접 처리하는 것은 즐거운 일이 아닙니다. jQuery는 캡슐화되어 있으므로 JavaScript, AJAX 애플리케이션의 문제도 고려했을 것입니다. 실제로 jQuery를 사용하여 AJAX를 작성하면 JS에서 직접 작성하는 것보다 N배 더 편리할 것입니다. (저는 jQuery를 어떻게 사용하는지 모릅니다. JS에 대한 지식을 잃게 될까요...) 모든 사람이 이미 jQuery 구문에 익숙하다고 가정하므로 ajax의 일부 응용 프로그램을 요약해 보겠습니다.

정적 페이지 로드

load( url, [data], [callback] );
url(문자열) 요청된 HTML 페이지의 URL 주소
data(맵)(선택적 매개변수) 서버로 전송되는 키 /value data
callback(콜백)(선택적 매개변수) 요청이 완료될 때의 콜백 함수(성공할 필요는 없음)

load() 메소드는 정적 페이지 콘텐츠를 지정된 jQuery 객체로 쉽게 로드할 수 있습니다.

$('#ajax-p').load('data.html');

이런 방식으로 data.html의 내용이 ID ajax-p를 사용하여 DOM 개체에 로드됩니다.

$('#ajax-p').load('data.html#my-section');

GET 및 POST 메서드 구현

get( url, [data], [callback] )

• url(문자열) 요청을 보낼 URL 주소

• data와 같이 ID를 지정하여 콘텐츠의 일부를 로드하는 Ajax 작업을 구현할 수도 있습니다. (Map)( 선택 매개변수) 서버로 보낼 데이터는 키/값 쌍으로 표현되어 요청 URL에 QueryString

• callback(콜백)(선택 매개변수) 콜백 함수로 추가됩니다. 로딩 성공 (이 메소드는 Response의 반환 상태가 성공일 때만 호출됩니다.)
  

분명히 GET 메소드를 구체적으로 구현한 함수이고 사용이 매우 간단합니다

$.get('login.php', {
   id      : 'Robin',
   password: '123456',
   gate    : 'index'
  }, function(data, status) {
   //data为返回对象，status为请求的状态
   alert(data);
   //此时假设服务器脚本会返回一段文字"你好，Robin！"，
那么浏览器就会弹出对话框显示该段文字
   alert(status);
   //结果为success, error等等，但这里是成功时才能运行的函数
  });

post( url, [data], [callback], [type] )

• url ( String) 요청 URL 주소를 전송합니다.
  

• data(Map)(선택 매개변수) 서버로 전송할 데이터, 키/값 쌍

• callback(콜백)(선택) 형식으로 표현됩니다. 매개변수) 성공적으로 로딩된 콜백 함수 (Response의 반환 상태가 성공인 경우에만 이 메소드가 호출됨)

• type(String) (선택 매개변수) 요청한 데이터의 유형, xml, text, json 등

도 jQuery에서 제공됩니다. 간단한 함수, 실제 사용법

$.post('regsiter.php', {
   id:'Robin',
   password: '123456',
   type:'user'
  },function(data, status) {
   alert(data);
  }, "json");

이벤트 기반 스크립트 로딩 함수: getScript()

getScript( url, [callback] )

• url(String) 로드할 JS 파일 주소

• callback(함수) (선택 사항) 성공적으로 로드되었습니다. 콜백 함수
  

getScript() 함수를 입력하면 원격으로 JavaScript 스크립트를 로드하고 실행할 수 있습니다. 이 기능은 도메인 로딩 JS 파일(마법...?!) 이 기능의 중요성은 엄청납니다 예, 페이지가 초기화될 때 해당 JS 파일을 모두 로드하는 대신 사용자 상호 작용을 기반으로 해당 JS 파일을 로드할 수 있기 때문에 페이지의 초기 로드를 위한 코드 양을 크게 줄일 수 있습니다.

$.getScript('ajaxEvent.js', function() {
   alert("Scripts Loaded!");
   //载入ajaxEvent.js，并且在成功载入后显示对话框提示。
  });

데이터 통신을 위한 브리지 구축: getJSON()

getJSON(url,[data],[callback])

• url(문자열) 요청 주소 보내기

• data(지도)(선택 사항) 전송할 키/값 매개변수

• 콜백(함수 ) (선택사항) 로딩 성공 시 콜백 함수입니다.
  

JSON은 JavaScript 또는 기타 호스트 언어와 잘 통합될 수 있는 이상적인 데이터 전송 형식입니다. 언어이며 JS에서 직접 사용할 수 있습니다. 기존 방식과 비교하여 JSON 사용 GET 및 POST는 구조적으로 더 합리적이고 안전한 "누드" 데이터를 직접 보냅니다. jQuery의 getJSON() 함수는 JSON 매개변수만 설정합니다. ajax() 함수의 단순화된 버전입니다. 이 함수는 여러 도메인에서 사용할 수도 있으며 get() 및 post()에 비해 몇 가지 장점이 있습니다. 또한 이 함수는 요청 URL을 작성하여 작성할 수 있습니다. "myurl?callback=X" 형식으로 프로그램이 콜백 함수 X를 실행하도록 합니다.

$.getJSON('feed.php',{
   request: images,
   id:      001,
   size:    large
   }, function(json) {
    alert(json.images[0].link);
    //此处json就是远程传回的json对象，假设其格式如下：
    //{'images' : [
    // {link: images/001.jpg, x :100, y : 100},
    // {link: images/002.jpg, x : 200, y 200:}
    //]};
   }
 );

하위 수준 ajax() 함수

get() 및 post() 함수는 매우 간단하고 사용하기 쉽지만 Ajax가 전송될 때 서로 다른 시간에 서로 다른 작업을 수행하는 등 더 복잡한 디자인 요구 사항을 충족할 수는 없습니다. jQuery는 좀 더 구체적인 기능인 ajax()를 제공합니다.

ajax( options )

ajax()는 많은 수의 매개변수를 제공하므로 상당히 복잡한 기능을 구현할 수 있습니다.

error이 메서드에는 XMLHttpRequest 개체, 오류 메시지 및 (아마도) 캡처된 오류 개체라는 세 가지 매개 변수가 있습니다. globalifModifiedBoolean(기본값: false) 서버 데이터가 변경될 때만 새 데이터를 가져옵니다.

매개변수 이름	Type	Description
url	String	(기본값: 현재 페이지 주소) 요청을 보낼 주소입니다.
type	String	(기본값: "GET") 요청 방법("POST" 또는 "GET"), 기본값은 "GET"입니다. 참고: PUT 및 DELETE와 같은 다른 HTTP 요청 방법도 사용할 수 있지만 일부 브라우저에서만 지원됩니다.
timeout	Number	요청 시간 초과(밀리초)를 설정합니다. 이 설정은 전역 설정보다 우선 적용됩니다.
async	Boolean	(기본값: true) 기본적으로 모든 요청은 비동기 요청입니다. 동기 요청을 보내야 하는 경우 이 옵션을 false로 설정하세요. 동기 요청은 브라우저를 잠그므로 사용자는 다른 작업을 수행하기 전에 요청이 완료될 때까지 기다려야 합니다.
beforeSend	Function	요청을 보내기 전에 사용자 정의 HTTP 헤더를 추가하는 등 XMLHttpRequest 객체의 기능을 수정할 수 있습니다. XMLHttpRequest 객체가 유일한 매개변수입니다. function (XMLHttpRequest) { this; // 이 Ajax 요청에 대한 옵션 } function (XMLHttpRequest) { this // 이 Ajax 요청에 대한 옵션; }
cache	Boolean	(기본값: true) jQuery 1.2의 새로운 기능인 false로 설정하면 브라우저 캐시에서 요청 정보를 로드하지 않습니다.
complete	Function	요청 완료 후 콜백 함수(요청 성공 또는 실패 시 호출). 매개변수: XMLHttpRequest 객체, 성공 정보 문자열. function (XMLHttpRequest, textStatus) { // 이에 대한 옵션; ajax 요청 } function (XMLHttpRequest, textStatus) { this // 이 ajax 요청에 대한 옵션 }
contentType	String	(기본값: "application/x-www-form-urlencoded") 서버에 정보를 보낼 때 콘텐츠 인코딩 유형입니다. 기본값은 대부분의 애플리케이션에 적합합니다.
data	Object, String	데이터가 서버로 전송되었습니다. 요청 문자열 형식으로 자동 변환됩니다. GET 요청의 URL에 추가됩니다. 이 자동 변환을 비활성화하려면 processData 옵션 설명을 참조하세요. 키/값 형식이어야 합니다. 배열인 경우 jQuery는 자동으로 동일한 이름을 다른 값에 할당합니다. 예를 들어, {foo:["bar1", "bar2"]}는 '&foo=bar1&foo=bar2′로 변환됩니다.
dataType	String	서버에서 반환할 것으로 예상되는 데이터 유형입니다. 지정하지 않으면 jQuery는 HTTP 패킷 MIME 정보를 기반으로 responseXML 또는 responseText를 자동으로 반환하고 이를 콜백 함수 매개 변수로 전달합니다. 사용 가능한 값: "xml": jQuery에서 처리할 수 있는 XML 문서를 반환합니다. "html": 스크립트 요소가 포함된 일반 텍스트 HTML 정보를 반환합니다. "script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. "json": JSON 데이터를 반환합니다. "jsonp": JSONP 형식. JSONP 형식을 사용하여 함수를 호출할 때 예: "myurl?callback=?" jQuery는 자동으로 ?를 올바른 함수 이름으로 대체하여 콜백 함수를 실행합니다.
Function	(기본값: 자동 판단(xml 또는 html)) 이 메서드는 요청이 실패할 때 호출됩니다.	함수(XMLHttpRequest, textStatus, errorThrown) { // 일반적으로 textStatus 및 errorThown 중 하나만 값을 갖습니다. // 이 ajax에 대한 옵션입니다. 요청 } 함수(XMLHttpRequest, textStatus, errorThrown) { // 일반적으로 textStatus 및 errorThown 중 하나만 값을 갖습니다. // 이 ajax에 대한 옵션입니다. request }
Boolean	(기본값: true) 전역 AJAX 이벤트를 실행할지 여부입니다. false로 설정하면 ajaxStart 또는 ajaxStop과 같은 전역 AJAX 이벤트가 트리거되지 않습니다. 다양한 Ajax 이벤트를 제어하는 ​​데 사용할 수 있습니다
	HTTP 패킷의 마지막 수정 헤더 정보를 사용하여 확인하세요.
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

你可以指定xml、script、html、json作为其数据类型，可以为beforeSend、error、sucess、complete等状态设置 处理函数，众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中，我们用ajax()来调用一个XML文档：

$.ajax({
    url: 'doc.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        alert(xml);
  //此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点，
和用jQuery操作HTML对象没有区别
    }
});

进一步了解AJAX事件

前面讨论的一些方法都有自己的事件处理机制，从页面整体来说，都只能说是局部函数。jQuery提供了AJAX全局函数的定义，以满足特殊的需求。下面是jQuery提供的所有函数（按照触发顺序排列如下）：

• ajaxStart
  (全局事件) 开始新的Ajax请求，并且此时没有其他ajax请求正在进行

• beforeSend
  (局部事件) 当一个Ajax请求开始时触发。如果需要，你可以在这里设置XMLHttpRequest对象

• ajaxSend
  (全局事件) 请求开始前触发的全局事件

• success
  (局部事件) 请求成功时触发。即服务器没有返回错误，返回的数据也没有错误

• ajaxSuccess
  全局事件全局的请求成功

• error
  (局部事件) 仅当发生错误时触发。你无法同时执行success和error两个回调函数

• ajaxError
  全局事件全局的发生错误时触发

• complete
  (局部事件) 不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件

• ajaxComplete
  全局事件全局的请求完成时触发

• ajaxStop
  (全局事件) 当没有Ajax正在进行中的时候，触发
  局部事件在之前的函数中都有介绍，我们主要来看看全局事件。对某个对象进行全局事件监听，那么全局中的AJAX动作，都会对其产生影响。比如，当页面在进行AJAX操作时，ID为”loading”的p就显示出来：

$("#loading").ajaxStart(function(){
   $(this).show();
 });

全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。有必要指出，全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况：

$("#msg").beforeSend(function(e,xhr,o) {
 $(this).html("正在请求"+o.url);
 }).ajaxSuccess(function(e,xhr,o) {
 $(this).html(o.url+"请求成功");
 }).ajaxError(function(e,xhr,o) {
 $(this).html(o.url+"请求失败");
});

很显然，第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。 在单个AJAX请求时，你可以将global的值设为false，以将此请求独立于AJAX的全局事件。

$.ajax({
   url: "request.php",
   global: false,
   // 禁用全局Ajax事件.
 });

如果你想为全局AJAX设置参数，你会用上ajaxSetup()函数。例如，将所有AJAX请求都传递到request.php，；禁用全局方法；强制用POST方法传递：

$.ajaxSetup({
  url: "request.php",
  global: false,
  type: "POST"
});

【相关教程推荐：AJAX视频教程】

위 내용은 아약스 기능이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!