避免刷新动作——FWQ数据处理

   如前文所述，由于，php只在服务端执行，js只在客户端执行，要想达到交流的目的，只有通过 http。而这就导致刷新动作的出现，这是我不想看到的。怎么办呢？在网上看到了很多这样的说法：用AJAX，那我就去看看吧，管它什么现在看不看得懂的事。

   “AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。”——W3school

 

哦？那我就需要知道HTTP requests了。

 

“通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！”

 

这正是我要的。

 

“使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")”

 

看来，我无论如何也避免不了try catch的使用了……

 

OK，看W3School的教程到现在，我只想说一句，AJAX啥都不是，还不如说得通俗一点：XMLHttpRequest对象。

一整个AJAX就是它了。

 

那么，现在可以考虑用XMLHttpRequest对象来达到我的目的了：

 

function Login()
{
	document.getElementById("user").value="root";
	var xmlHttp;
	xmlHttp=new XMLHttpRequest();
	xmlHttp.onreadstatechange=function()
	{
		if(xmlHttp.readstate==4)
		{
			document.getElementById("password").value=xmlHttp.responseText;
		}
	}
	xmlHttp.open("GET","../login.php",true);
	xmlHttp.send(null);
}

 

<div class="verticalboxes">
	<ul>
		<li>
			<input type="text" id="user" />
		</li>
		<li>
			<input type="text" id="password" />
		</li>
		<li>
			<input type="button" value="Login" onClick="Login()" />
		</li>
	</ul>
</div>

<?php
	echo "Hello";
?>

刷新页面，输入框中无任何变化，点击Login按钮，“user”文本框中出现“root”字样，“password”文本框无变化。

 

如上，Login()运行了，但是xmlHttp没有起作用。难道是Google浏览器不支持？

 

function Login()
{
	document.getElementById("user").value="root";
	var xmlHttp;
	try
	{
		xmlHttp=new XMLHttpRequest();
	}
	catch(e)
	{
		document.getElementById("password").value="Exception";
	}
	xmlHttp.onreadstatechange=function()
	{
		if(xmlHttp.readstate==4)
		{
			document.getElementById("password").value=xmlHttp.responseText;
		}
	}
	xmlHttp.open("GET","../login.php",true);
	xmlHttp.send(null);
}

 “password”框没有出现“Exception”字样……为什么？

 

我晕！！！

xmlHttp.onreadystatechange才对！

 

怎么，改了还是没反应？

 

居然还有一处：xmlHttp.readyState 大写S。

 

xmlHttp.onreadystatechange=function()
{
	if(xmlHttp.readyState==4)
	{
		document.getElementById("password").value=xmlHttp.responseText;
	}
}

 这次好了。

 

（发现了一个大问题！

我写的网页在 Google浏览器里排版正常，搬到 IE里就乱透了。

得空得重新排版了。）

 

然后，是FWQ获取用户发送的数据的问题：

 

function Login()
{
	var xmlHttp;
	try
	{
		xmlHttp=new XMLHttpRequest();
	}
	catch(e)
	{
		document.getElementById("password").value="Exception";
	}
	xmlHttp.onreadystatechange=function()
	{
		if(xmlHttp.readyState==4)
		{
			document.getElementById("password").value=xmlHttp.responseText;
		}
	}
	var user=document.getElementById("user").value;
	url="../login.php"+"?q="+user;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

 

<?php
	$user=$_GET["q"];
	echo "Hello ".$user;
?>

 如我所需，向第一个文本框中输入内容后，点击Login，第二个文本框出现相应的消息（“Hello *”）。

 

这样，就避免了刷新动作。