如何通过javascript从HTML页面调用REST风格的Web服务功能

问题描述：

我有一个REST风格的Web服务（Java），并且我想通过提交按钮向Web服务发送获取请求。如何通过javascript从HTML页面调用REST风格的Web服务功能

在所谓的“测试”将从HTML页面中的文本输入一个字符串和返回一个字符串，然后我需要的字符串，并把它放在一个段落标记Web服务的功能无需刷新页面

这里是我的代码：

HTML页面：

<input type="text" id="equation_input"> 

<input type="button" value="Calculate" id="equation_submit" onclick="fun()"> 

<p id="value"></p>

RESTful Web服务：

import javax.ws.rs.Consumes; 
import javax.ws.rs.GET; 
import javax.ws.rs.POST; 
import javax.ws.rs.Path; 
import javax.ws.rs.PathParam; 
import javax.ws.rs.Produces; 
import javax.ws.rs.QueryParam; 
import javax.ws.rs.core.MediaType; 
import org.tarek.doctorMath.resources.test.*; 

@Path("/first") 
public class first_equation { 

@GET 
@Path("/{test}") 
@Produces(MediaType.TEXT_PLAIN) 
public String test(@PathParam("test") String equation) { 
     return "test"; 
    } 
}

任何人都可以帮助我吗？

fun（）中会发生什么？向我们展示代码.. – juliobetta

请参阅：http://stackoverflow.com/questions/247483/http-get-request-in-javascript – sheunis

答

你所寻找被称为AJAX（异步JavaScript和XML）

有吨库，这使得AJAX容易的，但对于这么简单的东西，这里是一个简单的纯JS例如

//url: the url to call through ajax 
//callback: a function to execute when it is done 
//error: a function for if there was a problem with the request 
function load(url, callback, error){ 
    var xhr; 

    // here we check what version of AJAX the browser supports 
    if(typeof XMLHttpRequest !== 'undefined') 
     xhr = new XMLHttpRequest(); 
    else { 
     //internet explorer is stupid... 
     var versions = ["MSXML2.XmlHttp.5.0", 
         "MSXML2.XmlHttp.4.0", 
         "MSXML2.XmlHttp.3.0", 
         "MSXML2.XmlHttp.2.0", 
         "Microsoft.XmlHttp"] 

     for(var i = 0, len = versions.length; i < len; i++) { 
      try { 
       xhr = new ActiveXObject(versions[i]); 
       break; 
      } 
      catch(e){} 
     } // end for 
    } 


    function ensureReadiness() { 
     //not done yet 
     if(xhr.readyState < 4) { 
      return; 
     } 

     // all is well 
     if(xhr.readyState === 4 && xhr.status === 200) { 
      callback(xhr.responseText); 
     } else { 
      error(xhr); 
     }  
    } 
    //here we assign the function above to check if the AJAX call is finished 
    xhr.onreadystatechange = ensureReadiness; 

    //send the request 
    xhr.open('GET', url, true); 
    xhr.send(''); 
} 

//we call the function like this: 
load('http://example.com/page', 
    function(successText){ 
     //get the paragraph and assign the value 
     var p = document.getElementById('value'); 
     p.innerHTML = successText; 
    }, 
    function(error){ 
     console.log(error); 
})

查看此主题了解AJAX的更多信息：How does AJAX work?

如何通过javascript从HTML页面调用REST风格的Web服务功能

相关推荐