Google AJAX Language API - Basic Scripting HTTP Request
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
google.language.translate("Hello world", "en", "zh-CN", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
var text = "简体中文测试";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: " + language + "";
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="translation"></div>
<div id="detection"></div>
</body>
</html>
Google get response and execute response text through scripting http request. Scripting HTTP Request step:
- First add an dynamic "script" node after head, even if document source have not head tag, javascript will still run right. If add "script" node to document.body node, javascript may be error because javascript can't get body element.
- Then set this "script" node "src" to get google translate service, and it will return a javascript statement, and when "script" loaded, it will be executed auto.
- At last, Delete this "script" node.
1. javascript file - "getTextWithScript.js";
var getTextWithScript = function(callback) {
// Create a new script element and add it to the document.
var head=document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type="text/javascript";
script.charset="utf-8";
head.appendChild(script);
// Get a unique function name.
var funcname = "func" + getTextWithScript.counter++;
// Define a function with that name, using this function as a
// convenient namespace. The script generated on the server
// invokes this function.
getTextWithScript[funcname] = function() {
// Pass the text to the callback function
callback(Array.prototype.slice.call(arguments));
// Clean up the script tag and the generated function.
script.onload = null;
head.removeChild(script);
delete script;
delete getTextWithScript[funcname];
}
// Encode the URL we want to fetch and the name of the function
// as arguments to the jsquoter.php server-side script. Set the src
// property of the script tag to fetch the URL.
script.src = "jsquoter.php" + "?func=" + encodeURIComponent("getTextWithScript." + funcname);
}
// We use this to generate unique function callback names in case there
// is more than one request pending at a time.
getTextWithScript.counter = 0;
2. server process request file - "jsquoter.php";
<?php
// Tell the browser that we're sending a script
header("Content-Type: text/javascript");
// Get arguments from the URL
$func = $_GET["func"];
// process
echo "$func('test', 'from', 'php', 'file');";
?>
3. test file - "getTextWithScript.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Scripting HTTP</title>
<script type="text/javascript" src="getTextWithScript.js"></script>
<script type="text/javascript">
function callback(){
document.getElementById('main').innerHTML = arguments[0].join(" ");
}
getTextWithScript(callback);
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
test file will get result: "test from php file"
