jQuery Ajax 사용법에 대해 이야기해 보세요.

정의 및 사용법

ajax() 메서드는 HTTP 요청을 통해 원격 데이터를 로드합니다.

이 방법은 jQuery의 기본 AJAX 구현입니다. 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 $.get, $.post 등을 참조하세요. $.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 대부분의 경우 유연성을 높이기 위해 덜 일반적으로 사용되는 옵션을 조작해야 하는 경우가 아니면 이 기능을 직접 조작할 필요가 없습니다.

가장 간단한 경우에는 $.ajax()를 매개변수 없이 직접 사용할 수 있습니다.

참고: 모든 옵션은 $.ajaxSetup() 함수를 통해 전역적으로 설정할 수 있습니다.

jQuery Ajax는 웹 애플리케이션 개발에 매우 ​​일반적으로 사용됩니다. 여기에는 주로 ajax, get, post, load, getscript 등과 같은 새로 고침이 필요 없는 일반적인 작업 방법이 포함되어 있습니다.

가장 간단한 방법부터 시작해 보겠습니다. 복잡한 ajax 요청을 처리할 때 jQuery는 jQuery.ajax() 메서드를 사용합니다. jQuery에는 jQuery.ajax() 메서드를 캡슐화하는 몇 가지 간단한 메서드가 있으므로 일부 간단한 Ajax 이벤트를 처리할 때 jQuery.ajax() 메서드를 사용할 필요가 없습니다. 이미 등장했으니 모두가 곧 마스터할 수 있을 거라 믿습니다. 물론 jQuery.ajax() 메서드는 이 글의 최우선 사항이기 때문에 이 글의 후반부에서 매우 구체적으로 설명하겠습니다.

다음 5가지 메소드는 일반적인 Ajax 요청의 짧은 형식을 수행합니다. 복잡한 Ajax 요청을 처리할 때는 jQuery.ajax()를 사용해야 합니다.

1.load(url,[데이터],[콜백])

원격 HTML 파일 코드를 로드하여 DOM에 삽입합니다. 기본적으로 GET 메서드가 사용되며, 매개변수 전달 시 자동으로 POST 메서드로 변환됩니다.

◦url: 로드할 원격 URL 주소
◦ 데이터: 서버로 전송되는 키/값 데이터
◦ 콜백 : 로딩 성공 시 콜백 함수

샘플 코드는 다음과 같습니다.

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
 function() {
  //处理
 })

로드된 파일의 내용이 여기에 표시됩니다. 로드

2.jQuery.get(url, [데이터], [콜백])

서버에서 데이터를 얻으려면 get 메소드를 사용하세요.

◦ 요청을 보낼 URL 주소
◦서버로 보낼 데이터
◦ 로딩 성공 시 콜백 기능

샘플 코드는 다음과 같습니다.

$.get("jqueryget.htm", { "id": this.id },
 function(req) {
  //成功时的回调方法
  $("#showget").html(req);
 });
})

ID를 전달하여 다른 로고를 얻으려면 $.get() 메서드를 사용하세요. 이때 get 메소드를 통해 요청을 얻는다는 점을 언급할 필요가 있으므로, 매개변수 값을 얻을 때 Request.QueryString을 사용해야 합니다. Request Request.QueryString

의 차이점을 살펴볼 수 있습니다.

바이두 로고 구글 로고

logo3.jQuery.post(url, [data], [callback])
이 여기에 표시됩니다. 비동기 요청을 하려면 POST 메소드를 사용하세요. jQuery.get()과 비교했을 때 요청 방식에 차이가 있으므로 여기서는 특별히 설명하지 않습니다. 사용법은 jQuery.get()과 유사합니다.

4.jQuery.getScript(url,[콜백])

GET 메소드를 통해 자바스크립트 파일을 로드하고 실행하도록 요청합니다. 이 기술은 이전 글에서 언급한 바 있으며, jQuery.ajax를 사용하는 간단한 방법이기도 합니다. ajax가 js를 로딩하는 모습을 볼 수 있으므로 여기서는 특별한 설명은 없습니다.

5.jQuery.getJSON(url,[데이터],[콜백])

get 메소드를 통해 json 형식의 데이터를 가져옵니다.

샘플 코드는 다음과 같습니다.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
 $.each(req.items, function(i, item) {
  if (i == vnum) {
   $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
  }
 });
});

마찬가지로 이 메서드는 다음 메서드와 유사한 jQuery.ajax() 메서드의 단축 메서드이기도 합니다.

매개변수 목록:

