一个简单的ajax问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个简单的ajax问题相关的知识，希望对你有一定的参考价值。

<%
Dim db
Set db = Server.CreateObject("ADODB.Connection")
db.Open "Driver=Sql Server;Server=X.X.X.X;UID=a;PWD=;Database=name"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
var xmlHttp;
var id_str;
var id_arr;
var url;
function showName()

id_str = document.getElementById("id_hidden").value;
id_arr = id_str.split(",");
for(i=0;i<id_arr.length;i++)

xmlHttp=GetXmlHttpObject();
url="getname.asp";
url=url+"?id="+ id_arr[i];
url=url+"&sid="+Math.random();
alert(url);
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
xmlHttp.onreadystatechange=function()stateChanged(id_arr[i]);




function stateChanged(id)

alert(xmlHttp.readyState);
if (xmlHttp.readyState==4)

alert(id);
var div_object
div_object = eval("document.getElementById(\"link_" + id + "\")")

div_object.innerHTML=xmlHttp.responseText;



function GetXmlHttpObject()

var xmlHttp=null;
try

// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();

catch (e)

// Internet Explorer
try

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

catch (e)

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");


return xmlHttp;


</script>
</head>
<body onload="showName()">
<%
dim sql,rs,id_str

sql = "select * from table"

set rs = db.execute(sql)

id_str = ""
%>
<table>
<tr>
<td>姓名
</td>
<td>
是否上传过文件
</td>
</tr>
<%
do while not rs.eof
%>
<tr>
<td>
<%=rs("n")%>
</td>
<td>
<div id="link_<%=rs("id")%>">
未经过ajax
</div>
</td>
</tr>
<%
if id_str = "" then

id_str = id_str + cstr(rs("id"))

else

id_str = id_str + "," + cstr(rs("id"))

end if

rs.movenext

loop
%>
<input type="hidden" value="<%=id_str%>" name="id_hidden" />
</table>
<%
rs.close
set rs = nothing
db.close
set db = nothing
%>
</body>
</html>

我有一个简单的asp页面，就是先从一个库读取一部分信息，再用ajax再从令一个库读取一部分信息，填回asp开始生成的table，我刚接触ajax，绕来绕去给自己绕糊涂了，if (xmlHttp.readyState==4)总是过不去，大家帮我看看这段代码怎么改改。
getname.asp里面的代码非常简单，就是连数据库然后取个值response出来。我就不贴出来了。麻烦大家帮我看看这页怎么改，必须先从一个库取值，然后用ajax从另一个库再填回到开始生成的table中。
对了 那里面那些alert没有什么具体作用。

一楼的朋友，你的代码我看明白了，可能我没说明白，我的具体问题是，如何在一个循环内，多次调用XMLHttpRequest对象，向服务器发送多次请求。

最后问题解决了，用的是多线程js。感谢各位

