PHP development_php 기술에 AJAX 기술을 간단하게 적용-PHP 튜토리얼-php.cn

AJAX는 의심할 여지없이 2005년 가장 핫한 웹 개발 기술 중 하나입니다. 물론 이 공로는 Google과 분리될 수 없습니다. 저는 평범한 개발자이고 AJAX를 많이 사용하지 않습니다. 단지 제 경험을 공유하겠습니다. (이 글에서는 사용자가 이미 JavaScript, HTML, CSS 등 기본적인 웹 개발 능력을 갖추고 있다고 가정합니다.)

[AJAX 소개] Ajax는 클라이언트 측 스크립트를 사용하여 웹 서버와 데이터를 교환하는 웹 애플리케이션 개발 방법입니다. 다시 자르기 위한 상호 작용 프로세스를 중단하지 않고 웹 페이지를 동적으로 업데이트할 수 있습니다. Ajax를 사용하면 사용자는 기본 데스크탑 애플리케이션에 가까운 직접적이고 가용성이 높으며 풍부하고 동적인 웹 사용자 인터페이스를 만들 수 있습니다.

AJAX(비동기 JavaScript 및 XML)는 새로운 기술은 아니지만 CSS(Cascading Style Sheets), JavaScript, XHTML, XML 및 XSLT(Extensible Style Language Transformation)를 비롯한 여러 기존 기술을 사용하여 개발되었습니다. 데스크톱 소프트웨어처럼 작동합니다.

[AJAX 실행 원리]Ajax 상호작용은 XMLHttpRequest라는 JavaScript 객체로 시작됩니다. 이름에서 알 수 있듯이 클라이언트 측 스크립트가 HTTP 요청을 수행하고 XML 형식의 서버 응답을 구문 분석할 수 있습니다. Ajax 처리의 첫 번째 단계는 XMLHttpRequest 인스턴스를 생성하는 것입니다. HTTP 메소드(GET 또는 POST)를 사용하여 요청을 처리하고 대상 URL을 XMLHttpRequest 객체로 설정합니다.

HTTP 요청을 보낼 때 브라우저가 멈추고 서버의 응답을 기다리는 대신 페이지를 통해 사용자 인터페이스 상호 작용에 계속 응답하고 서버 응답을 처리하려고 합니다. 실제로 도착. 이를 달성하려면 XMLHttpRequest에 콜백 함수를 등록하고 XMLHttpRequest 요청을 비동기적으로 전달할 수 있습니다. 제어권은 즉시 브라우저로 반환되며, 서버 응답이 도착하면 콜백 함수가 호출됩니다.

[AJAX의 실제 응용]

1. Ajax 초기화 　　

Ajax는 실제로 XMLHttpRequest 객체를 호출하므로 먼저 이 객체를 호출해야 합니다. Ajax를 초기화하는 함수를 빌드합니다.

/**
* 初始化一个xmlhttp对象
*/
function InitAjax()
{
　 var ajax=false; 
　 try { 
　　 ajax = new ActiveXObject("Msxml2.XMLHTTP"); 
　 } catch (e) { 
　　 try { 
　　　 ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
　　 } catch (E) { 
　　　 ajax = false; 
　　 } 
　 }
　 if (!ajax && typeof XMLHttpRequest!='undefined') { 
　　 ajax = new XMLHttpRequest(); 
　 } 
　 return ajax;
}

로그인 후 복사

이 코드는 XMLHTTP 구성 요소를 호출하기 때문에 IE 브라우저에서만 사용할 수 있다고 말할 수 있습니다. 아니요, 테스트 후에는 Firefox에서도 사용할 수 있습니다. 그런 다음 Ajax 작업을 수행하기 전에 먼저 InitAjax() 함수를 호출하여 Ajax 객체를 인스턴스화해야 합니다.

2. Get 메소드 사용 　　

이제 첫 번째 단계는 Get 요청을 실행하고 /show.php?id=1을 가져오는 데 필요한 데이터를 추가하는 것입니다. 그러면 어떻게 해야 할까요?

News 1이라는 링크가 있다고 가정해 보겠습니다. 해당 링크를 클릭하면 새로 고침 없이 링크 내용을 볼 수 있습니다. 그럼 우리는 어떡하지?

//将链接改为：
＜a href="#" onClick="getNews(1)"＞新闻1＜/a＞
 
