Ajax 요청에 대한 전체 페이지 업데이트
AJAX 요청에는 다음 두 가지 결과가 있을 수 있습니다.
- 는 메시지에 는 '메시지'에 합니다.
<div> - 서버가 HTML 페이지로 응답합니다.이 경우 현재 페이지를 새 페이지로 대체하고 주소를 변경해야 합니다(클라이언트는 요청 전에 주소를 알고 있습니다).
AJAX 요청으로 이 두 가지 사례를 모두 처리해야 하는 경우 해결 방법은 무엇입니까?
url = "http://example.com"
ajax.request(callback)
function callback(response) {
if (case2(response)) {
history.pushState({}, "New page", url);
document.innerHTML = response
} else {
updateDiv(response)
}
}
첫 번째 브랜치를 올바르게 실장하는 방법이나 서버가 브라우저를 일반적인 HTTP 응답으로 처리하고 페이지 위치와 콘텐츠를 갱신하는 헤더를 작성할 수 있는지 등에 관심이 있습니다.
서버가 페이지 대신 링크를 반환할 수 있다는 것은 이해하지만, 이 경우 클라이언트에 리다이렉트 후 서버 상의 새 페이지를 채우는 추가 단계가 필요합니다.
솔직히 말해서, 저는 그 접근법이 기본적으로 설계상 깨졌다고 생각합니다.당신은 그 자리에서 그 결정을 내릴 필요가 없습니다.예를 들어, ajax 응답은 완전히 새로운 페이지를 로드하고 새 URL에 대한 두 번째(ajax가 아닌) 요청으로 새 콘텐츠를 생성해야 한다는 신호만 보낼 수 있습니다.
어쩔 수 없이 기존 방식을 택하고, 응답 내용이 크지 않다면 Javascript-URI를 사용해 보십시오.'URI' 입니다.javascript:"string"이 문자열이 소스 코드인 새 페이지가 로드됩니다.만약에 '만약에'가response는 이미 '어느 정도'를 할당하고 있습니다.javascript:response로로 합니다.window.location.href충분할 겁니다.미리 탈출을 좀 하셔야 할 것 같아요.이 접근법이 브라우저 간 호환성이 얼마나 되는지 모르겠습니다.
<a href="javascript:response">load</a>
할 수도 있습니다.
변수명이 아닌 실제 문자열 데이터를 사용하여 URL을 작성하는 것도 이에 해당합니다.맘에 들다
function source2url(src) {
// make valid javascript string from source text
var esc1 = src
.replace(/\\/g, '\\\\')
.replace(/\'/g, '\\\'')
.replace(/\x0A/g, '\\x0A')
.replace(/\x0D/g, '\\x0D');
// make valid url from that
return "javascript:'" + encodeURIComponent(esc1) + "'";
}
window.location.href = source2url(response);
물론 이것은 꽤 큰 URI를 생성합니다.주소 표시줄에는 항상 Javascript-URI가 있습니다.
갱신하다
마찬가지로 데이터 URI에서 base64 인코딩을 사용하는 방법도 있습니다.위키피디아 엔트리는 Javascript 예를 포함하여 어떻게 작동하는지 설명합니다.다만, 어떠한 방법으로든 컨텐츠를 base64로 인코딩 할 필요가 있습니다.(주의:base64 인코딩의 유무에 관계없이, 데이터 URI 를 사용할 수 있습니다.특정 콘텐츠의 URI를 단축할 수 있는 것이 무엇인지 확인해야 합니다).
저도 비슷한 문제가 있었어요.단순한 HTML 스니펫 대신 완전한 오류 페이지가 반환되었습니다.결국 논리를 변경하여 이 문제를 해결했습니다만, 제가 찾은 해결 방법 중 하나는 다음과 같습니다.
document.open();
document.write(responseText);
document.close();
이것을 포기한 이유는 IE에 문제가 있었기 때문입니다.이유를 조사하기 위해 시간을 허비하지 않았는데 문자열을 쓰려고 할 때 '접근 거부' 예외가 발생했습니다. 가지 있었던 것 <meta>IE를 혼란스럽게 하는 태그나 조건부 코멘트는 잘 모르겠습니다.(간단한 페이지를 사용했을 때는 효과가 있었습니다...)
요컨대, 이 작업은 하지 않아도 되지만, (url 문자열을 반환하는 등) 다른 방법이 없는 경우에는 위의 코드가 동작할 수 있습니다.
응답이 유효한 XML이면 매우 간단합니다.
var new_doc = (new DOMParser).parseFromString(response, "application/xml");
document.replaceChild(document.adoptNode(new_doc.doctype), document.doctype);
document.replaceChild(document.adoptNode(new_doc.documentElement), document.documentElement);
갱신된 답변을 요구하는 것이므로 HTML5의 History API와 jQuery를 사용한 솔루션을 소개합니다.PHP와 HTML 부분을 하나의 파일로 결합하면 쉽게 실행할 수 있습니다.
이 솔루션에서는 AJAX가 다음을 반환할 수 있습니다.
- AJAX를이 메시지는 를 갱신합니다.
<div>컨테이너. - 브라우저가 URL로 리다이렉트 하는 URL
- 의 History API를 로 호출하는 완전한
history.pushState()브라우저 기록에 현재 URL을 추가하고 페이지의 전체 HTML을 AJAX에서 반환된 HTML로 바꿉니다.
PHP
이것은 PHP 스크립트가 AJAX를 통해 호출되었을 때 반환해야 하는 것의 예시일 뿐입니다.AJAX 콜이 컨테이너를 갱신할 것인지 새로운 페이지를 로드할 것인지를 결정하기 위해 플래그를 인코딩하는 방법 및 json_encode를 통해 결과를 JSON을 통해 반환하는 방법에 대해 설명합니다.완전성을 위해 이 스크립트의 이름을 test.php라고 붙였습니다.
<?php
// Random messages to return
$messages = array(
'Stack Overflow',
'Error Message',
'Testing'
);
// If the page was requested via AJAX
if( isset( $_POST['ajax']))
{
$response = array(
'redirect' => // Flag to redirect
( rand() % 2 == 0) ? true : false,
'load_html' => // Flag to load HTML or do URL redirect
( rand() % 2 == 0) ? true : false,
'html' => // Returned HTML
'<html><head><title>AJAX Loaded Title</title></head><body>It works!</body></html>',
'title' => 'History API previous title',
'message' => // Random message
$messages[ (rand() % count( $messages)) ]
);
echo json_encode( $response);
exit;
}
JS
저는 jQuery를 사용하고 있기 때문에 그것부터 시작합시다.다음은 AJAX POST를 서버에, 위의 PHP 스크립트에 URL test.php로 전송합니다.POST 파라미터도 설정됩니다.ajaxtruePHP 스크립트가 AJAX 요청을 수신한 것을 검출할 수 있도록 합니다.dataType필드는 서버의 응답이 JSON에 있음을 jQuery에 알려주고 응답 콜백의 JSON 개체에 대해 해당 JSON을 디코딩해야 함을 알려 줍니다. ★★★★★★★★★★★★★★★★★★★.successAJAX 응답이 정상적으로 수신되었을 때 호출되는 콜백은 서버로부터 송신된 플래그를 기반으로 처리를 결정합니다.
$.ajax({
type: 'POST',
url: "/test.php",
data: {ajax : true},
dataType: "json",
success: function( json) {
if( json.redirect) {
if( json.load_html) {
// If the History API is available
if( !(typeof history.pushState === 'undefined')) {
history.pushState(
{ url: redirect_url, title: document.title},
document.title, // Can also use json.title to set previous page title on server
redirect_url
);
}
// Output the HTML
document.open();
document.write( json.html);
document.close();
}
else {
window.location = redirect_url;
}
}
else {
$('#message').html( json.message);
}
},
});
HTML
테스트한 파일의 완전한 HTML 소스입니다.FF4 - FF8에서 테스트했습니다.jQuery는 다음과 같은 기능을 제공합니다.ready메서드를 사용하여 DOM이 로드될 때까지 JS가 실행되지 않도록 합니다.또한 Google의 jQuery 호스팅을 사용했기 때문에 이를 테스트하기 위해 jQuery 복사본을 서버에 업로드할 필요가 없습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<title>Default Page</title>
<script type="text/javascript"">
$( document).ready( function() {
$('#ajax_link').click( function() {
var redirect_url = "/test.php";
$.ajax({
type: 'POST',
url: "/test.php",
data: {ajax : true},
dataType: "json",
success: function( json) {
if( json.redirect) {
if( json.load_html) {
// If the History API is available
if( !(typeof history.pushState === 'undefined')) {
history.pushState(
{ url: redirect_url, title: document.title},
document.title, // Can also use json.title to set previous page title on server
redirect_url
);
}
document.open();
document.write( json.html);
document.close();
}
else {
window.location = redirect_url;
}
}
else {
$('#message').html( json.message);
}
},
});
})
});
</script>
</head>
<body>
<div id="message">The default contents of the message</div>
<a id="ajax_link" href="#">Fire AJAX</a>
</body>
</html>
본문에 ID를 입력하다<body id="page">그리고 너의 다른 div는<div id="message"></div>이제 당신의 아약스는
$.ajax({
url:'myAjax.php',
data:{datakey:datavalue},
dataType:"JSON",
success: function (response) {
if(response.message=="your message")
{
$('#message').html(response.content);
}
else
{
$('#page').html(response.content);
}
}
});
티불의 말처럼...여기에서는 모든 과정이 잘못되어 있다.
당신은 단지 지나치게 과장하고 있을 뿐이고, 그 영향을 알고 있습니다.
서버가 페이지 대신 링크를 반환할 수 있다는 것은 이해하지만, 이 경우 클라이언트에 리다이렉트 후 서버 상의 새 페이지를 채우는 추가 단계가 필요합니다.
복잡하게 만들지 말고 잘 시작하세요.
- 클라이언트는 페이지를 처음 열었으므로 추적합니다.
$_SESSION['tmp_client_id'] = 'client_'.session_id();클라이언트가 이미 서브스크라이브 되어 있는 경우는, 어쨌든, 임시 테이블 또는 다른 세션의 var 등에 정보를 넣는 것이 좋습니다. - 클라이언트의 폼 작성
- 고객은 양식을 제출한다.
- AJAX 요청을 합니다.
- ★★★
$_POSTinside variabletmp_client_tbl독독 it ittmp_client_id그냥 니 or or or$_SESSION['client_'.session_id()] = json_encode($_POST); - 를 #
</div> - 및 (#2?)
if( isset($_SESSION['client_'.session_id()])) {다시 한해 보겠습니다.} else { SELECT * FROM tmp_client_tbl WHERE tmp_client_id = '{$_SESSION['tmp_client_id']}'★★★json_decode($_SESSION['client_'.session_id()]);$form_data = $mysql_rows;★★★$json_array;foreach($form_data as $name => $value) { echo "<input name='$name' value='$value' />" }닌자 방식으로 당신이 그런 종류의 폼빌더 어레이를 가지고 있다고 가정합니다.$form = array('text' => array('name','lastname'), 'select' => array('countries'), ... )에 의해,<input name='lastname' value='{$lastname}' />필드 은 빈 으로 미리 구분됩니다. 여기、 필; 、 where where;;;;;;;; where where 、 where where where where where where where where 。- 「 」, 「 」, 「 」, 「 」
session_destroy();★★★★★★★★★★★★★★★★★」unset($_SESSION['client_'.session_id()]);
언급URL : https://stackoverflow.com/questions/5941933/update-whole-page-on-ajax-request
'itsource' 카테고리의 다른 글
| 약속 오류: 개체가 반응 자식 개체로 유효하지 않습니다. (0) | 2023.02.14 |
|---|---|
| 웹 팩을 사용하여 라이브러리 소스 맵을 로드하는 방법 (0) | 2023.02.14 |
| 각 $http 서비스에서는 오류 상태를 파악하려면 어떻게 해야 합니까? (0) | 2023.02.14 |
| 에의 JSON의 시리얼화를 해제하고 있습니다.Newtonsoft를 사용하는 NET 객체(혹은 LINQ에서 JSON으로) (0) | 2023.02.14 |
| 웹 서버에서 브라우저로 데이터를 푸시할 수 있는 방법이 있습니까? (0) | 2023.02.14 |