open
, opens the request, parameters:method
– method to be used (e.g. GET, PUT,
POST),url
– url of the resource,asynch
– true to make asynchronous call,user
, pass
– credentials for
authentication.onReadyStateChange
– JavaScript function object, it is called when
readyState
changes (uninitialized, loading, loaded, interactive, completed).
send
, abort
– sends or aborts the request
(for asynchronous calls)status
, statusText
– HTTP status code and a
corresponding text.responseText
, responseXML
– response as text or
as a DOM document (if possible).onload
– event listener to support server push.fetch
method to fetch resources asynchronouslyRequest
– represents a request to be madeResponse
– represents a response to a requestHeaders
– represents response/request headersasync function logMovies() { const response = await fetch("http://example.com/movies.json"); const movies = await response.json(); console.log(movies); }
fetch
function is available in global window
path
and returns Promise
fetch('https://api.github.com/users/tomvit') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
no-cors
requestsrc
to
img
fetch('https://google.com', { mode: 'no-cors', }).then(function (response) { console.log(response.type); });
responseText
would be loaded into memory.img
like this:<img src="https://bank.com/account?do=transfer_money&amount=50000"/>
referer
headerThere is a great event happening at http://someurl.com/@"onmouseover="alert('test xss')"/
<a>
elementThere is a great event happening at <a href="http://someurl.com/@"onmouseover="alert('test xss')" target="_blank">http://someurl.com/@"onmouseover= "alert('test xss')"/</a>
Origin
– identifies the origin of the requestAccess-Control-Allow-Origin
– defines who can access the resource
OPTIONS
methodAccess-Control-Max-Age
{"name" : "tomas", "age" : 18, "student" : false, "car" : null}
[ "prague", "innsbruck", 45 ]
[ { "name" : "tomas", "age" : 18 },
{ "name" : "peter", "age" : 19 } ]
{ "cities" : ["prague", "innsbruck"],
"states" : ["CZ", "AT"] }
// data needs to be assigned var data = { "people" : ["tomas", "peter", "alice", "jana"] }; // go through the list of people for (var i = 0; i < data.people.length; i++) { var man = data.people[i]; // ... do something with this man }
GET http://pipes.yahoo.com/pipes/pipe.run?_id=638c670c40c97b62&_render=json {"count":1,"value": {"title":"Web 2.0 announcements", "description":"Pipes Output", "link":"http:\/\/pipes.yahoo.com\/pipes\/pipe.info...", "pubDate":"Mon, 07 Mar 2011 18:27:20 +0000", "generator":"..." ... } }
http://someurl.org/json_data
returns
{ "people" : ["tomas", "peter", "alice", "jana"] }then the resource at
http://someurl.org/json_data?_callback=loadData
returns
loadData({ "people" : ["tomas", "peter", "alice", "jana"] });
GET
, nothing else works obviously<script>
element<script>
into the current document. This will download JSON data and triggers the script.var TWITTER_URL = "http://api.twitter.com/1/statuses/user_timeline.json?" + "&screen_name=web2e&count=100&callback=loadData"; // this needs to be loaded in window.onload // after all document has finished loading... function insertData() { var se = document.createElement('script'); se.setAttribute("type","text/javascript"); se.setAttribute("src", TWITTER_URL); document.getElementsByTagName("head")[0].appendChild(se); // And data will be loaded when loadDta callback fires... } // loads the data when they arrive function loadData(data) { // we need to know the the structure of JSON data that is returned // and code it here accordingly for (var i = 0; i < data.length; i++) { data[i].created_at // contains date the tweet was created data[i].text // contains the tweet } }