마카로닉스

901 No

Codeigniter 8.XMLHttpRequest 구현하기

2017-09-03 18:46:12 By 머나먼나라 0 1019 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

CodeIgniter 에 적용하기 전에 매번 반복된는 XMLHttpRequest 객체를 사용하여 코드를 작성하기 번거롭기 때문에

해당 부분을 httpRequest.js 파일로 만들어 사용해보겠습니다.

httpRequest.js

function getXMLHttpRequest() {
	if (window.ActiveXObject) {
		try {
			return new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				return new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e1) { return null; }
		}
	} else if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else {
		return null;
	}
}
var httpRequest = null;

function sendRequest(url, params, callback, method) {
	httpRequest = getXMLHttpRequest();
	var httpMethod = method ? method : 'GET';
	if (httpMethod != 'GET' && httpMethod != 'POST') {
		httpMethod = 'GET';
	}
	var httpParams = (params == null || params == '') ? null : params;
	var httpUrl = url;
	if (httpMethod == 'GET' && httpParams != null) {
		httpUrl = httpUrl + "?" + httpParams;
	}
	httpRequest.open(httpMethod, httpUrl, true);
	httpRequest.setRequestHeader(
		'Content-Type', 'application/x-www-form-urlencoded');
	httpRequest.onreadystatechange = callback;
	httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}

httpRequest.js 파일을 이용해 간단한 샘플을 만들어 보고 게시판 소스에 적용해보겠습니다.

Ajax 통신을 담당할 컨트롤러를 새로 만듭니다.

ajax_board.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
 * Ajax 처리 controller.
 *
 * @author Jongwon, Byun <advisor@cikorea.net>
 */
class Ajax_board extends CI_Controller {

 	function __construct()
	{
		parent::__construct();
	}

	/**
	 * Ajax 테스트
	 */
	public function test()
	{
		$this->load->view('ajax/test_v');
	}

	public function ajax_action()
	{
		echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />';
		$name = $this->input->post("name");
		echo $name."님 반갑습니다!";
	}

ajax/test_v.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no" />
	<title>CodeIgniter</title>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script type="text/javascript" src="/bbs/include/js/httpRequest.js"></script>
	<script type="text/javascript">
	function server_request()
	{
		var csrf_token = getCookie('csrf_cookie_name');
		var name = "name="+encodeURIComponent(document.ajax_test.names.value)+"&csrf_test_name="+csrf_token;
		sendRequest("/bbs/ajax_board/ajax_action", name, callback_hello, "POST");
	}

	function callback_hello()
	{
		if ( httpRequest.readyState == 4 )
		{
			if ( httpRequest.status == 200 )
			{
				var contents = document.getElementById("contents");
				contents.innerHTML = httpRequest.responseText;
			}
		}
	}

	function getCookie( name )
	{
		var nameOfCookie = name + "=";
		var x = 0;

		while ( x <= document.cookie.length )
		{
			var y = (x+nameOfCookie.length);

			if ( document.cookie.substring( x, y ) == nameOfCookie ) {
				if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
					endOfCookie = document.cookie.length;

				return unescape( document.cookie.substring( y, endOfCookie ) );
			}

			x = document.cookie.indexOf( " ", x ) + 1;

			if ( x == 0 )

			break;
		}

		return "";
	}
	</script>
</head>
<body>
<div id="main">
	<form method="post" name="ajax_test">
	<label>이름</label>
	<div>
		<input type="text" name="names" value="웅파">
	</div>

	<div>
		<input type="button" onclick="server_request()" value="전송">
	</div>
	</form>

	<div id="contents"></div>
</div>

</body>
</html>