How can i simulate REST post request with json data in browser - javascript

I have the web application where the frontend is in ExtJS and backend is in PHP.
The forms are build in Extjs and its making PUT and POST request to server for saving data.
The josn data is posted like this
{"id":"101","description":"user1","active":true}
Now for debugging i would like to directly call this URL in browser so that i can use var_dump for helpful messages.
As the request is AJAX by Extjs , so its very difficult to see messages through firebug.
Is there any way to make this request from browser and see response in rendred html.
I don't want to make form.

If you are using Google Chrome you can use the Postman Extension. It allows you to send pretty much any type of data and see the results.

For firefox you can use restclient plugin. Its also very easy to use, and userfriendly.
Also, if you know curl, you can do it programatically from PHP.

If the requests being made through a store in extjs, you can use Ext.getStore to find the store and create global variable. Then you could manipulate this global variable in the console.
i.e. write following in console
var s = Ext.getStore('myStore')
then after firing you can now manipulate this global in console
s.proxy.extraParams.myChangedValue = 'newValue'
s.load()
The response from the server will be in the network panel in chrome browser or use firebug extension for firefox. You can also add a callback or listener to the load event to console.log() what was parsed by the framework.

Another alternative is the Chrome's Advanced REST Client App. It isn't as powerful as the postman extension but I think it is a little bit easier to use.

If you are on good terms with curl you can just use it directly with -d (--data) option like that:
curl -X GET -H "Content-Type: application/json" -d #data.json localhost:8080/path/to.json
Where data.json is a JSON file.
Anyway, representation of an extension might be more intuitive and readable.

Related

How to use requests in Python 3 to fetch data from website that utilizes JavaScript and jQuery

