Javascript onreadystatechange触发重新加载页面
我正在尝试学习一些组合php、javascript、sql、html的东西。。。 我创建了一些在firefox（WinXP和android版本）上完美运行的东西。 所需的操作是，每当我单击按钮“process！”，一个php脚本就会获取“textarea”中的文本，将每个单词放入数据库，并吐回一些htmlJavascript onreadystatechange触发重新加载页面,javascript,cross-browser,xmlhttprequest,Javascript,Cross Browser,Xmlhttprequest,我正在尝试学习一些组合php、javascript、sql、html的东西。。。 我创建了一些在firefox（WinXP和android版本）上完美运行的东西。 所需的操作是，每当我单击按钮“process！”，一个php脚本就会获取“textarea”中的文本，将每个单词放入数据库，并吐回一些html <html> <head> <link rel="stylesheet" type="text/css" href="somestyle.css"> <
<html>
<head>
<link rel="stylesheet" type="text/css" href="somestyle.css">
</head>
<body>
<script>
function ajaxUpdate()
{
var currStr = document.getElementById("textfield").value;
document.getElementById("textfield").value = currStr.trim();
var response;
try{
var httpReq = new XMLHttpRequest();
}
catch(error){
document.write(error);
}
httpReq.open("POST", "ajaxinput.php", true);
httpReq.send(currStr);
httpReq.onreadystatechange = function() {
if(httpReq.readyState == 4){
response = httpReq.responseText;
document.getElementById("ajaxoutput").innerHTML = response;
}
}
}
function processText(){
//document.write("in processURL");
url = document.getElementById("textarea").value;
document.getElementById("m_block").innerHTML = document.getElementById("m_block").innerHTML + "<br/>text is being worked on by server..."
var response;
try{
var httpReq = new XMLHttpRequest();
}
catch(error){
document.write(error);
}
httpReq.open("POST", "textinput.php", true);
httpReq.send(document.getElementById("textarea").innerHTML);
httpReq.onreadystatechange = function() {
if(httpReq.readyState == 4){
response = httpReq.responseText;
document.getElementById("m_block").innerHTML = response;
}
}
}
</script>
<div id="container">
<div id="l_block"></div>
<div id="m_block">
<form>
<br/>
<textarea id="textarea" rows="10" cols="42">Insert text here!</textarea>
<button onclick="processText()">process!</button>
</form>
</div>
<div id="r1_block">css 2</div>
<div id="r2_block">css 1</div>
</div>
</body>
</html>
函数ajaxUpdate（）
{
var currStr=document.getElementById（“textfield”）.value；
document.getElementById（“textfield”）.value=currStr.trim（）；
var反应；
试一试{
var httpReq=new-XMLHttpRequest（）；
}
捕获（错误）{
文件。写入（错误）；
}
open（“POST”，“ajaxinput.php”，true）；
httpReq.send（currStr）；
httpReq.onreadystatechange=函数（）{
如果（httpReq.readyState==4）{
响应=httpReq.responseText；
document.getElementById（“ajaxoutput”）.innerHTML=响应；
}
}
}
函数processText（）{
//document.write（“在进程URL中”）；
url=document.getElementById（“textarea”）.value；
document.getElementById（“m_块”）.innerHTML=document.getElementById（“m_块”）.innerHTML+“
服务器正在处理文本…”
var反应；
试一试{
var httpReq=new-XMLHttpRequest（）；
}
捕获（错误）{
文件。写入（错误）；
}
open（“POST”，“textinput.php”，true）；
httpReq.send（document.getElementById（“textarea”）.innerHTML）；
httpReq.onreadystatechange=函数（）{
如果（httpReq.readyState==4）{
响应=httpReq.responseText；
document.getElementById（“m_块”）.innerHTML=响应；
}
}
}
在这里插入文本！
过程
css 2
css 1
search: <input type="text" id="textfield" onkeyup="ajaxUpdate()" />
<div id="ajaxoutput"></div>
搜索：
textfield？我在Chrome的调试器中做了一些挖掘。结果是反应很好。当我设置断点时，我看到div被新内容填充。但是，回调函数在一行中被调用两次。在它完成后，我返回到以前的内容，服务器响应将不复存在。发生了什么事？就像乔纳森说的，你没有提到哪个浏览器，所以很难给你具体的答案。另外，您的AJAX实现似乎不完整，请尝试一下
//Put this on top before anything
if(!String.prototype.trim)
{
String.prototype.trim = function ()
{
return this.replace(/^\s+|\s+$/g,'');
};
}
var xmlhttp;
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)
{
//Do something
}
}
xmlhttp.open("POST","textinput.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//xmlhttp.send("fname=Henry&lname=Ford");
您也可以尝试使用类似jQuery的库，它将处理大多数浏览器的不一致性。我今天遇到了完全相同的问题，可能对明天的人有用 在form元素中，输入类型为“submit”，而form具有onsubmit=“func（）”。如下图所示：
<form id="x" name="x" onsubmit="func()">
<input type="submit" value="Submit"></input>
</form>
<form id="x" name="x" onclick="func()">
<input type="button" value="Submit"></input>
</form>
如果有人能解释为什么会这样，那就太好了。你到底在尝试哪些“其他浏览器”？什么版本？是一种相对较新的方法，不适用于任何地方：。此外，请检查浏览器的开发工具。当然，很抱歉，IE8、Chome desktop winxp和android、Opera for android、Firefox 19 for winxp和android版本、HTC oneX浏览器、Iphone浏览器和Linux的Midori浏览器。只有两个Firefox版本满足了我的要求……而且，删除
trim（）F12.send（）