1. 소개
오늘날 AJAX와 데이터베이스 기술을 통합하는 Backpack, Blinksale 및 Gmail과 같은 웹 애플리케이션이 꽤 많이 있습니다. 이러한 통합은 브라우저를 새로 고치지 않고도 데이터베이스와 통신할 수 있는 강력한 기술을 제공함으로써 웹 애플리케이션과 사용자 경험에 큰 영향을 미칩니다. 즉, 사용자가 다른 상호 작용을 계속하는 동안 실시간으로 데이터를 전송할 수 있습니다.
이 기사에서는 위의 기술 통합 메커니즘에 중점을 둘 것입니다. 완전한 참조 소스 코드도 제공됩니다. 이 예는 각 직위에 제목, 설명 및 날짜가 포함되어 사용자가 직위를 추가, 편집 및 삭제할 수 있는 간단한 직업 로깅 애플리케이션입니다. 이 모든 것은 데이터베이스 레코드 데이터로 작업할 때 수행하는 기본 작업이지만 이 응용 프로그램은 한 단계 더 나아갑니다. 직위는 편집 가능한 형식으로 변경될 수 있습니다. 이는 브라우저를 새로 고치거나 사용자 작업을 중단하지 않고도 데이터베이스에 저장되거나 삭제되고 새로운 상태로 표시됩니다.
이 기사에서는 귀하가 AJAX, MySQL, PHP 또는 유사한 서버 측 언어에 대한 기본적인 이해를 가지고 있다고 가정합니다. 아직 XML HTTP 요청 개체를 만들지 않았다면 먼저 내 기사 "AJAX 사용 방법"을 참조하세요. 다음으로 먼저 데이터베이스 문제에 대해 논의하겠습니다.
2. 데이터베이스 생성
가장 먼저 해야 할 일은 해당 위치에 대한 데이터를 저장할 데이터베이스 테이블을 생성하는 것입니다. 나는 informit_ajax라는 MySQL 테이블을 만들었습니다. 여기에는 ID, 제목, 설명 및 날짜 필드가 있습니다. 이것들은 모두 이 기사에서 반복적으로 나타날 변수입니다. 다음은 테이블을 생성하는 코드입니다:
CREATE TABLE 'informit_ajax' (
'id' int(11) NOT NULL auto_increment,
'날짜' 날짜/시간 NOT NULL 기본값 '0000-00-00 00:00:00',
'설명' 긴 텍스트는 NULL이 아닙니다.
′title′ varchar(100) NOT NULL 기본값 '',
기본 키('id')
) TYPE=MyISAM;
애플리케이션 개발에 사용되는 MySQL 쿼리 도구나 언어를 사용하여 이 코드를 실행할 수 있습니다. 데이터베이스가 준비되면 다음 단계는 PHP 백엔드에 요청하는 프런트엔드 파일을 만드는 것입니다.
3. 요청하기
여기의 색인 HTML 파일은 간단한 데이터 자리 표시자이며 데이터베이스에서 분석됩니다. 이 파일에는 JavaScript 및 CSS 파일에 대한 참조가 포함되어 있으며 첫 번째 요청을 수행하는 onload 핸들러와 세 개의 div 태그도 포함되어 있습니다.
레이아웃 - 페이지 콘텐츠
로드를 중앙에 배치하는 데 사용됨 - 요청된 데이터 로드 중에 메시지를 로드합니다. HTTPRequest 객체
· 게시물 - 분석된 각 작업 데이터를 표시하는 데 사용
<head>
<title>AJAX와 데이터베이스를 통합하는 방법</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="js/request.js"></script>
<script src="js/post.js"></script>
</머리>
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="레이아웃" align="center">
<div id="게시물"></div>
<p><input type="button" value="게시물 추가" onmousedown="javascript:makeRequest('services/post.php?method=save');" /></p>
<p><div id="loading"></div></p>
</div>
</body>
페이지가 로드될 때 첫 번째 요청이 생성됩니다. 이 요청은 나중에 생성할 PHP 클래스에 get 쿼리를 보내지만 먼저 요청 응답에 대한 분석 메서드를 생성해야 합니다. JavaScript 요청 파일은 객체 생성, 요청 전송, 준비 상태 확인과 같은 모든 기본 작업을 처리합니다. 요청 객체로부터 응답을 받으면 이 JavaScript 작업 파일을 사용하여 이러한 작업의 HTML 생성을 처리합니다. onResponse 메소드는 텍스트 및 양식 버전 모두에서 각 직위에 대한 HTML 페이지 생성을 처리하고 이를 사용자 정의 div 태그에 배치하므로 사용자 상호 작용 중에 쉽게 생성할 수 있으므로 매우 강력합니다. 이렇게 하면 각 게시물의 텍스트 버전과 양식 버전 간에 전환할 수 있습니다. 이는 "이 게시물 편집" 링크를 클릭하여 수행할 수 있습니다. 다음은 각 위치에 대해 생성된 HTML 페이지의 코드입니다. 이 기사의 해당 다운로드 소스 파일에서 전체 메서드 구현을 볼 수 있습니다.
var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
+ "<div class='title' id='title_"+ i +"'>"+ _title +"</div>"
+ "<div class='설명' id='description_"+ i +"'>"+ _description +"</div>"
+ "<div class='date' id='date_"+ i +"'>"+ _date +"</div>"
+ "<a href="javascript:toggle('"+ i +"');">이 게시물 수정</a><br/>"
+ "</div>"
+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +">"
+ "<div class='title'><입력 유형='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'></div ＞"
+ "<div class='설명'><textarea type='text' id='formDescription_"+ i +"' Wrap='virtual' cols='60' 행='15'>"+ _description +"</ 텍스트 영역></div>"
+ "<div 클래스='날짜'>"+ _date +"</div>"
+ "<입력 유형='버튼' 이름='취소' 값='취소' onclick="javascript:toggle('"+ i +"');">"
+ "<입력 유형='버튼' 이름='삭제' 값='이 게시물 삭제' onclick="javascript:deletePost("+ _id +");">"
+ "<입력 유형='버튼' 이름='제출' 값='이 게시물 저장' onclick="javascript:saveNewPost("+ _id +","+ i +");">"
+ "</div>"
+ "<p>"nbsp;</p>";
각 게시물의 텍스트 버전에는 제목, 설명, 날짜 및 "이 게시물 편집" 링크가 표시됩니다. 각 게시물의 양식 버전에는
·"취소
" 버튼이 3개 있습니다." 버튼 - 단순히 게시물 상태를 텍스트 버전으로 다시 전환합니다.
· "이 게시물 삭제" 버튼 - 데이터베이스에서 게시물을 삭제하기 위해 현재 게시물의 ID를 PHP 개체로 보냅니다.
· "이 게시물 저장" 버튼 - 새 작업이나 편집된 작업을 서버에 저장합니다.
서버측 요청 통신을 처리하는 핵심 메소드는 onResponse, saveNewPost, deletePost 및 getPost 메소드이며 현재 작동 중인 작업 인덱스를 저장하는 getter 및 setter 메소드도 있습니다. . 메소드는 해당 색인을 기반으로 올바른 정보로 올바른 위치를 업데이트할 수 있도록 이러한 핵심 메소드에 현재 색인 값을 제공합니다. 다음은 각 핵심 메소드에 대한 간략한 요약입니다(이전에 해당 기능을 살펴보았으므로 onResponse 제외). 설명 및 코드 예:
· 다음 saveNewPost 메소드는 양식 입력 값을 수집하여 PHP 객체로 전송하여 새 게시물을 저장하고 getPost 메소드를 onreadystatechange 콜백 메소드로 설정합니다.
function saveNewPost(_id, _index){
var newDescription = document.getElementById("formDescription_"+ _index).value;
var newTitle = document.getElementById("formTitle_"+ _index).value;
setIndex(_index);
sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}
· 아래 getPost 메소드는 콜백 메소드입니다. PHP 객체로부터 응답이 수신되면 단일 게시물을 업데이트하는 역할을 담당합니다.
function getPost(){
if(checkReadyState(요청)) {
var 응답 = request.responseXML.documentElement;
var _title = response.getElementsByTagName('title')[getIndex()].firstChild.data;
var _description = response.getElementsByTagName('description')[getIndex()].firstChild.data;
var _date = response.getElementsByTagName('date')[getIndex()].firstChild.data;
document.getElementById("title_"+ getIndex()).innerHTML = _title;
document.getElementById("description_"+ getIndex()).innerHTML = _description;
document.getElementById("date_"+ getIndex()).innerHTML = _date;
토글(getIndex());
}
}
· 아래의 deletePost 메소드는 현재 인덱스를 PHP 객체에 대한 요청으로 보냅니다. 그러면 PHP 객체는 궁극적으로 데이터베이스의 레코드를 삭제하고 업데이트된 위치로 응답합니다.
function deletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}
놀랍게도 가장 복잡한 부분이 끝났습니다. 가장 중요한 부분인 데이터베이스 상호 작용을 분석해 보겠습니다.
4. 데이터베이스와 상호 작용
데이터베이스와 상호 작용하려면 위치 검색, 삽입, 교체 및 삭제를 위한 메서드를 만들어야 합니다. 나는 이러한 상호작용을 처리하기 위해 get, save, delete 메소드를 갖춘 post 클래스를 생성하기로 결정했습니다. 이 클래스에는 데이터베이스 연결 파일(데이터베이스에 연결하는 데 사용됨)에 대한 참조도 있습니다. 로그인, 비밀번호, 데이터베이스 이름을 자신의 데이터베이스 정보로 바꿔야 합니다.
DEFINE('DB_USER', 'USERNAME');
DEFINE('DB_PASSWORD', 'PASSWORD');
DEFINE('DB_HOST', 'localhost');
DEFINE('DB_NAME', 'DATABASE');
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to MySQL: ' . mysql_error() );
연결 파일에 대한 참조와 데이터베이스 이름은 이 클래스의 생성자에 있습니다. 생성자는 다음 코드와 유사해야 합니다.
function Post(){
require_once('mysql_connect.php');
$this->table = "informit_ajax";
}
다음 dbConnect 메소드는 연결 생성을 담당합니다. 로그인 정보를 데이터베이스에 전달하여 이 메소드는 데이터베이스를 쿼리하기 전에 모든 핵심 메소드에서 재사용됩니다.
function dbConnect(){
DEFINE('LINK', mysql_connect(DB_HOST, DB_USER, DB_PASSWORD));
}
다음 get 메소드는 데이터베이스 테이블을 반복하여 데이터베이스 행을 기반으로 XML 문자열을 생성하고 해당 문자열을 요청자에게 반환합니다.
function get(){
$this->dbConnect();
$query = "SELECT * FROM $this->table ORDER BY ID";
$result = mysql_db_query(DB_NAME, $query, LINK);
$xml = "<?xml 버전="1.0" 인코딩="ISO-8859-1" ?>n";
$xml .= "<게시물>n";
while($row = mysql_fetch_array($result)) {
$xml .= "<게시물>n";
$xml .= "<id>" . $row['id'] . "</id>n";
$xml .= "<날짜>" . $row['날짜'] . "</날짜>n";
$xml .= "<제목><![CDATA[" . $row['제목'] "]]></제목>n";
$xml .= "<설명><![CDATA[" . $row['설명'] . "]]></설명>n";
$xml .= "</포스트>n";
}
$xml .= "</게시물>";
mysql_close();
header("콘텐츠 유형: 애플리케이션/xml; charset=UTF-8");
에코 $xml;
}
다음 save 메소드는 업데이트 및 삽입 위치를 처리하여 두 가지 목적을 달성합니다.
function save($id, $title, $description){
$this->dbConnect();
$query = "SELECT * FROM $this->table WHERE id='$id'";
$결과 = @mysql_query($쿼리);
if (mysql_num_rows($result) > 0)
{
$query = "$this->테이블 SET 제목 업데이트='$title', 설명='$description', 날짜=NOW() WHERE id='$id'";
$결과 = @mysql_query($query);
}
또 다른
{
$query = "INSERT INTO $this->테이블(제목, 설명, 날짜) VALUES ('$title', '$description', NOW())";
$결과 = @mysql_query($query);
}
mysql_close();
$this->get();
}
아래 삭제 메소드는 매개변수로 전달된 ID를 기반으로 위치를 삭제하는 역할을 합니다. 그런 다음 get 메소드를 호출하여 새 데이터를 요청 파일에 반환합니다.
function delete($id){
$this->dbConnect();
$query = "ID='$id'인 $this->테이블에서 삭제";
$결과 = @mysql_query($query);
mysql_close();
$this->get();
}
5. 포괄적인 애플리케이션
위의 부분을 함께 통합하려면 XML HTTP 요청과 PHP 객체 간의 통신 브리지 역할을 하는 간단한 파일을 생성해야 합니다. 이 시점의 페이지는 PHP 개체를 생성할 뿐만 아니라 쿼리를 수신하고 동적으로 생성된 메서드(이 경우 가져오기, 저장 또는 삭제)에 변수를 전달합니다. 아래 예제 쿼리에는 $method와 신뢰할 수 있는 $id, $title 및 $description 변수가 포함되어 있습니다.
require_once("../classes/Post.class.php");
$post = 새로운 포스트();
$post->$method($id, $title, $description);
이러한 기술에 대해서는 나중에 더 자세히 논의하겠습니다. 오늘날의 웹 개발은 다시 젊고 역동적으로 보입니다. 우리가 이 새로운 기술 시대의 일부가 된 것은 행운입니다.