I have been playing around with the requests library in Python 3 for quite some time now, and have decided to create a test program. For this program, I'm using the website https://ytmp3.cc/ as an example. But it turns out that a lot is going on, on the client-side it seems.
Some keys and other stuff are being generated, and I have been using Firefox's built-in network monitor, to figure out in which requests this is being made, but without luck.
As far as I know, the requests-library can't keep a "page" open and modify the DOM and content, by making more requests.
Anyone whom could take a look, and give a qualified guess on how the special keys are generated, and how I could possibly get these for my own requests.
Fx when loading the webpage, the first request made is for the root, and the response contains the webpage HTML. What I noticed is that at the bottom, there's an url containing some key and number.
<script id="cs" src="js/converter-1.0.js?o=7_1a-a&=_1519520467"></script>
id 7_1a-a
number _1519520467`
This is used for making the next request, but then a lot of following requests are being made, and some other keys are made as well. But I can't find where these come from since they are not returned by a request.
I know that when inserting a Youtube link, a request will be made to an url, as seen below.
https://d.ymcdn.cc/check.php?callback=jQuery33107639361236859977_1519520481166&v=eVD9j36Ke94&f=mp3&k=7_1a-a&_=1519520481168
This returns the following:
jQuery33107639361236859977_1519520481166({"sid":"21","hash":"2a6b2475b059101480f7f16f2dde67ac","title":"M\u00d8 - Kamikaze (Official Video)","ce":1,"error":""})
From this I can construct the download url, using the hash from above:
https://yyd.ymcdn.cc/ + 2a6b2475b059101480f7f16f2dde67ac (hash) + /eVD9j36Ke94 (youtube video id)
But how do I get
jQuery33107639361236859977_1519520481166&v=eVD9j36Ke94 and 1519520481168
Which I need to create the request?
You can probably save yourself and the operator of that website a lot of headache by just using youtube-dl, specifically with the --extract-audio --audio-format mp3 options. It's probably what that website itself uses.
youtube-dl is written in Python and can easily be used programatically.
If you insist on sending requests to that website for whatever reason, here's how I'd do it:
callback=jQuery33107639361236859977_1519520481166 specifies the name of the callback for the JSONP request. Any name you provide will be printed back out. For example, passing callback=foo will result in the following response:
foo({...})
You can omit it entirely and the server will serve just a JSON response in this case, which is nice.
_=1519520481168 is just to prevent the response being cached. It's randomly generated, just like the above parameter. The website checks for existence, however, so you have to at least pass something in.
The website, like many, checks for a valid Referer header.
Here's a minimal cURL command line to make a request to that website:
curl 'https://d.ymcdn.cc/check.php?v=eVD9j36Ke94&f=mp3&k=aZa4__&_=1' -H 'Referer: https://ytmp3.cc/'

UIAHost Request example with json

has someone any ideas, how can i make a request with UI Automation and JS with UIAHost. An example is welcome with POST as method, some data and json as datatyp.
Thank
The easiest way to make an HTTP request via UIAutomation would be to make a cURL request via the shell using performTaskWithPathArgumentsTimeout.
If you are making a POST request with a lot of data, you may want the shell command to read the data from disk (instead of specifying it all on the command line). Our Illuminator project provides a function that lets you write arbitrarily large files to disk from within UIAutomation.

sending local mp3 file to api server using jquery

I wish to use echoprint - http://echoprint.me/start - which allows me to send an mp3 file locally from my computer in a post request, and returns a json object including the song's details from their server.
I am attempting to make this post request using jquery in order to allow me retrieve the json object containing the song details, which will then allow me view this in my browser's console.
The echoprint website - http://developer.echonest.com/docs/v4/track.html - explains how to make this post request using curl. The following code works in the command line. This returns a json object, however this gets returned in the terminal.
curl -F "api_key=#############" -F "filetype=mp3" -F "track=#tambourineMan.mp3" "http://developer.echonest.com/api/v4/track/upload"
I have read the curl docs http://curl.haxx.se/docs/httpscripting.html#POST to try and understand where the correlation exists between the curl and jquery, but unfortunately I am having difficulties relating the two and understanding what -F means.
My aim is to make this post request using jquery so I can make the same request as outlined using curl above, and retrieve the json data in the browser's console.
From a previous question I asked on here I have tried to adopt the logic from that answer and used the following code, however this returns an error that the file cannot be encoded. I have tried it with and without the content type specified, but both methods fail.
$.post("http://developer.echonest.com/api/v4/track/upload", {
"api_key":"##################",
"track":"#tambourineMan.mp3",
"filetype":"mp3",
"contentType:" "application/octet-stream"
},
function( data ) {
console.log(data)
},
"JSON" );
There are instructions here http://developer.echonest.com/docs/v4/track.html but they only explain how to do this using curl. If anyone could shed any light on this it would be greatly appreciated. Pardon my ignorance in advance.
cURL uses the # prefix to mean "the contents of the named file", in your AJAX request you are sending #tambourineMan.mp3 as a literal string.
One easy to way to accomplish your task is to put a file input in your document and tell jQuery to use the data from that file:
var file = document.getElementById('myFileInput').files[0];
$.post("http://developer.echonest.com/api/v4/track/upload", {
"api_key":"##################",
"track":file,
"filetype":"mp3",
"contentType:" "application/octet-stream"
});
Take a look at the FileReader API and at this article about sending and receiving binary data in a XMLHttpRequest

text/html output when requesting JSONP

I have been playing around with the jQuery library the last week or two.
Very handy! I am now playing with the AJAX requests to retrieve things such as the weather, current downloads and more, which have been going well so far!
I have now tried to connect up to my ISP to get my current data usage (peak, off peak etc).
When I use Chrome, I can manually type the variables into the URL and have the required JSON code show in the browser. The issue is, that it seems to return text/html instead of application/json.
When you go into developer tools, it shows text/html. This make it difficult for me to retrieve the data from my home server using AJAX and JSONP. See here for a failed query (but you can still see the text/html output, which is in a JSON format! Failed JSON Query on ISP
My question is, how could I get this data from the server URL, then make it into JSON that jQuery can read?
When I try the .load , $.get functions I run into Cross Origin Issues...
EDIT:Here is the PDF documentation for the API (Download at the bottom of the page)
Notice that I need to append certain values (user / pass / token). My ultimate aim is to have my JS read these values and store them.
The issue is, that it seems to return text/html instead of application/json.
That's a serverside issue. Go and file a bug report.
This make it difficult for me to retrieve the data
Not by itself. You should be able to override the settings how responses are parsed, e.g. in jQuery by using the datatype parameter.
using AJAX and JSONP
Notice that you cannot use JSONP, as it is not supported by that API (judging from the docs and a simple ?callback=test try). If you want support for that, file a bug report against the service provider.
When I try the .load, $.get functions I run into Cross Origin Issues...
Yes. They don't send CORS headers either. I suspect that this API is only used internally, and by devices that are not subject to a same-origin policy.
how could I get this data from the server URL, then make it into JSON that jQuery can read?
Use a proxy on your own server (that runs in the same domain as your app). It can also fix that content-type header.
For more details see also Ways to circumvent the same-origin policy, though most of the methods require cooperation of the service provider (to implement serverside features).
If i understand you correctly You ask for a certain value and it gives you a string. For most API's in the world they send a string that you have to parse into JSON or some language code. I would suggest looking at Parsing JSON Strings link. It explains how to take well formated strings and parse them into JSON readable objects.
var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );
if you go on further and start using php take a look that Parsing JSON Strings with PHP
EDIT:
use .done() method to grab text from other pages after AJAX call.
$.ajax(...).done(function(html){
//do what you want with the html from the other page
var object = $.parseJSON(html)
}

Connection AJAX, CouchDB and JavaScript

i've got a little problem with AJAX, CouchDB and JavaScript.
I can open the following URL from CouchDB in my browser: http://192.168.1.58:5984/mydb/name
new Ajax.Request('http://192.168.1.58:5984/mydb/namee', {
method: 'POST',
onComplete: function(transport) {
alert(transport.responseText);
}
});
I always get empty alert.
Can you help me?
The problem here is, that your browser doesn't allow you to make a query on an other web server than the one where you're script originates. (Google for: Same Origin Policy)
But there is a kind of a common technique which is a workaround for this use case. It's called JSONP. Since version 1.0 you have to activate this functionality first in CouchDB. In the section [httpd] of your CouchDB configuration file (.ini) you have to add an
allow_jsonp = true
After this is done you can produce JSONP queries on your CouchDB. Basically adding dynamically lines like this:
<script type="text/javascript"
src="http://server2.example.com/getjson?callback=parseResponse">
</script>
But for details refer to the article linked above.
Anyway I propose on the JavaScript side of things to use a Framework as jQuery, DojoToolKit, ect. In jQuery e.g. it is enough to add "?callback=?" at the end of the URL.
AJAX doesn't support cross domain scripting. all calls need to be to a URL with the same domain as the one of the current document.
a good solution would be to build a proxy service on the server side, that will take the local
request, make an HTTP call to the couchDB server, and return it's response.

Categories

Resources