I have the follow problem. I need to create a JS widget and set it on one blog, for example any blog from blogger.com. YOu can select there a box for javascript and I will post the JS in this box.
The problem what I have and don't know how to do this is, that the script should do an ajax polling for exmaple for 60 seconds. But how to execute an ajax call, when the host is not the same linke the host, where the JS is includet?
For example the easiest way to explai is: There is a search box and when enayone searches for anythign, then the JS script should streaming the results for 60 seconds from the server what I have set in the script and is different as the host, where the JS is includet, without to become a problem with the JS restriction for hosts.
Or for example a chat client, where the client is hosted on one other host and the server on another.
Can anyone tell me an idea, or send me an example how to do this?
Thanks
Nik
Well with this example is it possible but without JSONP?
function asyncreq(url) {
var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlhttp = false;
}
}
}
if (xmlhttp){
try {
xmlhttp.open("GET", url);
xmlhttp.onreadystatechange=function() {
document.getElementById('mydiv').innerHTML = xmlhttp.responseText;
}
xmlhttp.send(null);
}
catch (failed) {
xmlhttp = false;
}
}
}
If you send the response in chunks, then everything is fine. But here is the call in ajax again. And when I use it in a different host, then I can't call the url because of the same-origin policy.
Is there another way?
I found a very interesting example here.
Take a look at the bottom, there is a job search box. If you investigate a litte bit, then you will see there is a usage of a class RSL() which is doing the request. How this class is doing the request without ajax? I can't understand wow this class works. Can anyone show me a better example?
There are two main options:
Put an iframe where you want the widget to go. Its src URL would be on the same server that will receive the AJAX call.
Use JSONP, which consists of inserting a script tag into the page to bypass the same-origin policy. This requires that the AJAX server wrap its JSON output in ?(...), where the URL includes callback=?. Then, as soon as a response has been received, start another request.
Related
Chrome extensions have the ability to intercept all web requests to specified URLs using chrome.webRequest.onBeforeRequest. This includes not only static asset requests, but requests for AJAX, PJAX, favicons, and everything in between.
Apple provides a few close approximations to this functionality, such as the beforeLoad (handles images, CSS, and JS) and beforeNavigate (handles full page loads) event handlers, but neither catch AJAX requests. I've tried overloading XMLHttpRequest in an attempt to catch AJAX loads to no avail (I might be doing something wrong). Here's a brief example of how I'm doing this:
var originalOpen = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function(method, url, async, username, password) {
console.log("overriden");
return originalOpen.apply(this, arguments);
}
How can I catch all web requests (AJAX, CSS, JS, etc.) in a Safari extension?
Update: You can check entire code flow on my first Safari Extension I've wrote for TimeCamp tracker: https://github.com/qdevro/timecamp.safariextz
I have succeeded to intercept all AJAX calls (actually the responses were interesting for me, because there all the magic happens), but unfortunately I couldn't find (yet) a solution to send it back to my injected script (I still work on this) now fully working - getting the xhr to the injected script:
I've done it like this:
1) on the injected START script, I've added into the DOM another script (the one which does the interception):
$(document).ready(function(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = safari.extension.baseURI + 'path/to/your/script/bellow.js';
document.getElementsByTagName('head')[0].appendChild(script);
})
2) the interception code uses this repository as override of the XMLHttpRequest object, that I've tweaked a little bit as well in order to attach the method, url and sent data to it in order to be easily available when the response get's back.
Basically, I've overriden the open() method of the XMLHttpsRequest to attach those values that I might need in my script, and added the sentData in the send() method as well:
var RealXHROpen = XMLHttpRequest.prototype.open;
...
// Override open method of all XHR requests (inside wire() method
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
this.method = method;
this.url = url;
RealXHROpen.apply(this, arguments);
}
...
// Override send method of all XHR requests
XMLHttpRequest.prototype.send = function(sentData) {
...
this.sentData = sentData;
...
}
Then, I've added a callback on the response, which get's a modified XMLHttpRequest object WHEN the data comes back, and cotains everything: url, method, sentData and responseText with the retrieved data:
AjaxInterceptor.addResponseCallback(function(xhr) {
console.debug("response",xhr);
// xhr.method - contains the method used by the call
// xhr.url - contains the URL was sent to
// xhr.sentData - contains all the sent data (if any)
// xhr.responseText - contains the data sent back to the request
// Send XHR object back to injected script using DOM events
var event = new CustomEvent("ajaxResponse", {
detail: xhr
});
window.dispatchEvent(event);
});
AjaxInterceptor.wire();
For sending the XHR object from the intercept script back to the injected script, I just had to use DOM events like #Xan has suggested (thanks for that):
window.addEventListener("ajaxResponse", function(evt) {
console.debug('xhr response', evt.detail);
// do whatever you want with the XHR details ...
}, false);
Some extra hints / (workflow) optimisations that I've used in my project:
I've cleaned the GET url's and moved all the parameters (? &) into the dataSent property;
I've merged this dataSent property if there's the case (in send(data) method)
I've added an identifier on request send (timestamp) in order to match it later (see point bellow and get the idea);
I've sent a custom event to the script called "ajaxRequest" in order to prepare / optimise load times (I had to request some other data to some external API using CORS - by passing the call / response back and forth to the global.html which is capable of handling CORS), so I didn't had to wait for the original request to come back before sending my API call, but just matching the responses based on timestamp above;
I started learning AJAX recently and am trying a very simple project which involves capturing some form data and sending it to two servers.
The first server is the one which hosts the website and server side php handling. This worls fine
The second server is a python basic http server which handles only the POST operation request send from AJAX. This functionality works but is a bit weird.
Let me explain
Here is my AJAX code which is absolutely straight forward.
function xml_http_post(url, data) {
var req = false;
try {
// Firefox, Opera 8.0+, Safari
req = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
req.onreadystatechange = function() {
if (req.readyState == 4) {
// callback(req);
}
}
req.open("POST", url, true);
req.setRequestHeader("Content-type","text/plain");
req.send(data);
}
Since I do not intend to send back any response , my callback function on ready state change is empty.
But when I execute this code ( triggered by onclick on a button) , the POST doesnt work and server doesnt seem to receive anything.
But the most surprising thing is that if I keep a breakpoint at req.open( ) and then do a manual step execution then it works always. Which means , I guess that there is some timing issue which needs to be resolved.
It works fine without breakpoints if the third parameter "async" is set to false but that is anyway undesirable so I want to make it work with async = true.
Any help would be greatly appreciated.
Thanks
Shyam
As I figured out, the form page was getting unloaded by a php script which was invoked as a action of the form b the first server. This resulted in the javascript code being partially or not executed.
So I figured out that sync XHR is the only way for my.
What is the standard method for detecting whether or not Ajax is supported on mobile devices? If it's not supported I need to replace Ajax content with static content. Did some Googling, but didn't find much.
Any suggestions or examples?
Thanks!
I don't know that there is necessarily a standard way--you can look at certain API/libraries/frameworks that use WURFL perhaps.
If WURFL is too heavyweight, here's what the UCLA Mobile Web Framework has developed thus far for it (ganked from https://github.com/ucla/mwf/blob/feature/core/root/assets/js/core/device.js):
/**
* Determine if device supports AJAX. This attempts to create an XHR object
* of the standard type and ActiveXObject varieties and, if any succeed, then
* it returns true.
*/
this.hasAJAX = function(){
var xhr = null;
try { xhr = new XMLHttpRequest(); } catch (e) {}
try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
return xhr != null;
}
I'm struggling with how to parse a response from an XMLHttpRequest. The response is in json format:
http://flickr.com/services/rest/?method=flickr.photos.search&api_key=75564008a468bf8a284dc94bbd176dd8&tags=paris&format=json
to make sure it does indeed come in as such i tested it:
document.getElementById('info').innerHTML = this.responseText
which returns me a page with a long line of data written in json format. Could someone help me figure out the next steps in order to extract data from the response i.e. a list of all titles
i did some research and came across this:
response = this.responseText ;
var doc = new DOMParser().parseFromString(response, "text/xml");
what do i need to do next?
(Note: i wish to do this manually i.e. without the help of jQuery or similar tools.)
[EDIT]
based on the suggestions below and on the Flickr page on that matter, i have tried the following:
request.onreadystatechange = function()
{
...
if (this.responseXML != null)
{
jsonFlickrApi(this.responseText) ;
function jsonFlickrApi(rsp){
for (var i=0; i<rsp.photos.photo.length; i++){
var blog = rsp.photos.photo[i];
var div = document.createElement('div');
var txt = document.createTextNode(photo.owner);
div.appendChild(txt);
//document.body.appendChild(div);
document.getElementById('info').innerHTML.appendChild(div);
}
...
}
this doesn't return anything visible yet.
[EDIT2]
further troubleshooting reveals:
rsp = this.responseText ;
document.getElementById('info').innerHTML = rsp.stat ;
prints undefined
The URL you've given returns somethins like this :
jsonFlickrApi({"photos":{"page":1, "p ... , "stat":"ok"})
So, basically, it looks like Javascript code, which :
Calls the jsonFlickrApi function,
Passing it a big JSON object as a parameter.
First of all, here, you are working with JSON, so you should not use any DOM-related stuff : DOM functions' goal is to help manipulate XML.
Instead, you should :
Write a jsonFlickrApi function,
Make sure it's called when you receive the data from Flickr
About that, you shuld find a bit more informations, and an example, here : http://www.flickr.com/services/api/response.json.html
Else, adding the &nojsoncallback=1 parameter at the end of the URL of your request, you'll get pure-JSON as a result (and not a function-call).
That would allow you to use standard JSON-manipulation functions to work with that data, not having to implement any specific function.
Between those solutions, up to you to choose which one you prefer :-)
A different alternative is not to use JSON at all, and use XML instead. Leave out the format=json part of the URL and you get the data as XML. This XML can be parsed, for example with the DOMParser() method you tried, or with this.responseXML. However, the "logistics" of using XML, compared to JSON, are a bit more complicated, as you're browsing a DOM tree and not a JS object.
Update:
So here's one of the murky details of AJAX. Depending on the browser, you can't just make XML requests between domains. The following code will work (return something useful) on Safari, but not Firefox or Chrome. (There, it will return null or empty strings.) The JSON requests seem to work fine without on all browsers, however.
<script>
function createXHR(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject){
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function getFlickr(){
xmlhttp=createXHR();
url="http://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=75564008a468bf8a284dc94bbd176dd8&tags=paris&";
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged(){
if (xmlhttp.readyState==4){
alert(xmlhttp.getAllResponseHeaders());
alert(xmlhttp.responseXML)
alert(xmlhttp.responseText)
var xmlDoc=xmlhttp.responseXML.documentElement;
}
}
getFlickr();
</script>
The cool thing about JSON is that it's actually executable code. You don't need to do any "manual" parsing – just run the code. Perhaps Flickr supplies a function called jsonFlickrApi with their API libs that they exepct you to use, but you could just as well supply your own.
function parseFlickrJson(jsonstring){
var data=null;
var jsonFlickrApi=function(d){
data = d;
}
eval(jsonstring);
return data;
}
myreturndata = parseFlickrJson(response);
// Try getting something from the object
alert(myreturndata.photos.pages);
I have an app that logs in via .htaccess. When the person wants to logout, I use:
function logout2()
{ try{
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("msie") != -1) {
// IE clear HTTP Authentication
document.execCommand("ClearAuthenticationCache");
}
else {
var xmlhttp = createXMLObject();
xmlhttp.open("GET",".force_logout_offer_login_mozilla",true,"logout","");
xmlhttp.send("");
xmlhttp.abort();
}
} catch(e) {
alert("there was an error");
}
function createXMLObject() {
try { if (window.XMLHttpRequest) { xmlhttp =
new XMLHttpRequest(); } // code
for IE else if
(window.ActiveXObject) {
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
} } catch (e) { xmlhttp=false }
return xmlhttp;
}
The problem is that this is not working for Safari, the person is always logged in using the initial credentials, even closing and reopening the browser. Does anybody know how to handle this?
It is an undocumented quirk of Mozilla's XMLHttpRequest implementation that sending bad auth in an XMLHttpRequest affects the auth used by the main browser in the future. Leveraging this to provide logout is a reasonable hack for now, but I wouldn't count on it working in the future, let alone on other browsers.
The only reliable cross-browser way I know of to allow a logout function is to redirect the user to a page that will 401 them when they pass in valid auth credentials, instead of invalid ones. Then a logged-in user will be greeted with an auth prompt, which they can put bad auth in (normally you tell them to just leave the user/pass fields blank). The script responds positively (eg 302) to the bad auth and the browser remembers it for the future, overwriting the previous good auth.
Unfortunately this process does require some significant user interaction. This is one of the drawbacks of HTTP Authentication.