AJAX Asynchronous JavaScript And XML ( JavaScript XML)
WEB
XML Extensible Markup Language ( )
HTML HyperText Markup Language ( )
JSON JavaScript Object Notation (' JavaScript)
CSV Comma-Separated Values
HTTP HyperText Transfer Protocol ( )
DOM Document Object Model (' )
DHTML Dynamic HyperText Markup Language
PHP Hypertext Preprocessor (ó )
JAVA '-
URL Uniform Resource Locator ( )
XMLHttpRequest API- -볺 () - HTTP , JavaScript, JScript, VBScript
'-
Web - , Web- . Web-, , , , . , , , , . Ajax. 㳿 Web-. 볺 , 볺 Web- . , JavaScript, Ajax-, .
Ajax-, 볺 JavaScript- Java-. 䳿 JavaScript Java , . Java , , . JavaScript ᒺ , , .
Ajax-.
Web- Ajax.
|
|
|
.
:
- 㳺 Ajax;
- Web-;
- Web-.
- Web-.
- .
˲
1 WEB-ʲ ˲ CODEIGNITER ò AJAX
i ii Ajax
Ajax Web-, Web- 䳺, Web-. Web- .
Ajax , . Ajax : 㳿 䳿 JavaScript ᒺ XMLHttpRequest 䳿
볺 XML JSON. web- web-, web-, web- . ³ , . ³ HTML .
web-, 㳿 Ajax, 볺. 䳿 web- . , 䳿. HTML 볺 web-, .
src JavaScript, . src , 䳿 JavaScript, , .
, 㳿 Ajax . Macromedia Flash ( 4 ) XML CSV . web- .
ϳ Microsoft ᒺ XMLHttpRequest Internet Explorer 5, Ajax.
1.2 㳿 Ajax
- -;
- . , , . , . , . , , , , ϳ , . . Ajax , - . Ajax , , . , .
|
|
|
- ;
䳿 볺-, , ᒺ- , , . , , . , HTTP , web- JavaScript, .
- -;
. . . , ᒺ -, , 䳿 .
, , . , , . ϳ , , , , , . , 25 , .
- -;
㳿 AJAX, . , . , , , . .
1.3 㳿 Ajax
³ , , Ajax .
JavaScript.
JavaScript DOM, .
JavaScript ECMAScript. Web-, ' .
JavaScript Java. . JavaScript Sun Microsystems ( Java) JavaScript Netscape Netscape Communications.
JavaScript Trident (Internet Explorer), Presto (Opera), Gecko (Firefox, Mozilla, Netscape) KHTML/WebKit (Konqueror, Safari).
|
|
|
JavaScript '- , ' . JavaScript , , .
JavaScript , :
- ',
- '
-
-
-
-
, , AJAX.
㳿 DHTML JavaScript HTML- , . JavaScript <script></script> ' HTML 4.01 type="text/javascript", JavaScript.
Web- JavaScript . , JavaScript ( ᒺ ), .
JavaScript . ECMAScript , , .
JavaScipt ( Gecko , Trident).
1.4 Web Ajax
璺 JavaScript-ᒺ XMLHttpRequest. , .
HTML
ᒺ
XMLHttpRequest
PHP
( ) JavaScript-ᒺ XMLHttpRequest . DHTML. 䳿, Ajax . 䳿 , .
XML, JSON . ( ), . 볺, .
, JavaScript, DHTML.
, Web-, 볺, web- .
|
|
|
:
- JavaScript, web-.
- , Ajax, JavaScript.
- , Ajax, .
:
- JavaScript Java . JavaScript ( , , , ) JavaScript Java JavaScript HTML .
- , , , , (JavaScript, Java, Flash ..). HTML-.
- , , , . ( ), Web-, .
1.5 Ajax-
, , , . Ajax . Ajax , Ajax .
㳿 Ajax Wikipedia. JAX (A synchronous J avaScript A nd X ML) -, -, , . AJAX DHTML.
AJAX 2005- (Jesse James Garrett) -. AJAX . Ajax .
AJAX , . AJAX :
- DHTML ;
- XMLHttpRequest , ;
- JavaScript <SCRIPT> DOM, JSON);
- .
- , . AJAX , , . web- ( , 璺 ). AJAX , Google , Gmail, Google Maps Google Suggest. .
|
|
|
AJAX
- :
- - - ;
- ;
- - . .;
- , , .
AJAX
- - - .
- .
- , .
1.6 - AJAX-㳿
Ajax Google, Wikipedia, yahoo, meta. 㳿 Ajax. , Ajax .
- Google suggest Google Maps , Ajax;
- Protopage Ajax ( );
- eyeOS online - Ajax;
- BIM online- Ajax;
- Wikipedia.org Wikipedia.org ajax.
Google Suggest (. suggest ) . Google . 㳿 AJAX.
Protopage.
, Ajax Protopage. rss , .
eyeOS - ' . PHP, XML, JavaScript. - eyeOS Toolkit. 67 . -. eyeOS eyeOS Toolkit . eyeSoft, Portage, eyeOS . , AJAX XML . eyeOS XML . XML . 㳿 Ajax.
BIM.
- . . Ajax. - .
Wikipedia.org
- Ajax , . - . Wikipedia 㳿 Ajax.
㳿 . 䳿 AJAX. .
2 Web -
Web- , , , , -- (MVC). , (frameworks). PHP , Zend Framework, Symfony, Cake PHP, CodeIgniter . , Zend Framework Symfony, 3 , ; , . .
1. ᑺ- Web-, , .
2. MVC, 䳿 (model), (view), (-) (controller), .
3. , .
4. , HTML- , .
5. , .
6. , HTML-.
7. Web- .
8. Cookie-, , .
9. , Web-.
2.1 CodeIgniter
CodeIgniter (www.codeigniter.com) , , , , , , , , .
CodeIgniter
CodeIgniter index.php, , CodeIgniter . HTTP-, : HTTP, URL- . CodeIgniter, ( Web-). : , . ϳ URL . , , ( , ), , , , HTML-, . ( 2.1), , , CodeIgniter.
2.1- Codeigniter
Codeigniter ᒺ . Application. System ( 2.2).
2.2- Codeigniter
ndex.php - . HTTP- HTTP- ( 2.1) CodeIgniter
CodeIgniter
CodeIgniter ᑺ . Application. System ( 2.2).
Web- 璺 URL CodeIgniter.
2.2 , php, , database.php, URL routes.php . Web-, , Web-. , 2.2 , . :
- (controllers), ;
- (models), ( , , );
- (views), Web-, HTML-.
, , URL- . URL- ( 2.3):
2.3- URL-, CodeIgniter
URL- , 2.3. , , , , .
:
- http://example.com/portfolio/latest/5 - portfolio, latest, 5 .
- http://example.com/blog/created - blog, created, .
, 2.3 index.php. , index.php Web-. , Web- Apache (. .2.2) .htaccess :
RewriteEngine on
RewriteCond $1!^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
mod_rewrite Web- ( CodeIgniter). : RewriteCond , (index.php, images, robots.txt), RewriteRule , - , RewriteCond index.php. , CodeIgniter URL.
ᑺ 䳿 (, ) . PHP ( 2.4) /application/models. , . , (CI_Model), __ constructor(), . :
$this->load->model('Testmodel'); Testmodel .
˳ 2.1 -
<?php
class Testmodel extends CI_Model {
function__construct()
{
// Call the Model constructor
parent::__construct();
}
function get_data($id)
{
$sql = "SELECT fieldl FROM tablel WHERE id =?"; $q = $this->db->query($sql, array(id));
$row = $q->row();
return $row->field1;
}
}
:
$this->Testmodel->get_data(10);, ᑺ CodeIgniter. /application/config/autoload.php :
$autoload['model'] = array(testmodel‟);
CodeIgniter HTML- (: , , , ). . , PHP-: , (echo, print ). , PHP (for, foreach ) , , .
, .
2.2 Ajax
Ajax ( Javascript) Web-, Web- Web- , Web-. , , . JavaScript. . 볺 Ajax ᑺ Javascript XMLHttpRequest. ᑺ , . ᑺ . , , - , ᑺ. JQuery. Web- XPath CSS, , . Ajax JQuery :
1. (, ).
2. Javascript.
3. JSON, ᑺ Javascript.
4. ³ .
5. , .
6. HTML- .
3 CodeIgniter
3.1 CodeIgniter
CodeIgniter , htdocs Web- Apache, . 2.2. controllers views controllers.php welcome.php . ֳ . . http://localhost/index.php/, , 3.1. 
3.1- -
. Web-, , index.php, htdocs. URL index.php, , routes.php:
$route['default_controller'] = 'welcome';
, Welcome application/controllers/welcome.php ( , ). welcome.php 3.1:
˳ 3.1 - - welcome.php
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
function__construct()
{
parent::__construct();
}
function index()
{
$this->load->view('welcome_message');
}
}
welcome.php Welcome, CI_Controller . index(), , URL , /index.php. :
$this->load->view('welcome_message');
- , (view) welcome_message.php HTML. , HTML PHP: (echo, print ), (for, foreach ). ᑺ HTML , 䳿 , .
3.2 CodeIgniter
, . .
1. ϳ : , , .
2. .
3. / .
4. .
ϳ
ϳ ( create database userdb), ( use userdb), users id, uname upwd), ( insert into). 3.2.
˳ 3.2 -
C:\xampp\mysql\bin>mysql -u root -p Enter password: ********
Welcome to the MySQL monitor. Commands end with; or \g.
Vour MySQL connection id is 2
Server version: 5.0.51b-community-log MySQL Community Edition (GPL)
Type 'help;' or \h' for help. Type '\c' to clear the buffer.
mysql> create database userdb;
Query OK, 1 row affected (0.05 sec)
mysql> use userdb;
Database changed
mysql> create table users (id integer auto_increment, uname varchar(20), upwd ua rchar(20), primary key (id));
Query OK, O rows affected (0.01 sec)
mysql>insert into users(uname,upwd) values ('userl', pwd1');
Query OK, 1 row affected (0.03 sec)
mysql> select * from users;
| id | uname | upwd |
| 1 | userl | pwd1 |
1 row in set (0.0O sec)
mysql>
, . : , . 3.4. : index() login_result(). login . : ᑺ 䳿 ᑺ usermodel. ϳ ᑺ login, . , $data afterloginOK. $data .
˳ 3.3 - User
<? php if (!defined(BASEPATH')) exit('No direct script access allowed)
class User extends CI_Controller {
function__construct()
{
parent:: construct();
}
function index()
{
$this->load->view('login');
}
function login_result()
{
$this->load->database();
$this->load->model('usernodel');
if ($this->usernodel->login($this->input->post("name"), $this->input->post("pwd")))
{
$data[unane']=$this->input->post("nane");
$this->load->view('afterloginOK',$data);
}
else
{
$data['unane']=$this->input->post("nane"); $data['dt']=date('H:i:s');
$this->load->view ('afterloginBAD',$data);
}
}
}
, . , CodeIgniter 䑺 ᑺ database, (. 3.4).
˳ 3.4 -
<?php
class Usernodel extends CI_Model {
function__construct()
{
// Call the Model constructor parent::construct();
}
function login($unane, $upud)
{
$sql - "SELECT count(*) cnt FROM users WHERE unane -? AND upwd -? ";
$q - $this->db->query($sql, array($unane, $upud));
$row - $q->row();
return ($row->cnt > 0);
}
}
, CodeIgniter ᑺ- , , , ᑺ ( : $row->cnt), , select.
3 : , . HTML- PHP. 3.2-3.4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<titl>Գ</titl>
<style>
*{font-family:Arial}
p{nargin:5px 0 0 0}
</style>
</head>
<body>
<h3>Գ</h3>
<forn action="/index.php/user/login_result" method="post">
<p> ': </p><p> <input type="text" name="name" value=""> </p>
<p> :</p><p> <input type="password" name="pud" value=""> </p>
<p><input type="submit" value=""/>
</form>
</body>
</html>
3.2 - HTML-
<!DOCTVPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<titl> </titl>
<style>
*{font-family: Arial}
p{margin:5px 0 0 0}
</style>
</head>
<body>
<h3>Գ </h3>
<p> : <?=$uname?> </p>
</body>
</html>
3.3 - HTML- ( afterloginOK.php)
3.3 PHP <?=$uname?>, , $uname, ($data[uname‟]).
<!DOCTVPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<titl> </titl>
<style>
*{font-family: Arial}
p{margin:5px 0 0 0}
</style>
</head>
<body>
<h3>Գ </h3>
<>: <?=$uname?> </>
<>/ : <?=$dt?> </>
</body>
</html>
3.4 - HTML- ( afterloginBAD.php)
afterloginOK.php 3.8 HTML- PHP , .
3.3 CodeIgniter Ajax
CodeIgniter HTML. ( 3.5). :
1. HTML- (hint.html).
2. Javascript CodeIgniter (hint.js).
3. , (hint.txt).
3.5. HTML-
HTML- , ( 3.5):
˳ 3.5 - HTML-
<C!DOCTVPE html>
<html>
<head>
<script type^'text/jauascript" src="jquery;.js"></script>
<script type="text/jauascript" src="hint.js"></script>
<meta charset=utf-8 />
<title> Jquery Ajax</title>
<style type="text/css">
#hint {border: 1px solid black; margin:0}
#hint>diu:houer {background: ttccc}
#hint {display:none; margin-left:4px>
</style>
</head>
<body>
<form>
<diu>Mido:</diu>
<input type^'text" autoconplete="off" id="city"/>
<diu id="hint"></diu>
</form>
</body>
</html>
3.5 , CodeIgniter, hint.js, -. , ( <style>), HTML city div id=hint .
hint.js ( 3.6). CodeIgniter ( ) (.get()).
˳ 3.5 - Javascript
// id="city"
$().ready(function()
{
$<"itcity").keyup(show_hint).click(cl);
}
);
//
function cl(euent)
{
$("#hint").hide();
$("#hint").empty();
}
//
function show_hint(euent)
{
//
cl(null)
// s -
s = euent.target
if ($(s).ual()=="") return;
// , Math.random() - $.get ("hint.txt?,a+Math.random(), function (data) {
if (data==,,,,) return
var a = data.split('\n')
for (uar in a) {
// ,
if ([].indexOf($("#city").ual())>-1)
$("hint").append ("<diu>"+a[]+a"</diu>")
}
// onclick
$("#hint>diu").click(function(event){ $("#city").ual($(euent.target).text());cl(null)})
//
$("#hint>diu").ss({"font-weight":"bold"})
// ,
if($("#hint>div").length>0)
$("#hint").width($("#city").width()).show();
}
}
. ready() , cl() , (, ), show_hint() . , HTML CSS, #hint>div div id=hint.
hint.txt, (c 3.6):
3.6 - hint.txt,
. - , Web-, , , CodeIgniter. , ( Ajax).
