ここで、AJAX を使用してページのログインと登録ユーザー名の検証を実装する簡単な例を紹介します。今からそれを皆さんと共有し、皆さんの参考にしてください。
AJAX は「Asynchronous Javascript And XML」(Asynchronous JavaScript and XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。
AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。その中心となるのは、JavaScript オブジェクト XMLHttpRequest です。 Internet Explorer 5 で初めて導入されたこのオブジェクトは、非同期要求をサポートするテクノロジです。つまり、XMLHttpRequest を使用すると、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックすることなく応答を処理できるようになります。
AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。
従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。
登録時に登録情報を送信すると、数秒待ってからページがリロードされ、「ユーザー名が使用されています」というメッセージが表示されます。ここでは、AJAX を使用して非同期リクエストを実装することで、ページをリロードせずにデータベースと通信できます。
XMLHTTPRequest オブジェクトを作成する
JavaScript を使用して HTML ページに XMLHTTPRequest オブジェクトを作成し、AJAX 非同期リクエストを実装します:
<span style="font-size:14px;"> var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { alert(xmlhttp.responseText); } else { alert("AJAX服务器返回错误!"); } } } xmlhttp.send(); </span>
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP') ; //互換性を考慮して XMLHTTP オブジェクトを作成します
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true) //サーバーの GetDate1.ashx に送信するための「準備」を行います。リクエストの送信 (GET にはキャッシュの問題が発生する可能性があります)。ここではまだリクエストは行われていません。
readyState == 4 は、サーバーが完了データを返したことを意味します。 2 (リクエストは送信され、処理中)、3 (レスポンス内のデータの一部は利用可能ですが、サーバーはレスポンスの生成を完了していません) を経験したことがあるかもしれません
注:
Don 't think if (xmlhttp .readyState == 4) 送信前に実行するのは間違っているように感じます。xmlhttp.send(); はその後にのみリクエストの送信を開始します。このとき、サーバーがデータを返すのを待たずにリクエストの送信が開始され、実行が継続されるため、ブロックされず、インターフェイスがスタックすることはありません。これが AJAX の「非同期」の意味です。
AJAXのカプセル化
実際のプロジェクト開発ではAJAXの非同期リクエストが多くの場所で使用されますが、オブジェクトを作成するコードが長くてコピペするのが面倒で、そのため、AJAX をカプセル化する必要があります。これを js 関数ファイルにカプセル化し、参照用に Web ページにインポートします。
単純な AJAX カプセル化コード:
<span style="font-family:Times New Roman;font-size:14px;"> function ajax(url,onsuccess,onfail) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { onsuccess(xmlhttp.responseText);//成功时逻辑操作 } else { onfail(xmlhttp.status);//失败是逻辑操作 } } } xmlhttp.send(); //这时才开始发送请求 }</span>
カプセル化が完了したら、ログイン判定コードの記述を開始できます (私は .net を使用しています):
まず、HTML ページの login.htm と ashx 汎用ハンドラーの userhandle を作成します。 、要求された URL にはアクション パラメーターが含まれており、要求は一般的なハンドラーで処理されます。
function Submit1_onclick() { var name = document.getElementById("name").value; var psw = document.getElementById("psw").value; if (psw != "" && name != "") { //调用AJAX ajax("../userhandle.ashx?operate=login&userName=" + name + "&psw=" + psw, function (resText) { if (resText == "fail") { alert("用户名或密码错误!"); return false; } else { document.write(resText); } }) } else { alert("请输入完整登陆信息!"); return false; } }
汎用処理プログラムでリクエストアクションを受け取り、該当するクエリを判断して実行し、文字列を返します。リクエストを受け取った後、フロントページが対応する関数を判断して実行します。
public void login(HttpContext context) { userBLL ub = new userBLL(); string userName = context.Request["userName"]; string userPsw = context.Request["psw"]; bool b = ub.Login(userName, userPsw);//封装好的bll层方法,判断用户名密码是否正确 if (b == true) { context.Session["Name"] = userName; context.Session["role"] = "user"; context.Response.Write("success"); } else { context.Response.Write("fail"); } }
サーバーは判定が完了すると成功か失敗かをクライアントに送信します。以上でAJAX非同期リクエストによるログインが完了します。
ユーザー名を決定するための登録については、そのまま貼り付けます:
function check() { var userName = document.getElementById("Text1").value; if (userName == "" || userName == null) { document.getElementById("nameMeg").style.color = "red"; document.getElementById("nameMeg").innerHTML = "用户名为6-10位英文或数字"; } else { ajax("../userhandle.ashx?operate=checkName&userName=" + userName, function (resText) { if (resText == "forbid") { document.getElementById("nameMeg").style.color = "red"; document.getElementById("nameMeg").innerHTML = "用户名含有非法词语"; } else if (resText == "already have") { document.getElementById("nameMeg").style.color = "red"; document.getElementById("nameMeg").innerHTML = "用户名已被使用"; } else { document.getElementById("nameMeg").style.color = "green"; document.getElementById("nameMeg").innerHTML = "可以使用"; } }) } }
上記は、皆さんのためにまとめたものです。今後、皆さんのお役に立てれば幸いです。
関連記事:
Ajax が新しいウィンドウを開いてブラウザーによってブロックされる場合の 2 つの解決策
以上がAJAX を使用してページ ログインと登録ユーザー名の検証を実装する簡単な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。