在网络浏览器上显示 json答案

【问题标题】：To display json on web browser在网络浏览器上显示 json
【发布时间】：2012-03-20 12:39:50
【问题描述】：

我们希望在使用 Google API 从 servlet 调用的浏览器上显示 Google 搜索结果的 json。 handleSearchResult 没有在浏览器上显示 responseText。此外，servlet 没有将查询词从 html 的文本框映射到 Google API 搜索 url(servlet)。谢谢

home.html

<html>
<head>
<script type="text/javascript">
var request;

function handleSearchResult(){
    alert("hanldeRes");
    //query.text = resp.items.name;
    alert(request.responseText);
    //var resp = eval('('+responseText+')');
    //alert(resp.items.title);  
}

function createHttpRequest()
{
    alert("insideCreateRequest");
    if(typeof XMLHttpRequest != "undefined") {
        request = new XMLHttpRequest();     
    } 
    else if(window.ActiveXObject)   {
        request = new ActiveXObject("Msxml2.XMLHTTP");

        if(!request) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    if(request) {
        request.onreadystatechange = handleSearchResult();
        request.open("GET","http://localhost:8080/WebSearchOptimization/SearchService",true);
        request.send(null);

    } 
    else {
        alert("error on Page createHttpRequest");
    }
    return false;
}

function home_onclick()
{ 
    alert("passingRequest");
    createHttpRequest();    
}

</script>
</head>
<body>
<br><br>
<form method="get" name="form">
<input type="text" id="query" name="query">
<input type="button" value="Search" id="search" onclick="home_onclick()">
<div></div>
</form>
</body>
</html>

【问题讨论】：

究竟是什么问题？
SearchService 是返回 JSON 响应的 servlet，我们想通过 request.responseText 访问它，但结果没有在 request 对象中返回。

标签： javascript html google-api

【解决方案1】：

我对你的代码做了一些修改。希望这会有所帮助。

function handleSearchResult(){
    if (request.readyState==4 && request.status==200)
    {        
        alert(request.responseText);
    }
}

function createHttpRequest()
{
//....
if(request) {
    request.onreadystatechange = handleSearchResult;
    var q = encodeURI( document.getElementById("query").value );
    request.open("GET","http://localhost:8080/WebSearchOptimization/SearchService?"+q,true);
    request.send(null);
}
//.....
}

【讨论】：