도메인 간 요청: jQuery의 ajax jsonp 사용 솔루션
- 高洛峰원래의
- 2017-01-12 09:45:32873검색
오류 메서드를 직접 실행하면 오류가 발생했습니다. ajax jsonp는 이전에 사용되지 않았으며 이에 대한 이해는 일반적인 ajax 요청의 이해와 유사하며 이 오류가 발생한 후에는 깊이 이해하지 못했습니다. 여러 번 디버깅해도(속성 설정의 배경 코드와 js 부분 확인) 여전히 작동하지 않아서 매우 놀랍고 당혹스럽습니다. 그래서 ajax jsonp의 사용법을 꼼꼼히 공부하고 최종 성공한 테스트의 학습 경험을 여러분과 공유하기로 했습니다!
먼저, 성공적으로 실행될 수 있는 코드를 게시합니다:
(페이지 부분)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type : "get",
async:false,
url : "ajax.ashx",
dataType : "jsonp",
jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});
var a="firstName Brett";
alert(a);
});
</script>
</head>
<body>
</body>
</html> (핸들러 부분)
<%@ WebHandler Language="C#" Class="ajax" %>
using System;
using System.Web;
public class ajax : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )");
}
public bool IsReusable {
get {
return false;
}
}
}ajax 요청 매개변수 설명:
dataType String
서버에서 반환할 것으로 예상되는 데이터 형식입니다. 지정하지 않으면 jQuery는 HTTP 패키지의 MIME 정보를 기반으로 자동으로 지능적인 판단을 내립니다. 예를 들어 XML MIME 유형은 XML로 인식됩니다. 1.4에서는 JSON이 JavaScript 객체를 생성하고 스크립트가 스크립트를 실행합니다. 그런 다음 서버에서 반환된 데이터는 이 값을 기반으로 구문 분석되어 콜백 함수에 전달됩니다. 사용 가능한 값:
"xml": jQuery로 처리할 수 있는 XML 문서를 반환합니다.
"html": 일반 텍스트 HTML 정보를 반환합니다. 포함된 스크립트 태그는 DOM에 삽입될 때 실행됩니다.
"script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. "cache" 매개변수가 설정되지 않은 경우. '''참고: '''원격 요청을 할 때(동일한 도메인이 아닌) 모든 POST 요청은 GET 요청으로 변환됩니다. (DOM 스크립트 태그를 사용하여 로드하기 때문입니다.)
"json": JSON 데이터를 반환합니다.
"jsonp": JSONP 형식입니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다.
"text": 일반 텍스트 문자열을 반환합니다.
jsonp 문자열
jsonp 요청에서 콜백 함수의 이름을 다시 씁니다. 이 값은 "callback=?"과 같은 GET 또는 POST 요청에서 URL 매개변수의 "콜백" 부분을 대체하는 데 사용됩니다. 예를 들어, {jsonp:'onJsonPLoad'}는 "onJsonPLoad=?"로 전달됩니다. 서버.
jsonpCallback String
jsonp 요청에 대한 콜백 함수 이름을 지정합니다. 이 값은 jQuery가 자동으로 생성한 임의의 함수 이름 대신 사용됩니다. 이는 주로 jQuery가 고유한 함수 이름을 생성하여 요청을 더 쉽게 관리하고 콜백 함수 및 오류 처리를 제공하는 데 사용됩니다. 브라우저가 GET 요청을 캐시하도록 하려는 경우 이 콜백 함수 이름을 지정할 수도 있습니다.
ajax jsonp와 일반 ajax 요청의 주요 차이점은 요청 응답 결과를 처리하는 것입니다. 위 코드에 표시된 응답 결과는 다음과 같습니다.
success_jsonpCallback([ { name: "John"} ] ) ——실제로는 jsonp 콜백 함수인 Success_jsonpCallback을 호출하고 응답할 문자열 또는 json을 전달하는 것입니다. 여기 메소드(매개변수 값), 기본 구현, 대략적인 추측은 다음과 같습니다.
function success_jsonpCallback(data)
{
success(data);
}jQuery의 ajax jsonp 사용에 대한 더 많은 도메인 간 요청 및 관련 기사를 보려면 PHP에 주의하세요. 중국사이트!