Detail_javascript 기술로 jsonp 도메인 간 요청을 해독합니다.
- WBOY원래의
- 2016-05-16 16:04:131151검색
1. 교차 도메인 요청이란:
서버 A의 페이지는 서버 B의 핸들러를 요청해야 합니다. 이를 크로스 도메인 요청이라고 합니다
이번 테스트 페이지는 다음과 같습니다.
kimhandler.ashx 핸들러는 다음과 같습니다.
%@ WebHandler Language="C#" Class="KimHandler" %>
using System;
using System.Web;
public class KimHandler : IHttpHandler {
public void ProcessRequest (HttpContext context)
{
string msg = "{\"name\":\"kim\",\"gender\":\"男\",\"age\":24}";
context.Response.Write(msg);
}
public bool IsReusable {
get {
return false;
}
}
}
또 다른 handler.ashx는 다음과 같습니다.
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context)
{
string callbackName = context.Request.Params["callbackFun"];
string msg = callbackName+ "({\"name\":\"kim\",\"age\":\"18\"});";
context.Response.Write(msg);
}
public bool IsReusable {
get {
return false;
}
}
}
2.Ajax는 도메인 간 요청을 구현할 수 없습니다
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
var requestUrl = "http://qxw1192430265.my3w.com/kimhandler.ashx";
window.onload = function () {
document.getElementById("btnAjax").onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("get", requestUrl, true);
xhr.setRequestHeader("If-Modified-Since", 0);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = xhr.responseText;
alert(res);
}
}
xhr.send(null);
}
}
</script>
</head>
<body>
<input type="button" id="btnAjax" value="点击" />
</body>
</html>
모니터를 확인하여 요청 메시지 본문이 반환되지 않았는지 확인하세요
3. 스크립트 태그를 사용하여 도메인 간 요청 구현
테스트 코드는 다음과 같습니다.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="http://qxw1192430265.my3w.com/kimhandler.ashx"></script> </head> <body> </body> </html>
모니터를 보면 요청 메시지 본문이 반환된 것을 확인할 수 있습니다
json 형식으로 보세요
4. js 메소드를 사용하고, 브라우저 측에서는 응답을 데이터로 읽습니다
테스트 코드는 다음과 같습니다. 핸들러가 변경되었으니 참고해주세요
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
function getData(data) {
for (var key in data) {
alert(data[key]);
}
}
</script>
<script src="http://qxw1192430265.my3w.com/handler.ashx?callbackFun=getData"></script>
</head>
<body>
</body>
</html>
백그라운드 코드를 통해 알 수 있습니다
그럼 모니터로 보세요
브라우저에 킴과 18이 뜬 걸 봤어요
5. Jq를 사용하여 도메인 간 요청 구현 (내부 원칙은 스크립트 태그를 생성하는 것입니다)
코드는 다음과 같습니다
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.9.0.js"></script>
<script>
var requestUrl = "http://qxw1192430265.my3w.com/handler.ashx";
window.onload = function () {
document.getElementById("btnJq").onclick = function() {
$.ajax(requestUrl, {
type: "get", //请求方式
dataType: "jsonp", //数据发送类型
jsonp: "callbackFun", //服务器端接收的参数
jsonpCallback: "fun", //js处理方法
success: function () {
alert("成功");
}
});
}
}
function fun(data) {
for (var key in data) {
alert(data[key]);
}
}
</script>
</head>
<body>
<input type="button" id="btnJq" value="Jq按钮" />
</body>
</html>
버튼을 누른 뒤 효과를 본 뒤 모니터를 보면
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.