매개변수 이름	유형	설명
URL	문자열	(기본값: 현재 페이지 주소) 요청을 보낼 주소입니다.
유형	문자열	(기본값: "GET") 요청 방법("POST" 또는 "GET"), 기본값은 "GET"입니다. 참고: PUT 및 DELETE와 같은 다른 HTTP 요청 방법도 사용할 수 있지만 일부 브라우저에서만 지원됩니다.
타임아웃	번호	요청 시간 제한(밀리초)을 설정합니다. 이 설정은 전역 설정보다 우선 적용됩니다.
비동기	부울	(기본값: true) 기본적으로 모든 요청은 비동기식 요청입니다. 동기 요청을 보내야 하는 경우 이 옵션을 false로 설정하세요. 동기 요청은 브라우저를 잠그며 사용자는 다른 작업을 수행하기 전에 요청이 완료될 때까지 기다려야 합니다.
보내기 전	기능	요청을 보내기 전에 사용자 정의 HTTP 헤더를 추가하는 등 XMLHttpRequest 객체의 기능을 수정할 수 있습니다. XMLHttpRequest 객체가 유일한 매개변수입니다. <span style="color: rgb(0,0,255)">function (XMLHttpRequest) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax <a target="_blank" style="color: rgb(51,153,255); text-decoration: none" href="http://www.php100.com/tags.php/request/">request</a>}</span></span></span>
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span>
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, 문자열	서버로 데이터가 전송되었습니다. 요청 문자열 형식으로 자동 변환됩니다. GET 요청의 URL에 추가됩니다. 이 자동 변환을 비활성화하려면 processData 옵션 설명을 참조하세요. 키/값 형식이어야 합니다. 배열인 경우 jQuery는 자동으로 동일한 이름을 다른 값에 할당합니다. 예를 들어, {foo:["bar1", "bar2"]}는 '&foo=bar1&foo=bar2'로 변환됩니다.
데이터 유형	문자열	서버에서 반환할 것으로 예상되는 데이터 유형입니다. 지정하지 않으면 jQuery는 HTTP 패킷 MIME 정보를 기반으로 responseXML 또는 responseText를 자동으로 반환하고 이를 콜백 함수 매개 변수로 전달합니다. 사용 가능한 값: "xml": jQuery로 처리할 수 있는 XML 문서를 반환합니다. "html": 스크립트 요소가 포함된 일반 텍스트 HTML 정보를 반환합니다. "script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. "json": JSON 데이터를 반환합니다. "jsonp": JSONP 형식입니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다.
오류	기능	(기본값: 자동으로 결정(xml 또는 html)) 이 메소드는 요청이 실패할 때 호출됩니다. 이 메서드는 XMLHttpRequest 개체, 오류 메시지 및 (아마도) 캡처된 오류 개체라는 세 가지 매개 변수를 사용합니다. <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus, errorThrown) { <span style="color: rgb(0,128,0)">// 通常情况下textStatus和errorThown只有其中一个有值 <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 <span style="color: rgb(0,0,255)">function (data, textStatus) { <span style="color: rgb(0,128,0)">// data could be xmlDoc, jsonObj, html, text, etc... <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>

这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。

 代码如下

$.ajax({
 url: url,
 dataType: 'json',
 data: data,
 success: callback
});

可能你还没有使用过json数据，我的小站中已经好几次提到了json的使用，如果你还不熟悉json格式，可以看看jquery移动listbox的值、jQuery下json的使用实例

获得json数据

这 里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法， 在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。

6.jQuery.ajax()

使用jQuery.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。

 代码如下

$.ajax({
 url: "http://www.hzhuti.com", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步，默认为异步，这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});

使用jQuery.ajax()

这里将显示数据

$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
 url:'productManager_reverseUpdate',// 跳转到 action 
 data:{ 
    selRollBack : selRollBack, 
    selOperatorsCode : selOperatorsCode, 
    PROVINCECODE : PROVINCECODE, 
    pass2 : pass2 
 }, 
 type:'post', 
 cache:false, 
 dataType:'json', 
 success:function(data) { 
  if(data.msg =="true" ){ 
   // view("修改成功！"); 
   alert("修改成功！"); 
   window.location.reload(); 
  }else{ 
   view(data.msg); 
  } 
  }, 
  error : function() { 
   // view("异常！"); 
   alert("异常！"); 
  } 
});

//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
 var formParam = $("#form1").serialize();//序列化表格内容为字符串 
 $.ajax({ 
  type:'post',  
  url:'Notice_noTipsNotice', 
  data:formParam, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
  } 
 }); 
} 
//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
  type:'post', 
  url:'validatePwd2_checkPwd2?password2='+password2, 
  data:{}, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
   if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 
   { 
    textPassword2.html("<font color='red'>业务密码不正确！</font>"); 
    $("#validatePassword2").val("pwd2Error"); 
    checkPassword2 = false; 
    return; 
   } 
  }, 
  error:function(){} 
});
//4.$.ajax拼接data的异步请求
$.ajax({ 
 url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', 
 type:'post', 
 data:'merName='+values, 
 async : false, //默认为true 异步 
 error:function(){ 
  alert('error'); 
 }, 
 success:function(data){ 
  $("#"+divs).html(data); 
 }
});

本篇的jQuery ajax使用就总结到这里，当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等，在以后使用中，我会把它们也总结下来。