Error : Ajax is Undefined - javascript

I am using the below code in a script tag to call one URL in the background.
var request = new Ajax.Request(logoffURL, {method : 'post'});
But I am getting script error Ajax is undefined.
Do I need to include any external scripts?

That code uses Prototype. If you want to use that code, you'll need to include Prototype into your page. For example, using Google's CDN:
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>

Yes, you need to include some external script (jQuery, for instance) and learn how to do ajax calls there. There is no Ajax object in browser, but there is XMLHTTPRequest. But again - you must learn how to use it first. For instance - here is how you can use XMLHTTPRequest

Here's a good place to start:
http://api.jquery.com/jQuery.ajax/
As the example shows, you can do something like this:
$.ajax({
url: logoffURL,
context: document.body
}).done(function() {
alert("DONE");
});
I recommend using a CDN to reference jquery:
https://developers.google.com/speed/libraries/devguide#jquery

Related

What's the difference between using a script tag to call a file and ajax?

Aside from the obvious use of jQuery, is there a difference between calling a script into a page with:
<script src="script.js">
vs
ajax({
url: 'script.js,
dataType: 'script'
})
When you are using an ajax request you are expecting an answer (which in this case is the file as string), where as when you add a script tag it will try to run the file or add its functions to the global scope.
see here in datatype

how JSONP will work in the behind-the-scenes in cross domain ajax calls

I am in the initial steps of jQuery AJAX and I am trying to understand how JSONP will help in cross domain communication. Can some body throw some light on this please?
var request = $.ajax({
url: "",
method: "",
data: {},
dataType: "jsonp"
});
Read this article, it will guide you.
The idea of JSONP is actually pretty simple: toss a script tag into
the DOM with a reference to a resource that returns JSON data. Have
the server return said JSON with “padding” (the “P” part of JSONP)
that executes a function wrapping the incoming data. In order for this
to work properly, the server API must also support JSONP. Typically,
the function name is named as the callback parameter.
iIt adds a new <script src="sourceURL"></script> tag to your DOM (i.e. the HTML you write). Just like if you'd include jQuery by
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Then, instead of having $() or jQuery() functions available you can use your JSONP functions like for example MyCallback() in your further code.

jQuery adding querystring to script load?

Adding this js to my page:
$("#divExample").append("<script type='text\/javascript' src='\/scripts\/test_code.js'><\/script>");
Causes a request to:
http://.../scripts/test_code.js?_=1395691742415
I need to eliminate the query string as it is preventing the js file from being cached. My best guess is that this is in some way connected to jQuery ajax, which appends the same style of querystring when doing certain types of call (e.g. jsonp).
Background on why I'm doing this: I need to push off the script load (which is actually a part of a larger js block) until after the page ready event has completed. The above is just a cut down sample which shows the same symptoms.
Currently using jQuery 1.8.3 but I really hope the answer doesn't include upgrading since that will mess with dependencies.
Set the jQuery cache global to true to prevent this.
$.ajaxSetup({
cache: true
});
Even though this appears to be config just for ajax, it affects <script> tags like you're using.
If you don't want to apply the global to all ajax requests, you can use plain Javascript (no jQuery) to do it:
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'test.js';
document.getElementById("divExample").appendChild(s);
The third option is you can use $.ajax to import the script like so:
$.ajax({
url : 'test.js',
type : 'script',
cache : true,
success : function(){
}
});

Ajax Call Confusion

