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是异步获取数据,在函数中,ajax部分基本上是不会按照代码顺序执行的。
你的代码中,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 函数不能正常运行?

能不能做一个html页面,然后按钮的功能用python实现

JavaScript之Ajax-4 XML解析(JavaScript中的XMLAjax返回并解析XML)

用javascript(Ajax)更新Symfony

springmvc怎么得到ajax传入json数据类型

jquery ajax获取后台request中的值 ,前台AJAX如下,后台如图