We Keep Coding

difference between youtube's request and mine

i want to make a script that makes every video's comment section look like the ones that still have the old kind.
for example, videos on this channel:https://www.youtube.com/user/TheMysteryofGF/videos
in Firebug, in the Net tab, i noticed the comment JSON file's URL it is requested from is different.
i tried to run a code on the youtube watch page which would request the file the same way, but it doesnt work, and in firebug it says it was forbidden.
the URL is the same, they are both POST, and i cant figure out what is different. i can even resend the original request in firebug and it works... so anyway, here is a code i tried on a video with "1vptNpkysBQ" video url.
var getJSON = function(url, successHandler, errorHandler) {
var xhr = typeof XMLHttpRequest != 'undefined'
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('post', url, true);
xhr.onreadystatechange = function() {
var status;
var data;
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
if (xhr.readyState == 4) { // `DONE`
status = xhr.status;
if (status == 200) {
data = JSON.parse(xhr.responseText);
successHandler && successHandler(data);
} else {
errorHandler && errorHandler(status);
}
}
};
xhr.send();
};
getJSON('https://www.youtube.com/watch_fragments_ajax?v=1vptNpkysBQ&tr=time&frags=comments&spf=load', function(data) {
alert('Your public IP address is: ' + data);
}, function(status) {
alert('Something went wrong.');
});

You are using Ajax to get data. Ajax has 1 restriction: You can only get data from your own server. When you try to get data from another server/domain, you get a "Access-Control-Allow-Origin" error.
Any time you put http:// (or https://) in the url, you get this error.
You'll have to do it the Youtube way.
That's why they made the javascript API. Here is (the principal of) how it works. You can link javascript files from other servers, with the < script > tag
So if you could find a javascript file that starts with
var my_videos = ['foo', 'bar', 'hello', 'world'];
then you can use var my_videos anywhere in your script. This can be used both for functions and for data. So the server puts this (dynamically generated) script somewhere, on a specific url. You, the client website can use it.
If you want to really understand it, you should try building your own API; you'll learn a lot.
Secondary thing: Use GET.
POST means the client adds data to the server (example: post a comment, upload a file, ...). GET means you send some kind of ID to the server, then the server returns its own data to the client.
So what you are doing here, is pure GET.

handling server response AJAX

In the process of working on a simple project (or at least I thought to be simple) Where a user clicks a button, and a random saying generated from php appears in the above textbox. I do not have access to the php file so I can't see the code and feel a bit lost. The problem I'm having I believe, is an error in the way Im handling the response from the server (the handleServerResponse function). Any advice would be appreciated.
In an attempt to debug, I've seen this message: (I've changed the url)
XMLHttpRequest cannot load http:somephp.php. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
the code thus far:
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject(){
var xmlHttp;
if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = false;
}
}else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
xmlHttp = false;
}
}
if(!xmlHttp)
alert("Error 1");
else
return xmlHttp;
}
$("#BtnReset").click(function () {
$("#TBSaying").val("");
})
$("#BtnGetSaying").click(function () {
process();
})
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
xmlHttp.open("GET", "http://somephp.php", true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}else{
setTimeout('process()', 1000);
}
}
function handleServerResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data
$("#TBSaying").val(message);
}else{
alert('error 2');
}
}
}
Read through the JQuery documentation and started fresh, uploaded it to the same server in which the php resides and it works. here is the final code: Thanks to all that advised!
$("#BtnReset").click(function () {
$("#TBSaying").val("");
})
$("#BtnGetSaying").click(function () {
process();
})
function process(){
// AJAX Code To Submit Form.
$.get("http://somephp.php",function(data){
$("#TBSaying").val(data);
});
}

Ajax calls from a browser are restricted by what is called "same origin restrictions". Basically this means that, by default, you can only make an Ajax call back to the same server that the web page came from. That means you cannot make a regular Ajax call to a server on another domain, port or protocol.
You can read about the same origin policy here.
There are a three ways around this restriction, but all require cooperation from a server.
CORS. The server you are making the request from puts headers in its responses that tell the browser whether a cross origin request is allowed or even what domains it is allowed from. This gives the browser permission to complete Ajax calls that are not from the same origin.
JSONP. You can read more about JSONP here. Basically, you request a script from the target server and the script is coded in such a way that it will provide you the answer you want (usually in the JSON data format).
Server proxy. You find or code a server proxy that will request the data from the other server for you. Because server to server communication is not limited by the same origin restrictions, you can sometimes find another server that allows cross-origin requests to it that will then get the data for you and then return it to you.

Your javascript seems horrible, but alas, wrong
"Access-Control-Allow-Origin" is a server-sided (php?) bug, sorry.
tell the server guys to add something like
header("Access-Control-Allow-Origin: *");
to see if your javascript is correct ^^
on a sidenote,
alert("Error 1"); should probably use console.log or throw new Error() instead..
why have xmlHttp as a global, can just use process(e){ var xhr=e.target;...} instead
don't do this setTimeout('process()', 1000); , do setTimeout(process, 1000);

Coding with XMLHttpRequest for Safari Extension

