2013-06-28 4 views
0

Мне нужно проверить имена пользователей, поэтому, когда пользователь вводит имя пользователя, он должен быть отправлен на сервер, чтобы проверить его доступность. У меня есть следующий код, но у меня есть сомнения в получении доступного или недоступного сообщения из бэкэнд.Как получать сообщения из бэкэнда асинхронно?

function verifyUsername(value){ 
      if(window.XMLHttpRequest) 
      { 
       xmlhttp = new XMLHttpRequest(); 
      } 
      else 
      { 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xmlhttp.onreadystatechange=function() 
      { 
       if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
       { 
        document.getElementById("mymessage").innerHTML=xmlhttp.responseText; 
       } 
      } 
      xmlhttp.open("get","verifyUsername?username="+value,false); 
      xmlhttp.send(); 
     } 


    .... 
    <div id="mymessage"></div> 
    .... 

сервера End псевдопользователей Код (фактическая реализация: Java)

.... 
if(verify(username)) 
    return "Username is not available"; 
else 
    return "username is available"; 

ответ

1

Я приведу пример JQuery этого, я не буду заморачиваться с чистой версией JavaScript. То, что вы ищете, - это функция обратного вызова, которая срабатывает после возвращения запроса ajax.

// listen to a click event on a button OR something 
$("#buttonName").on("click", function(event){ 

    // prevent any default activity 
    event.preventDefault(); 

    // get your value 
    var value = $("#mymessage").val(); 

    // jQuery ajax event 
    $.ajax({ 
     url : "verifyUsername?username="+value, 
     type: 'GET' 
    }).done(function (data) { 
     if (console && console.log) { 
     console.log("Data returned :"+data) 
     // do something else 
    } 
    }): 

.done() является возможность успеха обратного вызова, есть и другие, а также:

// jQuery ajax event 
     $.ajax({ 
      url : "verifyUsername?username="+value, 
      type: 'GET' 
     }) 
    // successful callback 
    .done(function(){ // success }) 
    // fail/error callback 
    .fail(function(){ // fail }) 
    // completed callback 
    .always(function(){ // will always execute, even if request fails }) 
}); 

Ссылка: http://api.jquery.com/jQuery.ajax/

+0

спасибо, но как связать его с onclick? поэтому, как только пользователь вводит данные, а щелчки на текстовом поле запускают эту функцию? – J888

+1

Существует несколько подходов к этому. Вы слушаете событие, клик, keydown и т. Д. Я обновлю свой ответ, чтобы отразить это –

1

Если я понять проблему правильно, то есть, «возвращение правильный ответ с серверной стороны ». Фактическая реализация упоминается как Java, поэтому я предполагаю, что есть сервлет, который запрашивает Ajax-запрос. Вам нужно будет получить дескриптор объекта HttpServletResponse в методе doGet (поскольку вы используете get), добавьте свою логику, чтобы проверить имя пользователя и отправить текст ответа. Что-то вроде

public void doGet(HttpServletRequest request,HttpServletResponse response) 
    throws ServletException, IOException 
{ 
    String username = request.getParameter(username); 
    String responseText = ""; 
    boolean isUserAval; 
    //add your logic to verify username setting isUserAval to true/false accordingly 

    response.setContentType("text/html"); 
    PrintWriter out = response.getWriter(); 
    if(isUserAval) 
    { 
     responseText = "Username is available"; 
    } 
    else 
    { 
     responseText = "Username is not available"; 
    } 
    out.println(responseText); 
    out.close(); 
} 
0

Используйте эту функцию ниже ... Вы также заметите, запрос будет иметь readystate и такие вещи, как, что, ваш ищет Prolly StatusCode между 200-202, и состояние готовности 4, и из его статуса OK

var request = $.get(url, function(event){ 
    //If your within your application your url can be the method you need 
    //I.E. Ruby URL post would be /api/v1/users/find_user_by_ID 
    //This URL Points to the api/v1 folder than the users controller 
    //Than finally the method inside the controller (find_user_by_ID) 
} 

Я также считаю, что все, что делают ваши, не нужно быть в JavaScript, если с помощью PHP или рубин, вы можете просто добавить PHP или рубин теги и создать, если заявления, чем использование javascript для добавления и удаления классов или переключения скрытия и отображения в зависимости от того, что произошло на каждом шаге.