jQuery Ajax 사용 소감 상세 정리 및 주의사항

IE7 및 이하 요청 방식 을 GET 로 사용 하면 URL 의 제한 은 무시 하기 쉬 운 문제(최대 2083 글자)입 니 다.그래서 URL 이 너무 길 수 있 으 면 POST 를 사용 해 야 합 니 다.Ajax 요청 종료 요청 을 종료 하려 면 XML HttpRequest 대상 의 abort()방법 을 호출 해 야 합 니 다.jQuery 의$.get,$.post,$.ajax,$.getJSON,$.getScript...의 반환 값 은 모두 XML HttpRequest 대상 입 니 다.abort()를 호출 한 후 ajax 요청 은 즉시 중단 되 지만 success 의 리 셋 함 수 를 실행 하기 때문에 success 의 리 셋 함수 에서 ajax Get 또는 data 가 존재 하 는 지 여 부 를 먼저 판단 해 야 합 니 다.존재 해 야 리 셋 함 수 를 실행 합 니 다

 
var ajaxGet = $.get(someURL,someData,function(data){ 
if(!data)return true; 
//TODO 
}); 
ajaxGet.abort(); 

크로스 도 메 인 자원 공유(CORS Cross-Origin Resoure Sharing)라 고 하면 지금 은 점점 중요 해 지고 있 습 니 다.각종 지도 API,웨 이 보 API 등 사이트 개발 자 들 은 스스로 위성 을 놓 을 필요 가 없고 다른 사람 이 열 린 인터페이스 에 따라 이 데 이 터 를 얻 을 수 있다.크로스 소스 전략 덕분이다.JSONP 는 크로스 소스 전략의 한 방안 이다.기본 원 리 는 브 라 우 저 를 이용 하여 도 메 인 을 넘 어 script 자원(그림 포함)을 가 져 올 수 있 도록 하 는 특징 으로 서버 에서 script Tag 를 생 성하 고 클 라 이언 트 에 게 전송 하 는 것 입 니 다.주의해 야 할 것 은 서버 에서 JSON 형식의 문자열 이 아니 라 callbackName+"("+JSONstring+")"즉 JSONP 입 니 다.이것 은 서버 가 JS 코드(부 여 된 함수)를 브 라 우 저 로 되 돌려 주 고 바로 실행 하 는 것 과 같다.따라서 브 라 우 저 에서 보 낸 URL(GET 형식)에 리 셋 함수 이름 을 입력 해 야 합 니 다.클 라 이언 트:

 
function deal(data){ 
//TODO 
} 
var s= document.createElement("script") 
//     callback，           Request.QueryString   
s.src = "http://172.20.2.60:8088/newwebsite/MyHandler.ashx?callback=func"; 
document.body.appendChild(s) 

서버 엔 드(.Net)

 
<%@ WebHandler Language="C#" Class="Test" %> 
using System; 
using System.Web; 
public class Test : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.Charset = "utf-8"; 
context.Response.ContentType = "text/javascript"; 
string callback = context.Request.QueryString["callback"];//      
string json = "{'name':'Ray','msg':'hello world!'}";//JSON       
string result = string.Format("{0}({1})", callback, json); 
context.Response.Write(result); 
context.Response.Flush(); 
context.Response.End(); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
} 

jQuery 를 사용 하면 URL 에 리 셋 함수 이름 을 추가 하지 않 아 도 됩 니 다.jQuery 가 대신 일 했 기 때 문 입 니 다.이 리 셋 함수 가 바로 success 입 니 다

 
$.ajax({ 
url: "http://172.20.2.60:8088/newwebsite/MyHandler.ashx" 
, dataType: "jsonp" 
, success: function(data) { 
//TODO 
} 
}); 

JSONP 는 강력 하지만 알 을 아 프 게 하 는 곳 도 두 군데 있 습 니 다.우선 안전성 문제 입 니 다.어쨌든 당신 은 다른 사람의 땅 에서 데 이 터 를 옮 기 고 내용 도 스 크 립 트 입 니 다!그 러 니까 남 이 나 쁜 사람 이 라면 악성 코드 를 주면 곤란 하 다 는 거 야.물론 이 문 제 는 일반적으로 발생 하지 않 을 것 이다.우리 가 데 이 터 를 요청 하고 싶 은 곳 은 모두 우리 가 잘 알 고 있 거나 공식 적 인 것 이다.또 다른 문 제 는 짜증 이 났 다.브 라 우 저 측 에서 JSONP 에 대한 요청 이 실 패 했 는 지 직접 알 수 없습니다.jQuery 를 써 도 error 는 소 용이 없습니다.try 가 틀 려 도 catch 는 잡 을 수 없습니다.그래서 잠시 알 고 있 는 것 은 완벽 하지 못 한 방법 중 하나 입 니 다.시한 을 넘 기 고도 데이터 가 돌아 오지 않 으 면 error 를 판정 하 는 것 입 니 다.완벽 하지 않다 고 말 하 는 것 은 각 집의 인터넷 속도 가 다 르 기 때문에...너 는 알 고 있다.jQuery 에서 contentType 과 관련 된 jQuery 홈 페이지 원문

 
contentType 
Default: 'application/x-www-form-urlencoded; charset=UTF-8' 
When sending data to the server, use this content type. 
Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. 
If you explicitly pass in a content-type to $.ajax(), 
then it'll always be sent to the server (even if no data is sent). 
If no charset is specified, data will be transmitted to the server using the server's default charset; 
you must decode this appropriately on the server side. 

이 문 자 를 통 해 jQuery ajax 에서 contentType 기본 값 은'application/x-www-form-urlencoded'라 는 것 을 알 수 있 습 니 다.charset=UTF-8'물론 최신 jQuery 입 니 다.이전 판본 에 비해 약간의 변화 가 있다.대상 을 정렬 해서 백 엔 드 로 전송 하려 면 contentType 을'application/json'으로 설정 할 수 있 습 니 다.