//并且设置一个接收新闻的层，并且设置为不显示：
＜div id="show_news"＞＜/div＞
 
　　 同时构造相应的JavaScript函数：
 
function getNews(newsID)
{
　 //如果没有把参数newsID传进来
　 if (typeof(newsID) == 'undefined')
　 {
　　 return false;
　 }
　 //需要进行Ajax的URL地址
　 var url = "/show.php&#63;id="+ newsID;
 
　 //获取新闻显示层的位置
　 var show = document.getElementById("show_news"); 
 
　 //实例化Ajax对象
　 var ajax = InitAjax();
 
　 //使用Get方式进行请求
　 ajax.open("GET", url, true); 
 
　 //获取执行状态
　 ajax.onreadystatechange = function() { 
　　 //如果执行是状态正常，那么就把返回的内容赋值给上面指定的层
　　 if (ajax.readyState == 4 && ajax.status == 200) { 
　　　 show.innerHTML = ajax.responseText; 
　　 } 
　 }
　 //发送空
　 ajax.send(null); 
}

로그인 후 복사

그러면 사용자가 "뉴스 1" 링크를 클릭하면 획득한 콘텐츠가 아래 해당 레이어에 표시되고 페이지가 새로 고쳐지지 않습니다. 물론, 위의 show.php 파일은 생략했습니다. show.php 파일이 존재하고 정상적으로 작동하여 데이터베이스에서 ID 1의 뉴스를 추출할 수 있다고 가정했습니다. 이 방법은 폼 등을 포함한 페이지의 모든 요소에 적합합니다. 실제로 애플리케이션에서는 폼에 대한 많은 작업이 있으며, 폼의 경우 POST 메서드가 주로 사용됩니다. 이에 대해서는 아래에서 설명합니다.

3. POST 방식을 사용하세요　

사실 POST 메소드는 Get 메소드와 비슷하지만 Ajax를 실행하면 조금 다릅니다.

사용자가 정보를 입력하는 양식이 있다고 가정해 보겠습니다. 새로 고치지 않고 사용자 정보를 데이터베이스에 저장하고 사용자에게 성공 메시지를 표시합니다.

//构建一个表单，表单中不需要action、method之类的属性，全部由ajax来搞定了。
＜form name="user_info"＞
姓名：＜input type="text" name="user_name" /＞＜br /＞
年龄：＜input type="text" name="user_age" /＞＜br /＞
性别：＜input type="text" name="user_sex" /＞＜br /＞
 
＜input type="button" value="提交表单" onClick="saveUserInfo()"＞
＜/form＞
//构建一个接受返回信息的层：
＜div id="msg"＞＜/div＞
　　 我们看到上面的form表单里没有需要提交目标等信息，并且提交按钮的类型也只是button，那么所有操作都是靠onClick事件中的saveUserInfo()函数来执行了。我们描述一下这个函数：
function saveUserInfo()
{
　 //获取接受返回信息层
　 var msg = document.getElementById("msg");
 
　 //获取表单对象和用户信息值
　 var f = document.user_info;
　 var userName = f.user_name.value;
　 var userAge = f.user_age.value;
　 var userSex = f.user_sex.value;
 
　 //接收表单的URL地址
　 var url = "/save_info.php";
 
　 //需要POST的值，把每个变量都通过&来联接
　 var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;
 
　 //实例化Ajax
　 var ajax = InitAjax();
　 
　 //通过Post方式打开连接
　 ajax.open("POST", url, true); 
 
　 //定义传输的文件HTTP头信息
　 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
　 //发送POST数据
　 ajax.send(postStr);
 
　 //获取执行状态
　 ajax.onreadystatechange = function() { 
　　 //如果执行状态成功，那么就把返回信息写到指定的层里
　　 if (ajax.readyState == 4 && ajax.status == 200) { 
　　　 msg.innerHTML = ajax.responseText; 
　　 } 
　 } 
}

로그인 후 복사

　　大致使用POST方式的过程就是这样，当然，实际开发情况可能会更复杂，这就需要开发者去慢慢琢磨。

4. 异步回调（伪Ajax方式） 　　