In my extension, I create Access Level as "All" as well as I add whitelists as http://*/* too for every domain.
And I have following code in my JS file (which run as end script):
var feedbackmsg = "message goes here";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'http://mysitename.com/feedback.php', true);
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("html=" + feedbackmsg);
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
alert(xmlhttp.getAllResponseHeaders());
if (xmlhttp.status == 200) {
alert("send");
} else {
alert("error");
}
}
}
Whenever I run it, I am getting no header respond in alert box as well as error alert message. How can I resolve the problem?

Whether or not it's an extension, XMLHttpRequest (if injected into a page) isn't allowed to access anything outside the page's current domain, I think. The console just says that the request was cancelled. At least, that was the case for me when I tested it just now. (I didn't have any urls in the whitelist or blacklist when I tested, but the Access option was set to "all".)
You can try going to the same domain as the one you want to "call" with the XHR object in your code, and see if it succeeds then. If it does, you'll know it's because the domain of the page and the XHR request must match.
However, it appears you can do cross-site ajax request from the extension's global page (oddly enough). At least it seemed to work for me just now. That's actually a little scary (I'd prefer it to be more difficult to call up a random server from an extension) but it worked.
Don't know if that helps you out, though.

How can I request a url using AJAX

I am quite new in this area.
I need to find out how to make a request to my solr server using Ajax
How can I give a url(my solr server's url) in request
Any body know how to deal with this?
How can i make a request to the below mentioned url
http://mysite:8080/solr/select/?q=%2A%3A%2A&version=2.2&start=0&rows=100&indent=on
See here: Corrected the Code Snippet as below
function getProductIds() {
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) console.dir(xmlhttp);
else alert('no response');
var ajaxURL = "http://localhost:8080/solr/select/?q=*:*&version=2.2&start=0&rows=100&indent=on";
xmlhttp.open("GET", ajaxURL, true);
xmlhttp.send();
}
This is my code, it always showing "no response"
Thanks.

You will have to prepare the URL before sending in the request first get the URl using javascript and then encode it to ajax format like below
var URL = location.href;
var ajaxURL = encodeURIComponent(URL);
xmlhttp.open("GET",ajaxURL,true);
after reading your question clearly it seemed it is a static URL hence you can do below
var URL = "http://localhost:8080/blah blah blah";
xmlhttp.open("GET",URL,true);
Are you sure it is Get request. because get requests are most of the time cached. also log the response object into Firebug console and inspect the object to know more. Since you get no response that means the server did not send you anything for the request you made.

I'm just now working on XMLHttpRequests to solr as well and I was stuck with what seems like an identical problem. I too am quite new at this. However, the problem for me was that of same origin policy. Firefox seems to give very little feedback when this problem occurs. Chrome at least give you a error message (most of the time?).
In Chrome you can get around this, but only for development purposes, by starting it with the '--disable-web-security' command line option.
I'm yet to find a good workaround for this problem for Solr. In general you avoid the restriction by only using requests with relative paths, but that doesn't seem possible when doing a request to another port.
Ways to circumvent the policy (I haven't had time to study this too much yet)

$.ajax({
url: "url path",
context: document.body
}).done(function(data) {
alert(data);
});
This one also will work.

HTTP file download with Javascript

Is there any way (in Javascript) to download a remote website (i.e. like with Curl), read it into a string variable and further process it?

You can only download a file from the same domain, as per the Same Origin Policy. You can download content from the same domain though, using the XMLHTTPRequest object:
var xhReq = createXMLHttpRequest();
xhReq.open("GET", "page.html", true);
xhReq.onreadystatechange = onResponse;
xhReq.send(null);
...
function onResponse() {
if (xhReq.readyState != 4) { return; }
var serverResponse = xhReq.responseText;
...
}
There are ways to circumvent the policy, some of them listed in the same Wikipedia page. But it's a hack at best and illegal at worst.

Sure- The url must be from the same domain, unless the url has a cross domain policy or you create a server side proxy script.
The following code is an example of an ajax call to any domain through a proxy PHP script:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://localhost/proxy.php?url=http://google.com", true);
xmlhttp.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
// ensure we have a response...
if (xmlhttp.responseText) {
var html = xmlhttp.responseText;
// do your processing here...
}
}
};
xmlhttp.send();
You then would make your proxy.php script connect to the given url via Curl (or whatever url library your sever side language has) and then simply echo the content from your domain...
<?php
// proxy.php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$_GET["url"]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
$result=curl_exec ($ch);
curl_close ($ch);
echo $result;
?>
hope that all makes sense.

You can use the Yahoo Query Language to query any page on the web.
For example, if you want the full source of the Google homepage, you could use:
select * from html where url="http://google.com" and xpath='/html' limit 1
You'd have to use their JSON callback and reserialize the returned object, but you'd be able to get a full view of the page.

Mostly you won't be allowed. Javascript will prevent you doing this for security reasons. However, you can request json data from other domains using jQuery. Here is an example from the jquery docs that gets some cat pictures from flickr...
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 4 ) return false;
});
});
You can find this code in the jQuery Docs. As you can see, this makes a request, gets the data back and updates some image tags in the DOM with the cat pictures...