依次调用ajax

I need to make two separate ajax calls one after the other. If the first call is success, I need to use the result of the first call in the second. Here is what I tried:

$.ajax({
       url:myurl,     // myurl defined elsewhere
       type:'POST',
       data: mydata,  // mydata defined elsewhere

       success: function(data, textStatus) { 
           if (textStatus=='success'){
              // Get paramValue from the data
              // Here I want to call another similar ajax call
              callNextAjax(paramValue); // This function calls a similar ajax call. 
                                        // But always gets error call back there
           }
       },
       error: function(jqXHR, textStatus, errorThrown) {
           alert("First Request Failed");
       }     
});

function callNextAjax(paramValue){
  $.ajax({
           url:myurl1,     // myurl1 defined elsewhere
           type:'POST',
           data: mydata1,  // mydata1 defined elsewhere.  mydata1 uses paramValue

           success: function(data, textStatus) { 
               if (textStatus=='success'){
                  goToNewHtmlPage(); // open up a new html page in this function
               }
           },
           error: function(jqXHR, textStatus, errorThrown) {
               alert("Second Request Failed");
           }     
    });
}

callNextAjax() function is a similar call which uses the value paramValue. Inside the callNextAjax function I always get error callback with alert "Second Request Failed". When I run callNextAjax in isolation (not within the success function of first ajax) it works fine (moves on to the next page from the goToNewHtmlPage() )

Any guess what is wrong in my implementation? I have run out of my experiments with this. Any type of pointers here will be helpful.

try something like this:

AjaxCheckResult = function() {

    var url = "http://url";

    return {

        errorfunction: function(jqXHR, textStatus, errorThrown) {
                   alert("First Request Failed");
        } ,
        sucessFunction: function(data, textStatus) { 
                   if (textStatus=="success"){
                     me.doAjax(paramValue);
                   }
               },

        doAjax: function(mydata){
            me = this;
            $.ajax({
               url:me.url,     // myurl defined elsewhere
               type:'POST',
               data: mydata,  // mydata defined elsewhere

               success: sucessFunction
               error: errorfunction
            });
        }
    };
}();

AjaxCheckResult.doAjax(Something);

Wow, this area of Javascript is often confused, and I am often surprised at how convoluted some of the solutions can be. jQuery and Javascript in general are designed to be asynchronous, which often makes it difficult to elegantly create synchronous code. This is what Flow Control libraries do so well. There are several Flow Control libraries available (notably async has a large user base on Node.js), but for client-side JS, Frame.js is quite good at sorting out this problem, maintaining readable code, and being scalable to larger problems of this type.

Frame(function(next){
    $.ajax({
       url:myurl,     // myurl defined elsewhere
       data: mydata,  // mydata defined elsewhere
       success: function(data, textStatus) { 
           if (textStatus=='success'){
              // ... Get paramValue from the data
              next(paramValue);
           }
       },
       error: function(jqXHR, textStatus, errorThrown) {
           alert("First Request Failed");
           next();
       }     
    });
});
Frame(function(next, paramValue){
  if(paramValue){
    $.ajax({
        url:myurl1,     // myurl1 defined elsewhere
        data: mydata1,  // mydata1 defined elsewhere.  mydata1 uses paramValue
        success: function(data, textStatus) { 
            if (textStatus=='success'){
                next(secondParamValue);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("Second Request Failed");
            next();
        }     
    });  
  }
});

Frame(function(next, secondParamValue){
  if(secondParamValue){
      goToNewHtmlPage(); // open up a new html page in this function
  } else {
      // do something else
  }
  next();
});

Frame.start();