jquery 1_jquery での Ajax 学習メモ
AJAX の簡単な紹介:
AJAX は、Asynchronous JavaScript And XML (Asynchronous JavaScript And XML) を指し、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 AJAX を使用すると、JavaScript の XMLHttpRequest オブジェクトを使用して、JavaScript がサーバーと直接通信できるようになります。このオブジェクトにより、JavaScript はページをリロードせずに Web サーバーとデータを交換できるようになります。
jQuery は JavaScript フレームワークであり、理解しやすい JavaScript の軽量カプセル化です。
Ajax は、XML JavaScript と組み合わせた非同期リクエスト テクノロジであり、動的更新を実現できます。
ajax準備:
1.jqueryダウンロード:
公式サイトの最新ダウンロードアドレス: http://blog.jquery.com/2011/09/01/jquery- 1- 6-3-リリース/
ダウンロード時に jQuery 1.6.3 Minified または jQuery 1.6.3 Uncompressed を選択し、右クリックして「Thunder を使用してダウンロード」を選択します
2. 主な知識の紹介
2.1. Ajax 非同期送信手順:
1. dom を使用してテキスト ボックスの属性の値を取得します
document.getElementById("id name").value
2. XMLHttpRequest オブジェクトを作成します
ブラウザ上には XMLHttpRequest、ActiveXObject の 2 種類のオブジェクトがあります
3. コールバック関数の登録 コールバック関数を登録するときは、関数名のみが必要です。括弧は追加しないでください
コールバック関数を登録するときに、返されたデータ
1 番目の方法: クライアントから出力されたプレーン テキスト データをサーバーから取得します。
2 番目の方法: responseXML を使用して XML データ オブジェクトの DOM オブジェクトを受け取ります。
4.接続情報
5. データを送信し、サーバーとの対話を開始します
Post メソッド/get メソッド
2.2.ajax メイン メソッド:
(1).getElementById("id 属性値") ):
指定された id 属性値に従ってオブジェクトを取得します
(2 ).getElementsByTagName(tagname):
HTML ドキュメント全体で任意の HTML 要素を検索し、指定された要素を持つ要素のコレクションを返します名前
(3). セレクター:
セレクターには、基本セレクター、階層選択セレクター、属性セレクターなどが含まれます。このプログラムには、次のような基本的なセレクター #id のみがあります。
$("#myDiv"): ID「myDiv」を持つ要素を検索します。
2.3.XMLHttpRequest オブジェクト:
XMLHttpRequest は、次のような関数を提供します。ページのリロード ページがロードされると、Web ページが更新され、ページがロードされた後にクライアントがサーバーにデータを要求し、ページがロードされた後にサーバーがデータを受信し、バックグラウンドでクライアントにデータを送信します。
2.3.1. メソッド:
(1)overrideMimeType("text/html"):
サーバーに送信されるヘッダーをオーバーライドし、text/xml を MIME タイプとして強制します
(2) ) open(method, url, async, username,password):
URL や HTTP メソッドなどの HTTP リクエスト パラメーターを初期化しますが、リクエストは送信しません。
method パラメータはリクエストに使用される HTTP メソッド (GET、POST、HEAD など)、
url パラメータはリクエストの本文です。
async パラメータはリクエストが同期か非同期かを示します。誤ったリクエストは同期です。 、本当のリクエストは次のとおりです。 非同期の
ユーザー名とパスワードのパラメーターはオプションであり、URL で必要な承認の認証資格を提供します。指定すると、URL 自体で指定された修飾がオーバーライドされます。
(3)send(body):
open() メソッドに渡されるパラメータと、メソッド
send(body) に渡されるオプションのリクエスト本文を使用して、HTTP リクエストを送信します。open を呼び出す場合() ) 指定された HTTP メソッドは POST または PUT で、body パラメーターはリクエストの本文を文字列または Document オブジェクトとして指定します。リクエストボディが必要ない場合、このパラメータは null になります。
以前に呼び出された open() の async パラメータが false の場合、このメソッドはブロックされ、readyState が 4 になり、サーバーの応答が完全に受信されるまで戻りません。
async パラメータが true の場合、またはこのパラメータが省略された場合、send() はすぐに戻り、後述するように、サーバーの応答はバックグラウンド スレッドで処理されます。
(4)setRequestHeader(name, value):
開いているが送信されていないリクエストに HTTP リクエストを設定または追加します。
name パラメータは、設定するヘッダーの名前です。このパラメータには空白、コロン、改行を含めないでください。
value パラメータはヘッダーの値です。このパラメータには改行を含めることはできません
2.3.2. 属性:
(1)onreadystatechange:
readyState 属性が変更されるたびに呼び出されるイベント ハンドラー関数。また、readyState が 3 の場合、複数回呼び出される場合もあります。
(2)readyState:
XMLHttpRequest が最初に作成されたとき、この属性の値は 0 から始まり、完全な HTTP 応答が受信されるまで 4 まで増加します。
5 つの状態には、それぞれ非公式の名前が関連付けられています。次の表に、状態、名前、および意味を示します。
readyState の値は、リクエストの処理中以外はデクリメントされません。または、プロセス中に open() メソッドが呼び出されます。このプロパティの値が増加するたびに、onreadystatechange イベント ハンドラーがトリガーされます。
(3)status:
サーバーから返された HTTP ステータス コード (成功の場合は 200、「見つかりません」エラーの場合は 404 など)。 readyState が 3 未満のときにこのプロパティを読み取ると、例外が発生します。
(4)responseText:
これまでにサーバーから受信した応答本文 (ヘッダーを除く)、またはまだデータを受信していない場合は空の文字列。
readyState が 3 未満の場合、このプロパティは空の文字列です。このプロパティは、readyState が 3 の場合、それまでに受信した応答部分を返します。 readyState が 4 の場合、このプロパティは完全な応答本文を保持します。
応答に応答本文の文字エンコーディングを指定するヘッダーが含まれている場合は、そのエンコーディングを使用します。それ以外の場合は、Unicode UTF-8 が想定されます。
(5)responseXML: リクエストに対する応答。XML に解析され、Document オブジェクトとして返されます。
コード例:
注: この例はフロントエンドで構成されています。バックエンドはサーブレット実装を使用しますが、データベースにアクセスしてデータを検証しません。フロントデスクはhtmlとjavascriptで構成されており、jqueryでカプセル化されたajaxを使用する方法と、XMLHttpRequestオブジェクトを使用する方法があります。 2 つの検証方法の違いは、JavaScript スクリプトが異なるだけで、フロント ページとバックグラウンド サーブレットは同じです。
フロントエンド ajax.html
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> >
>ユーザー名:
;/br>
🎜>
バックグラウンド AJAXServer.java:
コードをコピー
public void doGet(HttpServletRequest request, HttpServletResponse)
throws ServletException, IOException {
response.setContentType ("text/html;charset=utf-8");
PrintWriter out= response.getWriter();
//1. パラメータを取得します
String old=request.getParameter("name");
//2. 問題があるかどうかを確認します
if(old==null ||old.length()==0){
out.println("ユーザー名を空にすることはできません");
}else{
//3. 検証操作
String name= old;
if(name.equals("pan")){
//4. 従来のアプリケーションとの違い。このステップでは、ユーザーが関心のあるデータを新しいページではなくページに返す必要があります。
out.println("Username[" name "] selected");
}else{
out .println("Username[" name "] を使用できます");
}
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}
javascript:verify.js
コピーコード
コードは次のとおりです:
function verify1(){
//1.テキストボックス内
//document.getElementById("username");
var jqueryObj= $("#username");
//ノードの値を取得します
var userName=jqueryObj . val();
//2. テキスト ボックス内のデータをサーバーのサーブレットに送信します
$.get("AJAXServer?name=" username,null,callback); function callback(data){
//3. サーバーから返されたデータを受信します
//4. サーバーから返されたデータをページに動的に表示します
// 情報を保存するノードを見つけます
var resultObj=$("#result");
resultObj.html(data);
}
//検証方法 1 をメソッド内に記述することです。同じ、両方 jquery によってカプセル化された ajax 動的検証フォーム データです
function verify2(){
$.get("AJAXServer?name=" $("#username").val(),null,function( data) {
$("#result").html(data);
}
var xmlhttp;//グローバル変数を定義します
function verify3(){
//1。 dom を使用してテキスト ボックス内の属性の値を取得します
var username=document.getElementById("username").value;
//2. XMLHttpRequest オブジェクトを作成します
//このオブジェクトを作成するには、IE と他の IE の違いに基づいて、異なるコードを記述する必要があります。ブラウザの種類
if (window. ブラウザのバグを修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/html");
}
} else if (window.ActiveXObject){
// IE6、IE5.5、IE5 の場合
// XMLHttpRequest オブジェクトの作成に使用される 2 つのコントロール名。js 配列に格納されます。前のバージョンの方が新しいです
var activexName= ["MSXML2.XMLHTTP ","Microsoft.XMLHTTP"];
for(var i=0;i
/ /作成が失敗した場合は例外がスローされ、ループを続けて作成を試行し続けることができます
try{
xmlhttp=new ActiveXObject(activexName[ i]);
break;
}catch(e) {
}
}
}
if(!xmlhttp){
alert("XMLHttpRequest オブジェクトの作成に失敗しました! ！ ");
return;
}
//3. コールバック関数を登録します。コールバック関数を登録するときは、関数名のみが必要です。括弧は追加しないでください。
//登録する必要があります括弧を追加すると関数の戻り値が登録されますが、これは間違っています
xmlhttp.onreadystatechange=callback3;
//4. 接続情報を設定します
xmlhttp.open(" GET","AJAXServer?name =" username,true);
//5. データを送信し、サーバーとの対話を開始します
xmlhttp.send(null);// ユーザー名は GET メソッドの URL にカプセル化されますしたがって、データをリクエストして送信するには、null
//POST メソッドを 1 つ送信するだけで済みます
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7316
9
1625
14
1349
46
1261
25
1208
29
jQuery AJAX リクエストで発生した 403 エラーを解決する方法
Feb 20, 2024 am 10:07 AM
タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。
jQuery AJAXリクエスト403エラーを解決する方法
Feb 19, 2024 pm 05:55 PM
jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。
Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか?
Mar 09, 2024 pm 05:36 PM
Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。
jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか?
Feb 23, 2024 pm 04:27 PM
jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る
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機能を利用した非同期データ交換
Jan 26, 2024 am 09:41 AM
Ajax 機能を使用して非同期データ対話を実現する方法 インターネットと Web テクノロジーの発展に伴い、フロントエンドとバックエンド間のデータ対話が非常に重要になってきました。ページの更新やフォームの送信などの従来のデータ操作方法では、ユーザーのニーズを満たすことができなくなりました。 Ajax (非同期 JavaScript および XML) は、非同期データ対話のための重要なツールとなっています。 Ajax により、Web で JavaScript と XMLHttpRequest オブジェクトを使用できるようになります
Ajax フレームワークを理解する: 5 つの一般的なフレームワークを探索する
Jan 26, 2024 am 09:28 AM
Ajax フレームワークを理解する: 特定のコード例を必要とする 5 つの一般的なフレームワークを調べます。 はじめに: Ajax は、最新の Web アプリケーション開発において不可欠なテクノロジの 1 つです。非同期データ対話のサポートやユーザー エクスペリエンスの向上などの機能により、フロントエンド開発に不可欠な要素となっています。 Ajax フレームワークをよりよく理解して習得するために、この記事では 5 つの一般的な Ajax フレームワークを紹介し、読者がこれらのフレームワークの使用法と利点を深く理解できるように具体的なコード例を示します。 1. jQuery jQuery は現在最も
PHP と Ajax: Ajax のセキュリティを向上させる方法
Jun 01, 2024 am 09:34 AM
Ajax セキュリティを向上させるには、いくつかの方法があります。 CSRF 保護: トークンを生成してクライアントに送信し、それを検証リクエストのサーバー側に追加します。 XSS 保護: htmlspecialchars() を使用して入力をフィルタリングし、悪意のあるスクリプトの挿入を防ぎます。 Content-Security-Policy ヘッダー: 悪意のあるリソースの読み込みを制限し、スクリプトとスタイル シートの読み込みを許可するソースを指定します。サーバー側の入力を検証する: Ajax リクエストから受け取った入力を検証して、攻撃者による入力の脆弱性の悪用を防ぎます。安全な Ajax ライブラリを使用する: jQuery などのライブラリによって提供される自動 CSRF 保護モジュールを利用します。