一般情况下，使用Get、Post方式的Ajax我们都能够解决目前问题，只是应用复杂程度，当然，在开发中我们也许会碰到无法使用Ajax的时候，但是我们又需要模拟Ajax的效果，那么就可以使用伪Ajax的方式来实现我们的需求。　　

伪Ajax大致原理就是说我们还是普通的表单提交，或者别的什么的，但是我们却是把提交的值目标是一个浮动框架，这样页面就不刷新了，但是呢，我们又需要看到我们的执行结果，当然可以使用JavaScript来模拟提示信息，但是，这不是真实的，所以我们就需要我们的执行结果来异步回调，告诉我们执行结果是怎么样的。　　

假设我们的需求是需要上传一张图片，并且，需要知道图片上传后的状态，比如，是否上传成功、文件格式是否正确、文件大小是否正确等等。那么我们就需要我们的目标窗口把执行结果返回来给我们的窗口，这样就能够顺利的模拟一次Ajax调用的过程。　　以下代码稍微多一点，并且涉及Smarty模板技术，如果不太了解，请阅读相关技术资料。　　

上传文件：upload.html

//上传表单，指定target属性为浮动框架iframe1
＜form action="/upload.php" method="post" enctype="multipart/form-data" name="upload_img" target="iframe1"＞
选择要上传的图片：＜input type="file" name="image"＞＜br /＞
＜input type="submit" value="上传图片"＞
＜/form＞
//显示提示信息的层
＜div id="message" style="display:none"＞＜/div＞
 
//用来做目标窗口的浮动框架
＜iframe name="iframe1" width="0" height="0" scrolling="no"＞＜/iframe＞
处理上传的PHP文件：upload.php
＜&#63;php
 
/* 定义常量 */
 
//定义允许上传的MIME格式
define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png"); 
//图片允许大小，字节
define("UPLOAD_IMAGE_SIZE", 102400);
//图片大小用KB为单位来表示
define("UPLOAD_IMAGE_SIZE_KB", 100); 
//图片上传的路径
define("UPLOAD_IMAGE_PATH", "./upload/"); 
 
//获取允许的图像格式
$mime = explode(",", USER_FACE_MIME);
$is_vaild = 0;
 
//遍历所有允许格式
foreach ($mime as $type)
{
　 if ($_FILES['image']['type'] == $type)
　 {
　　 $is_vaild = 1;
　 }
}
 
//如果格式正确，并且没有超过大小就上传上去
if ($is_vaild && $_FILES['image']['size']＜=USER_FACE_SIZE && $_FILES['image']['size']＞0)
{
　 if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name'])) 
　 {
　　 $upload_msg ="上传图片成功！";
　 } 
　 else
　 {
　　 $upload_msg = "上传图片文件失败";
　 }
}
else
{
　 $upload_msg = "上传图片失败，可能是文件超过". USER_FACE_SIZE_KB ."KB、或者图片文件为空、或文件格式不正确";
}
 
//解析模板文件
$smarty-＞assign("upload_msg", $upload_msg);
$smarty-＞display("upload.tpl");
 
&#63;＞

로그인 후 복사

模板文件：upload.tpl

{if $upload_msg != ""}
callbackMessage("{$upload_msg}"); 
{/if}
 
//回调的JavaScript函数，用来在父窗口显示信息
function callbackMessage(msg)
{
　 //把父窗口显示消息的层打开
　 parent.document.getElementById("message").style.display = "block";
　 //把本窗口获取的消息写上去
　 parent.document.getElementById("message").innerHTML = msg;
　 //并且设置为3秒后自动关闭父窗口的消息显示
　 setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000);
}

로그인 후 복사

　　使用异步回调的方式过程有点复杂，但是基本实现了Ajax、以及信息提示的功能，如果接受模板的信息提示比较多，那么还可以通过设置层的方式来处理，这个随机应变吧。

[结束语]这是一种非常良好的Web开发技术，虽然出现时间比较长，但是到现在才慢慢火起来，也希望带给Web开发界一次变革，让我们朝RIA（富客户端）的开发迈进，当然，任何东西有利也有弊端，如果过多的使用JavaScript，那么客户端将非常臃肿，不利于用户的浏览体验，如何在做到快速的亲前提下，还能够做到好的用户体验，这就需要Web开发者共同努力了。

以上就是本文的全部内容，希望对大家掌握AJAX技术在PHP开发中的简单应用有所帮助。