ホームページ php教程 php手册 PHP+AJAX 開発の基本チュートリアルの例

PHP+AJAX 開発の基本チュートリアルの例

Jun 21, 2016 am 08:57 AM
ajax image

Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

异步JavaScript和XML(AJAX)不是什么新技术,而是使用几种现有技术——包括级联样式表(CSS)、JavaScript、XHTML、XML和可扩展样式语言转换(XSLT),开发外观及操作类似桌面软件的Web应用软件。

[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的数据,那么我们应该怎么做呢?

假设有一个链接:新闻1,我点该链接的时候,不想任何刷新就能够看到链接的内容,那么我们该怎么做呢?

//将链接改为:

新闻1

//并且设置一个接收新闻的层,并且设置为不显示:

同时构造相应的JavaScript函数:

function getNews(newsID)

{

//如果没有把参数newsID传进来

if (typeof(newsID) == 'undefined')

{

return false;

}

//需要进行Ajax的URL地址

var url = "/show.php?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表单里没有需要提交目标等信息,并且提交按钮的类型也只是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

选择要上传的图片:

//显示提示信息的层

//用来做目标窗口的浮动框架

处理上传的PHP文件:upload.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");

?>

模板文件:upload.tpl

{if $upload_msg != ""}

callbackMessage("{$upload_msg}");

{/if}

//回调的JavaScript函数,用来在父窗口显示信息

function callbackMessage(msg)

{

//把父窗口显示消息的层打开

parent.document.getElementById("message").style.display = "ブロック";

//このウィンドウで取得したメッセージを書き込みます

parent.document.getElementById("message").innerHTML = msg;

//メッセージを表示するために 3 秒後に親ウィンドウを自動的に閉じるように設定します

setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000);

}

非同期コールバックを使用するプロセスは少し複雑ですが、基本的には Ajax の機能と情報プロンプトが受け入れられたテンプレートに多数ある場合は、レイヤーを設定することで対応できます。状況。



このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

jQuery AJAXリクエスト403エラーを解決する方法 jQuery AJAXリクエスト403エラーを解決する方法 Feb 19, 2024 pm 05:55 PM

jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

Bing Image Creatorを無料で使用する方法 Bing Image Creatorを無料で使用する方法 Feb 27, 2024 am 11:04 AM

この記事では、無料の BingImageCreator を使用して高品質の出力を取得する 7 つの方法を紹介します。 BingImageCreator (現在は ImageCreator for Microsoft Designer として知られています) は、優れたオンライン人工知能アート ジェネレーターの 1 つです。ユーザーのプロンプトに基づいて、非常にリアルな視覚効果を生成します。プロンプトがより具体的、明確、創造的であればあるほど、より良い結果が得られます。 BingImageCreator は、高品質の画像の作成において大きな進歩を遂げました。 Dall-E3 トレーニング モードを使用するようになり、より高いレベルの詳細とリアリズムが表示されます。ただし、一貫して HD 結果を生成できるかどうかは、高速な処理などのいくつかの要因によって決まります。

Xiaomi 携帯電話から画像を削除する方法 Xiaomi 携帯電話から画像を削除する方法 Mar 02, 2024 pm 05:34 PM

Xiaomi 携帯電話で画像を削除する方法? Xiaomi 携帯電話で画像を削除できますが、ほとんどのユーザーは画像の削除方法を知りません. 次に、編集者が提供する Xiaomi 携帯電話での画像の削除方法に関するチュートリアルです。ぜひご参加ください。 Xiaomi 携帯電話で画像を削除する方法 1. まず Xiaomi 携帯電話の [アルバム] 機能を開きます; 2. 次に、不要な写真を確認して右下の [削除] ボタンをクリックします; 3. 次に、[アルバム] をクリックします。上部にある特別な領域に入り、[ごみ箱]を選択します; 4. 次に、下図に示すように[ごみ箱を空にする]を直接クリックします; 5. 最後に[完全に削除]を直接クリックして完了します。

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページ コンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

Ajax機能を利用した非同期データ交換 Ajax機能を利用した非同期データ交換 Jan 26, 2024 am 09:41 AM

Ajax 機能を使用して非同期データ対話を実現する方法 インターネットと Web テクノロジーの発展に伴い、フロントエンドとバックエンド間のデータ対話が非常に重要になってきました。ページの更新やフォームの送信などの従来のデータ操作方法では、ユーザーのニーズを満たすことができなくなりました。 Ajax (非同期 JavaScript および XML) は、非同期データ対話のための重要なツールとなっています。 Ajax により、Web で JavaScript と XMLHttpRequest オブジェクトを使用できるようになります

See all articles