如前文所述,由于,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 *”)。
这样,就避免了刷新动作。
分享到:
相关推荐
易语言网络U盘服务器源码,网络U盘服务器,监听客户动静,网络服务器加入成员,写文件到,服务器发送命令,服务器接收文本,取接收命令,验证用户是否存在,显示用户密码,目录是否存在,查找文件,处理数据,服务器2发送数据,...
udp_fwq.c
PACU_fwq.rar
2018 台湾 SM2258XT_IM3D_PKGQ1229A_FWQ1204B0 L06B&B0KB
FWQ.ini
SM2258AA_MPQ0719A_FWQ0621A_Samsung 固态硬盘的开卡量产工具
tbl_5gc_fwq_if_info.sql
RL tcpnet程序使用轮询方式,中断方式需要写五功能
惠普G8系列 服务器驱动
WampServer 2.0i是Apache+PHP+Mysql集成环境套件,拥有简单的图形和菜单安装和配置环境。支持多国语言,包括简繁中文。 WampServer 2.0i集成了: Apache 2.2.11 ...MySQL 5.1.36 phpMyAdmin 3.2.0.1
SM2258XT蕊片固态硬盘开卡软件,巳成功开卡了两块硬盘了,分享给需要的朋友
慧荣主控SM2258XT_B16A制程颗粒专用开卡软件,包含以下所有版本flash库。PKGQ0816B_MPQ0816A_FWQ0816C0_RDTQ0808A0_DLLQ0815A_DBQ0816
慧荣SM2246 Q0824A版本
SMI224EN量产工具支持SLC
SM2258XT-3DTLCB16(制成)
example:var fwq=new fwqSelect("ex","ex",new Array("ex1","ex2","ex3"),{"width":100,"height":18,"itemh":18,"size":12,moreImg:"images/t.png"}); var val=fwq.val();//get value fwq.val("ex0");//set ...
am3358 linux4.4 u-boot-2016.09-fwqlzz.tar.gz 引导 !!!
在WIN2008系统后就已经不自带telnet服务端只有telnet客户端,那么WIN2008后的系统WIN2012 WIN10 WIN2016 WIN2019怎么安装telnet服务端,需要去官网上寻找并下载服务端软件直接安装就可以了
整理的IBM_PowerHA_7 1安装手册 比较实用