javascript中的ajax不能得到return 的值,求教处理的方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript中的ajax不能得到return 的值,求教处理的方法相关的知识，希望对你有一定的参考价值。
function token_data(check_file,mod,bool)
//创建ajax对象这里省略掉
var ajax=new setAjax();
//这外面又可以得到返回值
return 'ddddddddddddddddddd';ajax.onreadystatechange=function()
//这里就无法得到返回值了,包括以下内部
return 'ddddddddddddddddddd';
if(ajax.readyState == 4)
if(ajax.status == 200)
var msg=ajax.responseText;
//alert(msg);
returnMsg('dddddddddddddeeeewws5555');
else
alert('eeeeeeeee');
if(mod.toUpperCase() =='POST')
ajax.open('POST',check_file,bool);
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.send();
else
ajax.open('GET',check_file,bool);
ajax.send(null);
//调用
alert(token_data('wap_check_reg.php','GET',false));
求教！！！！！！！！！
你的代码中，ajax.onreadystatechange中的代码不会再alert中执行，而是在alert之后执行，所以，你获取不到返回值。追问
不是可以定义false true不 这就表示是同步和异步二种情况了 ,,反正百度了好久，情况还比较多，我就定义了一个全局变量返回操作了
追答这里不关全局变量还是局部变量事。 你也意识到是异步的问题了，理解什么是同步，什么是异步之后，我们就明白了，ajax是异步执行的，也就是说，代码执行到ajax处，就继续执行ajax后面的代码了，ajax中的代码需要等到服务器响应之后才继续执行的。
参考技术A 写一个标记if(ajax.status == 200)
var msg=ajax.responseText;
//alert(msg);
var flag=1;
//returnMsg('dddddddddddddeeeewws5555');
else
var flag=0;
//alert('eeeeeeeee');
在下面判断，
if(flag==1)
returnMsg('dddddddddddddeeeewws5555');
参考技术B 没看懂你写的东西。。。。追问
token_data(check_file,mod,bool) 这里面就包括调用创建的ajax对象了，省略掉了，只显示传参的那部分，问题就出现在这部分...
JavaScript笔记——使用AJax
在使用过JQuery之后，再来看JavaScript的Ajax实现就会觉得很麻烦，不过，最近使用到了，就记录一下吧
在JavaScript中Ajax的实现可以分为四步：
第一步 得到XMLHttpRequest对象
得到XMLHttpRequest
> 大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();
> IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
> IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
编写创建XMLHttpRequest对象的函数
function createXMLHttpRequest() { try { return new XMLHttpRequest(); } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 } catch (e) { alert("浏览器不支持"); throw e; } } } };
第二步 打开与服务器的链接
xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：
> 请求方式：可以是GET或POST
> 请求的URL：指定服务器端资源，例如一个Servlet
> 请求是否为异步：如果为true表示发送异步请求，否则同步请求
xmlHttp.open("GET", "/AServlet", true);
第三步 发送请求(分为GET和POST方式)
* xmlHttp.send(null)：如果不给可能会造成部份浏览器无法发送
> 参数：就是请求体内容！如果是GET请求，必须给出null
第四步 给XMLHttpRequest对象的onreadystatechange事件注册监听器，以监听服务器响应
* 在xmlHttp对象的一个事件上注册监听器：onreadystatechange
* xmlHttp对象一共有5个状态：
> 0状态：刚创建，还没有调用open()方法;
> 1状态：请求开始：调用了open()方法，但还没有调用send()方法
> 2状态：调用完了send()方法了；
> 3状态：服务器已经开始响应，但不表示响应结束了！
> 4状态：服务器响应结束！（通常我们只关心这个状态！！！）
* 得到xmlHttp对象的状态：
> var state = xmlHttp.readyState;//可能是0、1、2、3、4
* 得到服务器响应的状态码
> var status = xmlHttp.status;//例如为200、404、500
* 得到服务器响应的内容
> var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
> var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了
xmlHttp.onreadystatechange = function() {//xmlHttp的5种状态都会调用本方法 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断：判断是否为4状态，而且还要判断是否为200 // 获取服务器的响应内容 var text = xmlHttp.responseText; } };
示例代码
准备工作：在页面（jsp）中写两句HTML，一个按钮，一个段落
<input type="button" value="点击" id="btn"/> <h1 id="h1"></h1>
先来看看GET方式的Ajax：
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("浏览器不支持");
throw e;
}
}
}
};
window.onload = function() {
var btn=document.getElementById("btn");
btn.onclick=function(){
//第一步:得到XMLHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//第二步:打开与服务器的连接
xmlHttp.open("GET", "${pageContext.request.contextPath}/AServlet",true);
//第三步:发送请求(GET方式必须指定null)
xmlHttp.send(null);
//第四步:给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange = function() {
//双重判断：状态4 响应码200
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获得服务器的响应
var text = xmlHttp.responseText;
//处理h1元素
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script>
获得XMLHttpRequest对象方式会有浏览器差异，所以createXMLHttpRequest()方法处理一下，在这里我使用的是Servlet
AServlet如下：
import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AServlet extends HttpServlet { public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("Hello Ajax"); resp.setContentType("text/html;charset=utf-8"); resp.getWriter().print("Hello Ajax"); } public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); System.out.println("POST(:)Hello Ajax"); resp.setContentType("text/html;charset=utf-8"); resp.getWriter().print("POST(:)Hello Ajax"+req.getParameter("userName")); } }
Servlet完成的工作还算简单，值得说的是必须给response指定请求头 setContentType()
POST方式的Ajax提交方式：
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("浏览器不支持");
throw e;
}
}
}
};
window.onload = function() {
var btn=document.getElementById("btn");
btn.onclick=function(){
//第一步:得到XMLHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//第二步:打开与服务器的连接
xmlHttp.open("POST", "${pageContext.request.contextPath}/AServlet",true);
//POST方式需要处理请求头
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
//第三步:发送请求
xmlHttp.send("userName=lz");
//第四步:给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange = function() {
//双重判断：状态4 响应码200
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获得服务器的响应
var text = xmlHttp.responseText;
//处理h1元素
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script>
与GET方式不同的之处在于POST需要处理请求头，使用send()方法时需要给出需要的参数，就是这两点不同吧
封装Ajax
因为JavaScript的Ajax处理较为麻烦且固定，在这里完成一个简单封装，类似于JQuery中的$.ajax()方法的实现
ajaxUtils.js :
//处理浏览器差异，获得XMLHttpRequest function createXMLHttpRequest(){ try{ return new XMLHttpRequest(); //大多数浏览器 }catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 } catch (e) { alert("浏览器不支持"); throw e; } } } } /* * option对象有如下属性 */ /*请求方式method,*/ /*请求的url url,*/ /*是否异步 asyn,*/ /*请求体 params, */ /*回调方法 callback,*/ /*服务器响应数据转换成什么类型 type*/ /*url和callback没有默认值,必须指定*/ function ajax(option){ /** * 1.得到XMLHttpRequest */ var xmlHttp=createXMLHttpRequest(); /** * 2.打开连接 */ if(!option.method){ //默认为GET请求 option.method="GET"; } if(option.asyn==undefined){ //默认为异步 option.asyn=true; } xmlHttp.open(option.method, option.url, option.asyn); /** * 3.判断是否为POST */ if("POST" == option.method) { xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } /** * 4.发送请求 */ xmlHttp.send(option.params); /** * 5.注册监听 */ xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断 var data; // 获取服务器的响应数据，进行转换！ if(!option.type) {//如果type没有赋值，那么默认为文本 data = xmlHttp.responseText; } else if(option.type == "xml") { data = xmlHttp.responseXML; } else if(option.type == "text") { data = xmlHttp.responseText; } else if(option.type == "json") { var text = xmlHttp.responseText; data = eval("(" + text + ")"); } // 调用回调方法 option.callback(data); } }; };
我们直接在页面中使用ajax()方法即可，注意 url和callback没有默认值,必须指定
页面中使用：
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ajaxUtils.js"></script> <script type="text/javascript"> window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ ajax({ url:"${pageContext.request.contextPath}/AServlet", callback:function(data){ document.getElementById("h1").innerHTML=data; } }); }; }; </script>
data就是服务器返回的数据
以上是关于javascript中的ajax不能得到return 的值,求教处理的方法的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript, Ajax - 为啥 JavaScript 代码上的 Ajax 函数不能正常运行？