1.建立IE5、IE6、IE7和FireFox通用的XMLHttpRequest对象
<script type="text/javascript">
var xmlHttp;
function createXmlRequest()
try
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
catch(e)
xmlHttp=new ActiveXObjec("Microsoft.XMLHTTP");
if(!xmlHttp && typeof XMLHttpRequest!=\'undefined\')
try
xmlHttp=new XMLHttpRequest();
catch(e)
xmlHttp=false;



</script>

2.建立发送请求
function getText()
createXmlRequest();
var url="test.do?ti="+t1.value;
xmlHttp.open("post",url,true);
xmlHttp.onreadystatechange=f;
xmlHttp.send(null);



3.接受请求状态
xmlHttp.onreadystatechange=f;
function f()
if(xmlHttp.readyState==4 && xmlHttp.readyState==200)
alert(xmlHttp.repsonseTest);



4.基本Ajax实现
//basic.jsp+
//head+
<script type="text/javascript">
var xmlHttp;
function createXmlRequest()
try
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
catch(e)
xmlHttp=new ActiveXObjec("Microsoft.XMLHTTP");
if(!xmlHttp && typeof XMLHttpRequest!=\'undefined\')
try
xmlHttp=new XMLHttpRequest();
catch(_e)
xmlHttp=false;



function getText()
createXmlRequest();
var url="test.do?t1="+t1.value;
xmlHttp.open("post",url,true);
xmlHttp.onreadystatechange=f;
xmlHttp.send(null);
//回调方法xmlHttp.onreadystatechange=function()

function f()
if(xmlHttp.readyState==4 && xmlHttp.Status==200)
alert(xmlHttp.responseText);


</script>
//body+
<input type="text" name="t1"/><br>
<input type="button" value="OK" onclick="getText();"/>

//Servlet.java
package test;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Servlet extends HttpServlet
public Servlet()
super();

public void destroy()
super.destroy(); // Just puts "destroy" string in log

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

response.setContentType("text/html");
PrintWriter out = response.getWriter();
String str = request.getParameter("t1");
System.out.println(str);
out.print("Hello:" + str);
out.flush();
out.close();



//web.xml+
<servlet>
<servlet-name>Servlet</servlet-name>
<servlet-class>test.Servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Servlet</servlet-name>
<url-pattern>/test.do</url-pattern>
</servlet-mapping>

5.登录判断逻辑
//login.jsp+
//head+
<script type="text/javascript">
var xmlhttp;
var flag=false;
function create()
xmlhttp=new ActiveXObject("MsXml2.XMLHTTP"); //IE5简化

function checkName()
create();
xmlhttp.open("post","checkusername.do?username="+f1.username.value,true);
xmlhttp.onreadystatechange=f;
xmlhttp.send(null);

function f()
if(xmlhttp.readyState==4&&xmlhttp.status==200)
var str=xmlhttp.responseText;
var spanNode=document.getElementById("text");
if(spanNode.firstChild!=null)
spanNode.removeChild(spanNode.firstChild);

var fontNode=document.createElement("font");
if(str=="用户名已存在")
fontNode.color="red";

flag=false;
else
fontNode.color="blue";
flag=true;

var textNode=document.createTextNode(str);
fontNode.appendChild(textNode);
spanNode.appendChild(fontNode);
else
var spanNode=document.getElementById("text");
if(spanNode.firstChild!=null)
spanNode.removeChild(spanNode.firstChild);

var fontNode=document.createElement("font");
var textNode=document.createTextNode("loading");
fontNode.appendChild(textNode);
spanNode.appendChild(fontNode);


function checkReg()
if(flag)

return true;
else
alert("注册失败!请检查注册信息");
return false;


</script>
//body+
<form action="reg.do" name="f1" method="post">
username:<input type="text" name="username" onchange="checkName()"><span id="text"></span><br>
password:<input type="password" name="password"><Br>
<input type="submit" value="注册" onclick="return checkReg()">
</form>

//success.html+
//body+
注册成功!<br>

//Checkusername.java
package org.roger.reg;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Checkusername extends HttpServlet
public Checkusername()
super();

public void destroy()
super.destroy(); // Just puts "destroy" string in log
// Put your code here

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

response.setContentType("text/html");
PrintWriter out = response.getWriter();
out
.println("<!DOCTYPE HTML PUBLIC \\"-//W3C//DTD HTML 4.01 Transitional//EN\\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.print(" This is ");
out.print(this.getClass());
out.println(", using the GET method");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String username=request.getParameter("username");
if(username.equalsIgnoreCase("tom"))
out.print("用户名已存在");
else
out.print("恭喜你");

out.flush();
out.close();

public void init() throws ServletException



//Reg.java
package org.roger.reg;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Reg extends HttpServlet
public Reg()
super();

public void destroy()
super.destroy(); // Just puts "destroy" string in log
// Put your code here

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

response.setContentType("text/html");
PrintWriter out = response.getWriter();
out
.println("<!DOCTYPE HTML PUBLIC \\"-//W3C//DTD HTML 4.01 Transitional//EN\\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.print(" This is ");
out.print(this.getClass());
out.println(", using the GET method");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

response.setContentType("text/html");
PrintWriter out = response.getWriter();
System.out.println(request.getParameter("username"));
System.out.println(request.getParameter("password"));
response.sendRedirect("success.html");
out.flush();
out.close();

public void init() throws ServletException



//web.xml+
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>Checkusername</servlet-name>
<servlet-class>org.roger.reg.Checkusername</servlet-class>
</servlet>
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>Reg</servlet-name>
<servlet-class>org.roger.reg.Reg</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Checkusername</servlet-name>
<url-pattern>/checkusername.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Reg</servlet-name>
<url-pattern>/reg.do</url-pattern>
</servlet-mapping> 参考技术A 你封装的AJAX函数很乱,我没看懂!
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
这两句应该放在后面!!!!

我过了一个AJAX的函数你看看
function getRequestObject(url,options)
var req = false;
if(window.XMLHttpRequest)
req = new window.XMLHttpRequest();
else if (window.ActiveXObject)
req = new window.ActiveXObject('Microsoft.XMLHTTP');


options = options || ;
if (req)
req.onreadystatechange = function()
switch (req.readyState)
case 1 :
if (options.loadListener)
options.loadListener.apply(req,arguments)
;
break;
case 2 :
if (options.loadedListener)
options.loadedListener.apply(req,arguments)
;
break;
case 3 :
if (options.ineractiveListener)
options.ineractiveListener.apply(req,arguments)
;
break;
case 4 :
try
if (req.status == 200)
if (options.completeListener)
options.completeListener.apply(req,arguments)
;
break;
else
if (options.errListener)
options.errListener.apply(req,arguments)
;
break;

catch(e)


break;


req.open('get',url,true);
req.send(null);



调用函数:(pxg.$是我写的封装的JS库里的函数)
getRequestObject('art.asp',
loadListener:function(W3CEvent)pxg.$('art').innerHTML = '正在向服务器提交请求,请稍等',
loadedListener:function(W3CEvent)pxg.$('art').innerHTML = '正在与服务器建立连接.',
ineractiveListener:function(W3CEvent)pxg.$('art').innerHTML = '正在与服务器交互',
completeListener:function(W3CEvent)pxg.$('art').innerHTML = this.responseText
) 参考技术B var url = "getname.asp";
var postStr = "id="+ id_arr[i] + "&sid= " + Math.random();
var ajax = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) //Mozilla 浏览器
ajax = new XMLHttpRequest();
if (ajax.overrideMimeType) //设置MiME类别
ajax.overrideMimeType("text/xml");


else if (window.ActiveXObject) // IE浏览器
try
ajax = new ActiveXObject("Msxml2.XMLHTTP");
catch (e)
try
ajax = new ActiveXObject("Microsoft.XMLHTTP");
catch (e)


if (!ajax) // 异常，创建对象实例失败
window.alert("fail to create XMLHttpRequest object.");
return false;


ajax.open("GET", url, true);

//定义传输的文件HTTP头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//发送POST数据
ajax.send(postStr);

//获取执行状态
ajax.onreadystatechange = function()
//如果执行状态成功，那么就把返回信息写到指定的层里
if (ajax.readyState == 4 && ajax.status == 200)
alert(ajax.responseText);





这是我经常用的ajax函数，你的确实有些乱，套用上这个应该好用。 参考技术C 没太懂你的意思,你是不是想先从数据库取出一些东西 然后再运行AJAX 取另些东西啊 参考技术D 如何在一个循环内，多次调用XMLHttpRequest对象，向服务器发送多次请求。

-----------------
这个容易，直接取XMLHttpRequest的返回值，大概是responseText,每次返回完了，会接着循环的，不必考虑 xmlHttp.readyState ，只需要使用1个new ActiveXObject("Microsoft.XMLHTTP")对象，如果不行就是请求有个同步和异步的设置没弄好

pdo-php-javascript (ajax) 的简单引号转义问题

【中文标题】pdo-php-javascript (ajax) 的简单引号转义问题【英文标题】：simple quote escape issue with pdo-php-javascript (ajax) 【发布时间】：2014-12-03 06:32:17 【问题描述】：

这是我的问题：

我在 php 脚本（在 ajax 查询中调用）中使用 PDO 从我的数据库中返回一个字符串：

...some code
$myString = $pdoObject['field'];
...some code

字符串包含一个单引号：'

example :
          it's strange

稍后在这个 php 脚本中，我将字符串放入一个长字符串变量中，然后发送回我的 ajax 查询：

$wholeString = "<tr><td><span title='$myString'>Some Text</span></td></tr>";

然后我把它寄回去： json_encode($wholeString);

在我的 ajax 查询中，我只是将结果放入 jquery 字段中：

...some code
success : function(response)
    $("#myField").html(response);

...some code

TITLE 的东西总是在引用处被删减：

<tr><td><span title='it'>Some Text</span></td></tr>

如果我在将 $myString 放入 $wholeString 之前尝试使用 htmlentities 或 htmlspecialchars，它不会改变任何东西......我在某处错过了一些东西......

感谢帮助

【问题讨论】：

【参考方案1】：

你基本上有一个 html 注入问题。您需要使用 htmlspecialchars() 来转义文本中的所有 html 元字符，其中包括 '

例如

$wholeString = "<tr><td><span title='" . htmlspecialchars($myString, ENT_QUOTES) . "'>Some Text</span></td></tr>";

如您的代码中所写，您将生成：

<tr><td><span title='It's strange'>Some text etc...

这会导致浏览器将 span 标签解析为

<span
   title='It'    // attribute "title" with value "It"
   s             // unknown random attribute s
   strange'      // unknown random attribute "strange" with illegal single-quote

【讨论】：

是的，我同意你的回答，但是，在我的代码中，如果我将 '$myString' 替换为 '".htmlspecialchars($myString)."'，结果是完全一样的。 ..没有任何变化 啊，哦……对不起。忘记了 specialchars 默认情况下不执行 ' 。你必须使用htmlspecialchars($text, ENT_QUOTES) 谢谢，这解决了我的问题 :) （我只能在几分钟内接受答案，我得走了，我会尽快做的；））

以上是关于一个简单的ajax问题的主要内容，如果未能解决你的问题，请参考以下文章

关于AJAX的简单示例问题,高分!~

一个带有 JSP 的简单 AJAX 示例

使用 Javascript FormData()、AJAX $.post 和 PHP 的简单文件上传

pdo-php-javascript (ajax) 的简单引号转义问题

从spring mvc控制器返回一个简单的映射结构到ajax

非常简单的 ajax 添加到购物车