XMLHttpRequestオブジェクトを使わずにAjaxの効果を実現する方法まとめ
この記事では、XMLHttpRequestオブジェクトを使用せずにAjax効果を実現する例を説明します。以下のように参考までに共有します。
序文
私はAjaxに連絡するために使用される、ちょうどAjaxの効果を達成するためにJqueryのAPIを使用し、詳細にそれを勉強していなかった、最近Ajaxの原理を学ぶことに、私はあなたが注意を払う願って、Ajaxの記事に時間から時間にリリースされます！私は、Ajaxの記事で、あなたのために働くことができるようになります。
Ajaxの原理。
ページを更新することなく、XMLHttpRequestを使用してHTTPリクエストを送信します。
件名
しかし、XMLHttpRequestオブジェクトに頼らずにAjaxの効果を実現することは可能です。Jsを使って、ページのリフレッシュやジャンプをもたらすことなく、バックエンドサーバーへのリクエストを実現することができるのです。いくつかの方法をまとめましたので、その使い方を説明する例を用意します。
メソッドです。
(1) 204 No Contentステータスコードを使用し、ブラウザが204を受信したとき、ページはジャンプを行いません
/
(2) 画像読み込み機能を使ってリクエストを完了させる
(3) iframeの特性を利用する
1. 204のステータスコードの使用
原則です。
サーバーが応答ステータスコード204を送信した場合、コンテンツがないことを意味し、ページが変更されないのは、それがブラウザ
事例を紹介します。
ページ上の投票ボタンをクリックするリフレッシュレス・ポーリング・アプリケーションは、新しい投票をテキストファイルに追加するようサーバーに要求しますが、ページは変更されません。
ファイル構成図。
01-vote.htmlファイルです。
メインはフォームとボタンで、ボタンへのリンクがリクエストの
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Refreshless voting interface</title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>No refresh polling interface</h1>
<img src=". /lin.jpg"/>
<p>
<a href=". /01-vote.php" rel="external nofollow" >vote</a>
</p>
</body>
</html>
01-vote.phpファイルです。
テキストファイルの内容を読み取り、テキストファイルの数字に1を足してファイルに書き戻すことで投票効果をシミュレートしています
<?php
/**
* Voting procedure
* @author webbc
*$number = file_get_contents('. /01-vote-res.txt');//read the contents of the file
$number++;//add 1
file_put_contents('. /01-vote-res.txt',$number);//rewrite to the file
//the server sends response header 204, the front-end will not respond, so that the front-end to ajax effect
header('HTTP/1.1 204 No Content');
? >
レンダリング
2. 画像読み込み機能を使って、httpリクエストを完了させる
原則です。
リンクをクリックしたときに、JSコードを使って画像のsrc属性をリクエストするリンクに動的に設定することで、ブラウザが先に進んでリンクをリクエストし、ページがジャンプしないようにすることができます。
ケース
あるいは、上記のような投票手続きを例にとると
文書構造図。
02-vote.htmlファイルです。
まず、aタグにクリックイベントを設定し、JSで画像ノードを作成し、そのノードのsrc属性にリクエストするリンクを設定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Refreshless voting interface</title>
<link rel="stylesheet" href="">
</head>
<script>
//voting function
function vote(){
var img = document.createElement('img');//create img node
img.src = '02-vote.php';//set the src attribute
}
</script>
<body>
<h1>No refresh polling interface</h1>
<img src=". /lin.jpg"/>
<p>
<a href="javascript:void();" rel="external nofollow" onclick="vote();">vote</a>
</p>
</body>
</html>
02-vote.phpファイルです。
01-vote.phpとの違いは、返されるステータスコードが設定されなくなったことです。
<?php
/**
* Voting procedure
* @author webbc
*$number = file_get_contents('. /02-vote-res.txt');//read the file
$number++;//add 1
file_put_contents('. /02-vote-res.txt',$number);//rewrite back to the file
? >
レンダリング
方法1と同様の効果はここでは得られません
3. iframeの機能を利用する
原則
iframe要素は、別の文書を含むインラインフレームを作成しますが、これは何を意味するのでしょうか？現在のブラウザが訪れているページに、別のページが含まれることを意味します。サーバーに要求したいとき、この内部ページにサーバーを要求させれば、メインインターフェイスがジャンプしたりリフレッシュしたりすることなく、サーバーに要求することができます。
例
ユーザー登録を例にとると
ファイル構成図。
01-reg.htmlファイルです。
主にフォームとiframeタグで、iframeタグはwidth="0" height="0" frameborder="0" で見えないように設定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Refreshless registration interface</title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>No refresh user registration screen</h1>
<! -- holds registration return information -->
<p id="regres"></p>
<form method="post" action="01-reg.php" target="reg">
Username: <input type="text" name="username" /><br/>
Email: <input type="text" name="email" /><br/>
<input type="submit" value="register" />
</form>
<! -- invisible iframe tag -->
<iframe width="0" height="0" frameborder="0" name="reg"></iframe>
</body>
</html>
01-reg.phpファイルです。
Postデータを受け取り、空であるかどうかを判断し、空であればメインインターフェイスに"Information incomplete''と表示し、それ以外は"Registration successful"と表示しますが、例なのでここでは単にその判断結果を書いています。
<?php
/**
* Registration process
* @author webbc
*header('Content-type:text/html;charset=utf-8');//set encoding
if(trim($_POST['username']) === '' || trim($_POST['email']) === ''){//If either username or email is empty
echo '<script>parent.document.getElementById("regres").innerHTML="Message incomplete"</script>';//output in main interface"Message Incomplete"
exit;
}
echo '<script>parent.document.getElementById("regres").innerHTML="Registration successful"</script>';//output "Registration in the main interface Success"
? >
レンダリング
ajax関連のコンテンツについては、こちらのトピックをご覧ください： "The jqueryにおけるAjaxの使用法まとめ をご覧ください》、 《quot; The JavaScriptにおけるajax操作のテクニックまとめ 》, 《 PHP+ajaxのTipsと応用のまとめ そして asp.net ajaxスキルまとめトピック
この記事がajaxプログラミングのお役に立てれば幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン