ขอถามเรื่องล็อกอินแบบajaxครับ
คือในหน้าเเรกผมสร้างฟรอมล็อกอินขึ้นมาแล้วใช้ajaxส่งค่าไปยังphpเพื่อทำการเช็คค่าว่ามีuserนี้หรือไม่ถ้ามีก็ให้ทำการเก็บค่า session เอาไว้เวลาเปิดหน้าเว็บขึ้นมาผมก็ใช้ onload เรียกฟังชั่น เช็คค่าของsession ถ้าsessionนั้นไม่เท่ากับค่าว่างก็ให้แสดงชื่อที่อยู่ในsessionนั้น มันก็ทำงานได้ปกติ แต่ทีนี้ผมสร้างหน้าเจใหม่ขึ้นมาอีก2เพจโดยใช้ajaxเรียกไฟล์ที่2มาโชว์ในหน้าเเรกแล้วก็ทำลิ้งให้ไฟล์2เรียกไฟล์ที่3ออกมาโชว์ในหน้าเเรกเหมือนกัน ทีนี้ตอนที่กดลิ้งของไฟล์ที่2ให้เรียกไฟล์ที่3ออกมาโชวในหน้าเเรกนั้นมันก็โชวปกติ แต่พอผมกดf5ปุ๊ปเมนูล็อกอินผมมันไม่เเสดงชื่อคนล็อกอินอะครับ
//ล็อกอิน
function innit_ajax(){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){}
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
try{
return new XMLHttpRequest();
}
catch(e){}
alert("browser cannot support");
return null;
};
var req=innit_ajax();
function login(){
var user =document.getElementById("user").value;
var pass =document.getElementById("pass").value;
var swe=Math.random();
var query="user="+user;
query+="&pass="+pass;
query+="&swe="+swe;
//alert(query);
req.open("POST","login.php",true);
req.onreadystatechange=function(){
if(req.readyState==4){
chklogin();
}
}
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
}
function chklogin(){
var swe=Math.random();
var query="swe="+swe;
//alert(query);
req.open("POST","chklogin.php",true);
req.onreadystatechange=function(){
if(req.readyState==4){
if(req.responseText=="n"){
document.getElementById("store").style.display="none";
}
else{
if(req.responseText=="admin"){
document.getElementById("store").style.display="";
document.getElementById("login").innerHTML="สวัสดีคุณเจ้าหน้าที่"+req.responseText+"<br><a href='#' onclick=logout()>ออกจากระบบ</a>";
}
else if(req.responseText=="store"){
document.getElementById("store").style.display="";
document.getElementById("login").innerHTML="สวัสดีคุณเจ้าหน้าที่"+req.responseText+"<br><a href='#' onclick=logout()>ออกจากระบบ</a>";
}
}
}
}
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
}
//ฟังชั่นเรียกไฟล์2มาแสดง
function showmaterial(){
var swe=Math.random();
var query="swe="+swe;
//alert(query);
req.open("POST","material.php",true);
req.onreadystatechange=function(){
if(req.readyState==4){
document.getElementById("show").innerHTML=req.responseText;
hidrow();
}
}
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
}
//ฟังชั่นเรียกไฟล์3มาแสดง
function quisition_detail(type,section){
var swe=Math.random();
var query="type="+type;
query+="§ion="+section;
query+="&swe="+swe;
alert(query);
req.open("POST","quisition_detail.php",true);
req.onreadystatechange=function(){
if(req.readyState==4){
document.getElementById("detail").innerHTML=req.responseText;
}
}
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
}
//ล็อกอิน
function innit_ajax(){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){}
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
try{
return new XMLHttpRequest();
}
catch(e){}
alert("browser cannot support");
return null;
};
var req=innit_ajax();
function login(){
var user =document.getElementById("user").value;
var pass =document.getElementById("pass").value;
var swe=Math.random();
var query="user="+user;
query+="&pass="+pass;
query+="&swe="+swe;
//alert(query);
req.open("POST","login.php",true);
req.onreadystatechange=function(){
if(req.readyState==4){
chklogin();
}
}
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
}
function chklogin(){
var swe=Math.random();
var query="swe="+swe;
//alert(query);
req.open("POST","chklogin.php",true);
req.onreadystatechange=function(){
if(req.readyState==4){
if(req.responseText=="n"){
document.getElementById("store").style.display="none";
}
else{
if(req.responseText=="admin"){
document.getElementById("store").style.display="";
document.getElementById("login").innerHTML="สวัสดีคุณเจ้าหน้าที่"+req.responseText+"<br><a href='#' onclick=logout()>ออกจากระบบ</a>";
}
else if(req.responseText=="store"){
document.getElementById("store").style.display="";
document.getElementById("login").innerHTML="สวัสดีคุณเจ้าหน้าที่"+req.responseText+"<br><a href='#' onclick=logout()>ออกจากระบบ</a>";
}
}
}
}
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
}
//ฟังชั่นเรียกไฟล์2มาแสดง
function showmaterial(){
var swe=Math.random();
var query="swe="+swe;
//alert(query);
req.open("POST","material.php",true);
req.onreadystatechange=function(){
if(req.readyState==4){
document.getElementById("show").innerHTML=req.responseText;
hidrow();
}
}
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
}
//ฟังชั่นเรียกไฟล์3มาแสดง
function quisition_detail(type,section){
var swe=Math.random();
var query="type="+type;
query+="§ion="+section;
query+="&swe="+swe;
alert(query);
req.open("POST","quisition_detail.php",true);
req.onreadystatechange=function(){
if(req.readyState==4){
document.getElementById("detail").innerHTML=req.responseText;
}
}
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
}
ปัญหาเกิดขึ้นก็เพราะ การ login แบบ Ajax จะเกิดขึ้นหลังจากโหลดหน้าเว็บเสร็จแล้วเท่านั้น ดังนั้น กิจกรรมใดๆที่เกิดขึ้นก่อนโหลดหน้าเว็บเสร็จ จะไม่มีการรับรู้ว่า ได้มีการ login แล้วครับ
วิธีการที่ดีก็คือ หากบันทึกสถานะการ login ไว้บน session แล้ว ให้ทำการตรวจสอบการ login ก่อน ทำงานอย่างอื่นเสมอ
สำหรับกรอบ login เอง ในตอนโหลดหน้าเว็บครั้งแรก จำเป็นต้องตรวจสอบการ login ก่อนโหลดเสมอครับ เช่น ตอนโหลดครั้งแรก เมื่อส่งคำสั่งไปเรียกกรอบ login ให้ทำการตรวจสอบว่า ได้ login ค้างไว้หรือไม่ ถ้า login อยุ่ก็ให้คืนกรอบสมาชิกออกมา แต่ถ้า ไม่ได้ login ก็ให้ส่งฟอร์ม login ออกมาแทน
แนะนำให้ลองอ่านบทความบนเว็บดูนะครับ มีอธิบายเรื่องนี้ไว้แล้ว