javascript - AJAX session 调用了两次。第二次不显示警报

Question

我有一个 AJAX session ，它在页面加载时调用一次，在单击后再次调用。第二次它没有获得就绪状态更改，所以我决定通过在函数中放置一个警告框来测试它。警告框显示在页面加载上。但是在单击时它不会显示 - 明白这一点 - 即使 PHP 端执行了。更令人费解的是，如果我尝试测量就绪状态，它永远不会出现(不是 0、1、2、3 或 4 - 警告框甚至不会出现)，而且我没有得到返回文本。

我最终想要实现的是让 xmlhttp.responseText 返回一个值，就像它在页面加载时所做的那样。我错过了什么？

JavaScript:

function ajaxSession()
{
alert();
xmlhttp = undefined;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
	z = xmlhttp.responseText;
    }
  }
}

function stateCheck()
{
ajaxSession();
xmlhttp.open('POST', thisurl + '/favoritecheck.php',false);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("0=" + perform + "&1=" + thisplace + ",&2=" + thisusername);
}


function firstCheck()
{
perform = 0;
stateCheck();
	if (z == 'found')
	{
	document.getElementById("favorite").src="http://www.********.com/images/favorite-on.png";
	document.getElementById("favtext").innerHTML="This is a favorite!";
	}
	if ( z == 'nouser')
	{
	perform = 1;
	stateCheck();
	}
}

function heartCheck()
{
perform = 2;
stateCheck();
	if (z == 'added')
	{
	document.getElementById("favorite").src="http://www.********.com/images/favorite-on.png";
	document.getElementById("favtext").innerHTML="This is a favorite!";
	}
	if (z == 'subtracted')
	{
	document.getElementById("favorite").src="http://www.********.com/images/favorite-off.png";
	document.getElementById("favtext").innerHTML="Add to your favorites.";
	}
}



if (loggedin == 1)
{
document.writeln('<img id="favorite" style="cursor: pointer;" onclick="heartCheck()" src="http://www.********.com/images/favorite-off.png" alt="Favorite" />'
+ '<br />'
+ '<div id="favtext" style="color: #D20425;">'
+ 'Add to your favorites.'
+ '</div>');
firstCheck();
} else if (loggedin == 0)
{
document.writeln('<img id="favorite" style="cursor: pointer;" src="http://www.********.com/images/favorite-off.png" alt="Favorite" />'
+ '<br />'
+ '<div id="favtext" style="color: #D20425;">'
+ '<a style="color: #800000; font-weight: bold;" href="' + thisurl + '/wp-login.php">Log in</a> to add favorites.'
+ '</div>');
}

PHP:

<?php

include('connect.php');

$salt = "********";

$perform = $_POST[0];
$place = $_POST[1];
$user = $_POST[2];
$usercrypt = crypt(md5($user),$salt);
$placeid = trim($place,",");

function checkNow()
{
global $usercrypt;
global $place;
global $conn;
$urow = mysqli_query($conn, "SELECT Users.User FROM Users WHERE Users.User='" . $usercrypt . "';");
	if (mysqli_num_rows($urow) > 0)
	{
	$favcheck = mysqli_query($conn, "SELECT Users.Favorites FROM Users WHERE Users.User='" . $usercrypt . "';");
	$favcheck = mysqli_fetch_array($favcheck);
	$favcheck = $favcheck[0];
		if (strpos($favcheck, $place) !== false)
		{
		$answer = 'found';
		}
		else
		{
		$answer = 'notfound';
		}
	}
	else
	{
	$answer = 'nouser';
	}
return array($answer,$favcheck);
unset($answer);
}
	
if ($perform == "0")
{
$sendback = checkNow();
echo $sendback[0];
unset($sendback);
}

if ($perform == "1")
{
global $usercrypt;
global $conn;
mysqli_query($conn, "INSERT INTO Users (User) VALUES ('" . $usercrypt . "')");
}

if ($perform == "2")
{
$sendback = checkNow();
global $place;
global $placeid;
global $usercrypt;
global $conn;
$currentnum = mysqli_query($conn, "SELECT Places.Favorites FROM Places WHERE Places.PlaceID=" . $placeid);
$currentnum = mysqli_fetch_array($currentnum);
$currentnum = $currentnum[0];
	if ($sendback[0] == 'found')
	{
	$currentnum--;
	$change = str_replace($place,'',$sendback[1]);
	mysqli_query($conn, "UPDATE Users SET Favorites='" . $change . "' WHERE User = '" . $usercrypt . "'");
	mysqli_query($conn, "UPDATE Places SET Places.Favorites=" . $currentnum . " WHERE Places.PlaceID =" . $placeid);
	$answer = 'subtracted';
	}
	if ($sendback[0] == 'notfound')
	{
	$currentnum++;
	$change = $sendback[1] . $place;
	mysqli_query($conn, "UPDATE Users SET Favorites='" . $change . "' WHERE User = '" . $usercrypt . "'");
	mysqli_query($conn, "UPDATE Places SET Places.Favorites=" . $currentnum . " WHERE Places.PlaceID =" . $placeid);
	$answer = 'added';
	}
return $answer;
unset($answer);
}

unset($_POST);

?>

Answer 1

z 的值将在 xmlhttp 对象接收到就绪状态更改之前进行评估。您需要将处理返回值的所有代码放入 onreadystatechange 函数本身，因为这是唯一保证在您收到异步响应后调用的函数。

你可以这样做:

var xmlhttp = false;
// The rest of your code, but remove the `onreadystatechange` assignment from ajaxSession()
// ...
// ...
function heartCheck() {
    perform = 2;
    stateCheck();
    xmlhttp.onreadystatechange = function() {
        z = xmlhttp.responseText;
        if (z == 'added')
        {
        document.getElementById("favorite").src="http://www.********.com/images/favorite-on.png";
        document.getElementById("favtext").innerHTML="This is a favorite!";
        }
        if (z == 'subtracted')
        {
        document.getElementById("favorite").src="http://www.********.com/images/favorite-off.png";
        document.getElementById("favtext").innerHTML="Add to your favorites.";
        }
    }
}

每次您想要评估 AJAX 响应时，您都需要执行这样的处理程序。

像我上面那样在脚本开头声明全局变量也是最清楚的——正如@jeroen 提到的，这不是明确要求的，但这是一种很好的做法，可以帮助您跟踪范围。令人困惑的是 z 仅在 xmlhttp.onreadystatechange 函数内定义，但您却在整个脚本中全局使用它。因此，一个简单的技巧是将 var z = '' 放在 JavaScript 的开头，以使您的意图更加清晰(无论是对您自己还是对可能正在查看您的代码的其他人:))