I want to make an ajax call to a Oracle wcs template (page2.jsp) from page1
The problem here is I need to pass the url value dynamically after calling
but this is not loading the page2Url template after executing the ajax script.
here is my script and jsp.But the url is not populated and its not loading the page2 (But if I hardcode the url directly its loading the page2.jsp in the current page)
<render:gettemplateurl tname="page2" outstr="page2Url" c="Page" cid='<%=ics.GetVar("cid")%>' ></render:gettemplateurl>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET','http://test.com<%=ics.GetVar("page2Url")%>', true );
xmlhttp.send();
}
</script>
If you want to make ajax call, do the following:
Create CSElement which includes your coding part.
Create SiteEntry for this CSElement and click Wrapper=true while creating it.
If you want to pass arguments to CSElement, then add parameter names to cache criteria.
Make the siteentry URL using satellite:link tag, which will provide you output URL say for eg: ajaxURL.
Call this ajaxURL in your script or JS file as required. For eg: call url using ics.getvar("ajaxURL") or if you want to skip 4th step, call directly like /cs/ContentServer?pagename=SiteEntryName¶m1=param1Value
I hope this helps.
Cheers!!
Related
I'm new to node.js. Now I'm trying to write a simple website where users can input something for the server to process, and receive a result, e.g. search for something.
I try to implement it as follows:
write the index.html
write the server.js, it creates a server, and display the index page using var index = fs.readFileSync('index.html'); response.end(index);
add ajax codes in index.html, to receive input from users and send it to the server
the last step will be adding codes in server.js, which processes the request and send a result to ajax to display it.
My question is about step 4. In the server.js, when it receives ajax request, should it somehow add the result to the index.html file, and send back usingresponse.end(index), OR send back only the result? If the latter one, which I tried, it will send both the index.html page and the result. But I only want the result.
Below is the two files index.html and server.js:
index.js
<!DOCTYPE html>
<html>
<!-- Client search using Ajax -->
<head>
<title>live search</title>
<script>
function getResults(query) {
if (query.length===0) {
document.getElementById("results").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://127.0.0.1:2000/search?"+query,true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("results").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.send();
}
</script>
</head>
<body>
<hr>
<input type="text" id="search" onkeyup="getResults(this.value)"/>
<br>
<div id="results">
</div>
</body>
</html>
server.js
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
var url = require('url');
http.createServer(function (req, res) {
res.writeHead(200, {'ContentType': 'text/html'});
res.end(index);
//codes for request processing
result="";
var path = url.parse(req.url).pathname;
console.log(path);
if (path.length!==0) {
result = "I'm the result";
}
res.write(result);
}).listen(2000);
If I understood your question correctly.
You want to send data between index.html and server.js on runtime.
For that, you need to use socket.io library.
For client(index.html)
use client side library for socket.io like following.
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
Now If you want to send the data which you get in index.html(client) then you can send it to server using
socket.emit("EventName",{"data1": value1 , "data2" : value2 , [...]})
Then you can receive it on server using event listeners like.
socket.on("EventName",function(data){
//here you can use "data" parameter that contains values sent from client
});
This was the client to server send/receive scenario.
For server to client, do the same thing i.e use socket.emit() on server to send to client and socket.on() at client to receive from server.
Here I have a simple, working, AJAX example of a webpage that displays data from a text file, without having to refresh the page, through a simple button command.
ajax_test.php
<script>
function loadXMLDoc()
{
var xmlhttp;
if(window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
{
xmlhttp = new XMLHttpRequest();
}
else // code for IE6, IE5
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
}
</script>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
I am trying to get this to work in the exact same way, except through CodeIgniter. My pages are displayed using the following coding.
pages.php
<?php
// To avoid outside users from accessing this file
if(!defined('BASEPATH')) exit('No direct script access allowed');
class Pages extends CI_Controller
{
// Default method if one has not been requested within the URL
public function view($page = "home")
{
if(!file_exists('application/views/pages/'.$page.'.php')) // If the page does not exist
{
// Whoops, we don't have a page for that!
show_404();
}
$data["main_url"] = $this->config->item("base_url")."z_my_folders/";
$data["title"] = ucfirst($page); // Capitalize the first letter
$this->load->view("templates/header", $data);
$this->load->view("pages/".$page, $data);
$this->load->view("templates/footer");
}
}
All this does is displays the webpage when the "view" method is called (for example, pages/view/ajax_test) whiles carrying the server's main URL as a string in order to allocate files such as images, CSS, and the jQuery library through the header.
header.php
<html>
<head>
<link href="<?php echo $main_url; ?>design.css" rel="stylesheet" type="text/css">
<title>Kurtiss' Website - <?php echo $title ?></title>
<script type="text/javascript" src="<?php echo $main_url; ?>jquery/jquery-1.10.2.min.js"></script>
</head>
The ajax_test.php file displays in CodeIgniter accordantly, however when the button is pressed, nothing happens. Again, the file works fine when it is not in CodeIgniter, however I am trying to make it so that it can.
I have tried researching it, except all I can find are complex examples where users are connecting to databases, creating complex login forms, registration forms, chat rooms, etc. I just want a simple example like this one that says "Yes, this is AJAX, and it works with CodeIgniter."
Many thanks.
I have edited the code as followed.
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
else
{
alert("ERROR");
}
}
When testing it in CodeIgniter, the alert message pops up four times, so it might have something to do with the xmlhttp.readyState.
Now I know what the problem was; it just couldn't find the text file. In order for it to work, I had to either relocate the text file into the CodeIgniter's main directory, or specify where the text file was located.
Thanks for your help guys.
I'm still relatively new to AJAX and am trying to figure out why my simple test is not working. From what I read AJAX will not work under one domain, and other words pop up like cross-site and remote server. Anyways my problem is is that I'm not sure if my code is wrong or simply what I'm trying to do is impossible. I created a simple ajax request to submit data when I click on the button. Here is the code for the first script.
<html>
<head>
<script type="text/javascript" >
function load(thediv, thefile) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(thediv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', thefile, true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="submit" onclick="load('adiv', 'hello.php');">
<div id="adiv"></div>
</body>
</html>
Here is the code for the file hello.php
<?php
echo 'aaa';
?>
AJAX is just an http request done in the background. But yes, there are security restrictions that prevent you doing a normal ajax request to any arbitrary server.
What your code is missing is actually setting the URL that you're placing the request to. You've got hello.php as a parameter to your load() function, but you never actually USE it. So you're doing an AJAX request to... "nowhere".
The variable xmlhttp=new XMLHttpRequest() is initialed. the following code :
function makerequest(serverPage,objID){
var obj=document.getElementById(objID);
xmlhttp.open("GET",serverPage);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status ==200){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
i am sorry i am a new learner of ajax, in the if condition, why it add xmlhttp.readyState == 4. at the function's end there is using xmlhttp.send(null); could i delete them. thank you.
Well, you want to send the ajax request that you generate, so since you're using get, null is an acceptable argument. If you use post, you should pass the querystring in the send method. More here.
If you delete the readyState condition then you could end up with the ajax returning nothing since the page would not yet be ready. See more here.
EDIT: Sample argument for POST send method:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
I want to use a yahoo api for place finding and I want to write something like that:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://where.yahooapis.com/geocode?location=701+First+Ave,+Sunnyvale,+CA&appid=yourappid",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
the yahoo link works properly as you can see here:
http://where.yahooapis.com/geocode?location=701+First+Ave,+Sunnyvale,+CA&appid=yourappid
and the ajax format works if I open a local txt file (this is a w3 example) instead of external link.
but when running this code like that it won't work.
i get:
xmlhttp.status==0
when
xmlhttp.readyState==4
and as i found out in another question here it's due to security reasons.
so how do i work around the problem to get the same result?
thanks.
To access an external domain you would usually have to do the query on the server and let your ajax call go to your own domain. The server script will query yahoo and return the values for you. How exactly depends on your environment.
You can proxy the response. On your own server, set up a script that simply loads a page from another server and query the page on your server instead of the remote server.