Our server can already receive strings from the client.
We'd like the client to get back a response and show it in the textarea.
app.js:
var sys = require ('util'),
url = require('url'),
http = require('http'),
qs = require('querystring');
var stringforfirefox = 'hi man!';
http.createServer(function (req, res) {
if(req.method=='POST') {
var body='';
req.on('data', function (data) {
body +=data;
});
req.on('end',function(){
var POST = qs.parse(body);
console.log(POST);
});
}
else if(req.method=='GET') {
var url_parts = url.parse(req.url,true);
console.log(url_parts.query);
}
}).listen(1337, "127.0.0.1");
For testing we use a localhost url. Later it will be cross-domain. Here is the website
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>
document.onkeypress = function keypressed(e){
if (e.keyCode == 112) {
httpGet('http://localhost:1337/index77?title=message_for_server') ;
}
if (e.keyCode == 113) {
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("textarea1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://localhost:1337/index77",true);
xmlhttp.send("fname=Henry&lname=Ford");
}
}
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( "fname=Henry&lname=Ford" );
alert( xmlHttp.responseText);
}
</script>
</head>
<body>
<form>
<p>
<textarea id="textarea1" cols="25" rows="25" name="textfeld"></textarea>
</p>
</form>
</body>
</html>
We'd like to extend this code we have here.
You need to send the response (res).
if(req.method=='POST') {
var body='';
req.on('data', function (data) {
body +=data;
});
req.on('end',function(){
res.send(200, "The request's body: " + body);
var POST = qs.parse(body);
console.log(POST);
});
XMLHttpRequest() for obvious security reasons cannot be used to post or fetch information cross-domainly. On some browser it might work while you are in a localhost environment, but when the site is launched from the Web this is not acceptable.
To workaround this, you will have to submit the AJAX request to the same domain, and process the cross-domain operation on server-side.
JavaScript tools like the Google News RSS Feeds use this method to workaround those security barriers.
here the exchange of strings between client and server works perfectly:
app.js:
var sys = require ('util'),
url = require('url'),
http = require('http'),
qs = require('querystring');
var stringforfirefox = 'hi man!';
http.createServer(function (req, res) {
if(req.method=='GET') {
res.statusCode = 200;
var url_parts = url.parse(req.url,true);
var query = url_parts.query["title"];
console.log(query);
stringforfirefox = 'your input: '+query;
res.end("__stringexchange(" + JSON.stringify( stringforfirefox) + ");");
}
}).listen(1337, "127.0.0.1");
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>
function __stringexchange(data) {
document.getElementById('textarea1').value= data;}
document.onkeypress = function keypressed(e){
if (e.keyCode == 112) {
var keyword = document.getElementById('edit1').value ;
var script = document.createElement('script');
script.src = 'http://localhost:1337/?title='+keyword;
document.body.appendChild(script); // triggers a GET request
}
}
</script>
</head>
<body>
<form>
<input id="edit1" type="text" name="keyword"><br>
<br>
<textarea id="textarea1" cols="25" rows="25" name="textfeld"></textarea>
</form>
</body>
</html>
(Combination of code from our other question.)