I am trying to understand what the term 'AJAX' actually implies. I do understand it stands for Async JAvascript over Xml.. And I understand that it doesn't necessarily require XML (we can use json for example). I understand that AJAX is a paradigm of updating only a partial web page without requiring a full post/refresh to the server.
What my question is one of semantics: if I create a web page with a button that when pushed will call jQuery.Get() to a server to refresh a page with partially - does this mean I am using AJAX?
Or, is AJAX very specifically a set of Microsoft objects / technologies?
Thank you for the clarification
Jquery .get() and .post() is both .ajax() wrappers and as names suggests, .get() is using type: "GET" and .post() is using type: "POST" in ajax call.
So yes, when using jQuery .get() and .post() you are using .ajax() simplified version. Also .ajax() is simple wrapper over JS XMLHttpRequest (as whole jQuery does).
So in the end you are using nothing more than JS.
If the user clicks a button and the browser makes a request and replaces the entire contents of the current page with another page, then that's not AJAX.
On the other hand, if the browser loads a page, and then submits subsequent HTTP requests triggered by events which then cause the page to alter content or design, then that is AJAX. It doesn't matter which browser.
AJAX uses XMLHttpRequest to send requests, and typically uses the response to do make a change on the page. jQuery.get() (and jQuery.post(), etc) is just a wrapper that makes AJAX a bit easier to use, and more consistent across different browsers.
See also:
how does an Ajax request differ from a normal browser request?
Yes. You are using AJAX. jQuery.get is shorthand for:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
http://api.jquery.com/jquery.get/
AJAX is actually a terminology applied to the use of combined technologies such as HTML, Javascript, and specially the xmlHttpRequest object.
This one (xmlHttpRequest) is actually the core of AJAX methods, since it's a way of obtaining data from a URL without refreshing the whole page. Every AJAX call makes use of the xmlHttpRequest object.
It is not subject to JQuery. In fact, JQuery, as most frameworks, is intended to simplify javascript methods. When you use JQuery's $.ajax() or $.get() or even $.post(), it is actually, behind the scenes, instantiating the core xmlHttpRequest and performing the request.
This methods are just simplifiers so you won't have to deal with all the arguments and parameters of making a http async request...
Related
I am looking for a way to manually submit a Post request to a server, without using the website's UI. I can see the request headers and the post parameters in Firebug when I perform the action manually (clicking the UI's "submit" button). I am hoping there is a way to reverse engineer some Javascript using these headers and parameters so that we can automate this process.
Reason: My company recently purchased some process automation software that enables us to write automation bots that access out business partner's portal site and automatically adjust our digital marketing bids. For one of our partner sites, front-end manipulation doesn't appear to work, because the Post request is submitted via AJAX.
The software does allow us to execute custom javascript within the environment, so I am trying to construct some Javascript using the headers and request parameters.
Is there a standard template into which I can plug these parameters to execute Javascript that will send the Post request to the server?
Thank you
UPDATE:
Thank you all for your help! I've made some progress but am still having difficulty implementing the solution within the software.
The following request works when I run the code in Firebug in Firefox:
$.ajax({
type: "POST",
url: "http://acp.example.com/campaigns/122828",
data: "data-string"
});
However, the software we're using might be a little out of date and I'm not sure it recognizes the AJAX syntax.
Is there a way to effectively write the same statement above, but in Javascript rather than AJAX? Then I think it would work.
You can use AJAX to post data to a server without any direct UI interaction. I will break down a simple jQuery example below:
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
});
$.ajax Is a method offered by the jQuery framework to make AJAX requests simple and cross browser compatible. As you can see I have passed in a JSON object containing various values:
type - This is the first key I have specified, in this instance you'll want this to be of the value POST as this determines the HTTP Request Method.
url - This specifies the server end point, for example: post/data/here.php would post the data to that url so that it can be picked up and handled correctly.
data - This key expects a JSON object, string or array of data to send in the POST request.
success - This key expects a function, it is called on the server's response to the request, with any relevant data passed through.
More documentation is available at: http://api.jquery.com/jquery.ajax/
If all you want to do is POST data, no JavaScript needed.
You should be able to use a browser extension for this. I have one called REST Console that is similar to what you describe. I believe REST Console is for Chrome only, but a quick Google search yielded a similar looking extension for FireFox called RESTClient.
If all I want to do is submit a form to a PHP processor with POST data and get the result, is there any reason to use the ajax method over the jQuery load method?
Using Ajax requires a bunch of code versus something very simple on one line in jQuery like this:
$("#myDIV").load("myProcessor.php", {field1: target.value});
Hmmm, maybe this only works well with one field? Sorry, just getting back into JS.
$(element).load(...) will automatically insert the server response into the selected element as html (jQuery documentation for .load()). This might result in your server exposing information about the request directly to the user, which is probably not what you're looking to do.
$.ajax() also allows very fine control over what happens during the request. You can accurately intercept exceptions and produce a callback when the request finishes succesfully. These are all reasons to use $.ajax() over $(element).load(...). However, if your only concern is sending the data in the POST header and working with the response, then using $.post with a callback function will probably be the simplest approach. http://api.jquery.com/jQuery.post/
The .load method is is roughly equivalent to $.get(url, data,
success) (src).
The .get method is a shorthand Ajax
function (src).
For a simple ajax call, .load is appropriate. Use .ajax if you want to deal with specials parameters.
PS: If you don't want a fat framework like jQuery, look here : http://microjs.com/#ajax
From jQuery website about load
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success) except that it is a
method rather than global function and it has an implicit callback
function. When a successful response is detected (i.e. when textStatus
is "success" or "notmodified"), .load() sets the HTML contents of the
matched element to the returned data.
you can read difference between load ajax on StackOverflow.
But, load is not for submitting a form using post method. Both POST and GET are different methods and works differently, data submitted using GET method will be available in the $_GET array but not in the $_POST.
I'm trying to understand AJAX and JSON and I'm not sure I get it, there are methods and functions that are doing the same stuff...
You've got $.getJSON to retrieve JSON format data from server, and you have $.ajax + $.post + $.get + load() to send data data to the server?
Can I use all of those methods to send JSON data?
Really I'm confused! Help me figure this out.
All those are just shorthands for calling the $.ajax function.
load is for retrieving HTML and writing it to the DOM in one go. You want to load JSON.
get and getJSON use GET requests which are not well-suited for sending JSON data.
post does a POST request, but doesn't allow you to choose the contentType of the sent data
For sending JSON you should use the $.ajax function with its many options, see Send JSON data with jQuery.
An AJAX request is, at heart, an HTTP request. This is the same protocol which is used for all content on the Web (arguably, if it's not HTTP, it's not the Web) - loading a page, the images on the page, the CSS and JS includes, a submitted form, etc, etc.
As such, it inherits pretty much all of the flexibility of HTTP, meaning a generic function like jQuery.ajax ends up quite complex, with lots of options you don't normally need to worry about. This leads to the Shorthand Methods you mentioned, which bundle up common sets of options and functionality.
Among the things you might want to vary:
The "method" of the request: GET or POST (or less common ones like HEAD, PUT, DELETE...). A GET request is the simplest: request this URL, give me its contents; parameters to a GET request are shoved onto the "query string" of the URL. A POST request is how larger forms would be submitted on a normal page: the parameters are passed as a body of data separate from the URL and control headers; for an AJAX request this is often helpful to send a block of XML or JSON to a URL. This is a very broad overview, and there are many more distinctions in behaviour and meaning between the two.
The "content type" you want in the response (and, for a POST request, of the data you're sending). Not only does this tell both the server and the browser what data it is handling, ensuring it will pass it successfully, it can give jQuery (or whatever library) a hint of what to do next: if a call returns XML, you'll probably want to manipulate it as a DOM straight away; if it's JSON, you'll want to parse it as a JS object.
What you want to do once the data comes back. I've already mentioned parsing JSON or XML, but what if your response is actually a block of HTML that you want to inject straight into the parent page? Obviously you could do that yourself in the callback function, but again jQuery includes a shorthand form in the shape of .load().
All of the above are possible with jQuery.ajax, but you'd have to remember the parameters, even though you're falling into the same cases again and again, so chances are most of the time you'll be using whichever of the shorthands suits your needs at that moment.
I have a javascript which gets JSON data from URL and loads the data on to the page, then I want to call another javascript to add the slide effects.
There is a simpler solution, i.e using setTimeout. But this solution is not complete because getting data from a URL does not have a fixed amount of time. It varies on every call.
Hence I want to check if my first javascript has loaded and then I want to call the second javascript.
JavaScript is an asynchronous language, or at least, its HTTP API is (mostly) asynchronous.
You shouldn't use settimeout, but you should use asynchronous chaining instead for building a list of causal events. There's a big bunch of libraries out there to assist this, like http://www.infoq.com/articles/surviving-asynchronous-programming-in-javascript
If you're loading content from your own site, then there'll be an onsuccess/oncomplete event when the JSON finally gets loaded, you can assign a callback to it. How it is actually called depends on your javascript framework if you use one.
If you're using data from a remote site in a format called JSONP, you're to define a callback to it, it should be a public function name, like onMyDataArrived. You should add your callback code there. Some frameworks hide this detail from you, they generate a random function which they remove when the data has arrived, and provide an API similar to onSuccess / onComplete instead.
Nowadays, the most popular javascript framework is jQuery, where you can do such things, like:
$.ajax({
url: 'give_me_my_json.php',
dataType: 'json',
success: function(data){
//call your second javascript
},
error: function(){
//WHOOOPSIE... data could not be loaded
}
});
I have a form whose target is an iframe.
When submitting the form, the response is XML and I have Javascript that analyzes the response.
I noticed that when running on IE, IE intercepts the response and treats it as an RSS feed, so my code never receives the response. If I disable the RSS feeds (from the internet option, content tab) everything works ok.
I set the content type of the response to “text/xml; charset=UTF-8” but still it does not work.
Is there any workaround?
The best workaround would be not to use an iframe in this case. It sounds like IE is catching the http response and reading it on its own. Is there a reason you're not making an AJAX call to retrieve the information? It sounds like you're relying on JavaScript to handle the response anyway, so I would think that using an XMLHttpRequest object would be better for you: http://www.w3.org/TR/XMLHttpRequest/
If that's too complicated, look into a library like jQuery: http://jquery.com/ that has built in (and much simpler) functions to make AJAX calls and handle responses.
To expand on this, you would bind the submit function of the form to a JS function (or use jQuery to do it) and pick up the form data, send it in an AJAX request, and handle the response. jQuery has a built in function serialize() which is meant to convert form data on a page into information ready for use in the ajax() function to send to the server. If you're unfamiliar with the XMLHttpRequest object, I would highly suggest using a library like jQuery for this task.
OK, found the problem…
My response XML contains FEEDBACK tags.
IE treat these tags as RSS feeds. Changing the tag name to FDBACK resolve this issue…
MS, why this is not documented???
Yes, also make sure the file is output with the correct Content-Disposition using headers, do that IE gets "response.xml" and not "response.php" or some such...
'Content-Disposition: attachment; filename="response.xml"'