before we start apologies for the wording and lack of understanding - I am completely new to this.
I am hoping to run a php script using Ajax - I don't need to send any data to the php script, I simply need it to run on button press, after the script is run I need to refresh the body of the page. What I have so far:
HMTL Button with on click:
<font color = "white">Next Question</font>
JS Ajax call:
function AjaxCall() {
$.ajax({
url:'increment.php',
type: 'php',
success:function(content,code)
{
alert(code);
$('body').html(content);
}
});
}
this runs the php script but doesn't stay on the current page or refresh the body - has anyone got any ideas - apologies if this is completely wrong I'm learning - slowly.
Many thanks in advance.
**As a small edit - I don't want a user to navigate away from the page during the process
How about using load instead of the typical ajax function?
function AjaxCall() {
$(body).load('increment.php');
}
Additionally, if you were to use the ajax function, php is not a valid type. The type option specifies whether you are using GET or POST to post the request.
As far as the dataType option (which is what I think you mean), The Ajax doesn't care what technology the called process is using (like ASP or PHP), it only care about the format of the returned data, so appropriate types are html, json, etc...
Read More: http://api.jquery.com/jquery.ajax/
Furthermore, if you are replacing the entire body content, why don't you just refresh the page?
your ajax should be
function AjaxCall() {
$.ajax({
url:'increment.php',
type: 'post',
success:function(data)
{
console.log(data);
$('body').html(data);
}
});
}
if you want to learn ajax then you should refer this link
and if you just want to load that page then you can use .load() method as "Dutchie432" described.
If you are going to fire a javascript event in this way there are two ways to go about it and keep it from actually trying to follow the link:
<font color = "white">Next Question</font>
Note the return false;. This stops the following of the link. The other method would be:
<font color = "white">Next Question</font>
Note how this actually modifies the href to be a javascript call.
You can study about js and ajax here http://www.w3schools.com/ajax/default.asp will help a lot. Of course all js functions if called from internal js script should be inside <script></script> and if called from external you call the js gile like <script src"somejs.js"></script> and inside js there is no need for <script> tags again. Now all those function do not work by simply declaring them. So this:
function sayHello(){
alert("Happy coding");
}
doesn't work because it is just declared and not called into action. So in jQuery that you use after we declare some functions as the sayHello above we use:
jQuery(document).ready(function($){
sayHello();
});
Doing this we say that when everything is fully loaded so our DOM has its final shape then let the games begin, make some DOM manipulations etc
Above also you don't specify the type of your call meaning POST or GET. Those verbs are the alpha and omega of http requests. Typically we use GET to bring data like in your case here and POST to send some data for storage to the server. A very common GET request is this:
$.ajax({
type : 'GET',
url : someURL,
data : mydata, //optional if you want to send sth to the server like a user's id and get only that specific user's info
success : function(data) {
console.log("Ajax rocks");
},
error: function(){
console.log("Ajax failed");
}
});
Try this;
<script type="text/javascript">
function AjaxCall() {
window.location.reload();
}
</script>
<body>
<font color = "white">Next Question</font>
</body>

Is it possible to use javascript to download JSON object from another domain/server?

What would that code look like?
That other domain/server needs to support JSONP, which basically wraps the JSON in a callback.
In jQuery, the call would look like this:
$.getJSON(
'http://otherdomain.com/api/whatever?callback=?',
{ key: 'value', otherkey: true },
function(data){
//handle response
}
);
The actual response from the other server (if you looked at what was actually being sent) would look like this:
// With this url:
http://domain.com/api/method?callback=the_callback_function_name
// The response would look like this:
the_callback_function_name({ "json": "data here"});
The jQuery getJSON method automatically handles JSONP when you supply the extra callback=?. Just keep in mind some sites using different names like json_callback=?. The important part is that you include it as part of the URL and don't try to add callback: '?' to the data part of the getJSON function.
Only via JSONP. Whether you use jQuery or some other framework, it boils down to a script block like this:
<script type="text/javascript" src="http://path.to/your/javascript"></script>
The <script> block is immune from cross-domain restrictions. The caveat is that the service should support JSONP as well. If the script returns a JSON object like this:
{a: 0, b: 1}
The object will be evaluated but nothing happens. But JSONP services accept a callback function name something like this
<script type="text/javascript" src="http://path.to/your/javascript?callback=yourCallbackFunction"></script>
and wrap the data as a parameter to your callback like this:
yourCallbackFunction({a: 0, b: 1});
So that the function is called when the script is evaluated.
You can use JSONP. in jQuery, try getJSON: http://api.jquery.com/jQuery.getJSON/
Instead you should use a local proxy. Set up a asp.net/php page that will load the remote page on the back end and then use ajax to load the proxy page.

Categories

Resources