Victor Ofoegbu vickonrails

## request.js
var ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = handleRequest;
ajaxRequest.open('GET','https://api.unsplash.com/photos/?client_id=b14e32fb4fef48a669291db40c3cbb7797701501d9a453c3da8fcf5df3c77470', true);
ajaxRequest.send();
function handleRequest(data){
   console.log(data.responseText);
}

## request.js
function handleRequest(){
  console.log(JSON.parse(request.responseText));
}

var url;
url = "https://api.unsplash.com/search/photos/?query=home";
var request = new XMLHttpRequest();
request.onreadystatechange = handleRequest;
request.open('GET',url,true);
request.setRequestHeader('Authorization','Client-ID Your-client-id-here');

## ajax-post-simple-request.js
function handleRequest(){
  if(this.readyState == 4 && this.status == 200){ //Explain this in a bit.
  console.log(JSON.parse(request.responseText));
   }
}

var url;
url = "https://api.unsplash.com/search/photos/?query=home"; //We are searching for the query home.
var request = new XMLHttpRequest();
request.onreadystatechange = handleRequest;

## ajax-post-async-request.html
<!DOCTYPE html>
<html>
  <head>
    <title>Async request</title>
  </head>
  <body>
    <p> click on the button to add an image to the page</p>
    <button type="button">Get image</button>
    <img src="" width="100%">
  </body>

## ajax-post-handling-events.js
var request = new XMLHttpRequest();
request.addEventListener('progress',checkProgress);//fires when the readyState changes.
request.addEventListener('abort',abortMessage);// fires when the request is aborted.
request.addEventListener('error',errorMessage);// fires when an error occurs
request.addEventListener('load',handleRequest);// fires only when the request is successfull and data is sent back to the browser.

function handleRequest(){
  console.log(request.responseText);
}

## jquery-ajax-request.js
var request = new XMLHttpRequest();
request.onreadsystatechange = handleRequest;
request.open('GET','url',true);
request.send();

function handleRequest(){
  console.log(request.responseText);
}

## Table-ajax-methods.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                vickonrails
                / Table-ajax-methods.md
            
            
              Last active
              November 3, 2017 12:45
            
          
Method
Type
Default
Description


url
string
-
The url to make the Async request to.


type
string
"GET"
The type of request e.g GET or POST.


Async
boolean
true
A value that specifies if the request be asynchronous or not. True is Asynchronous and default.


beforeSend(xhr)
function
-
A function that is called before the request is sent.


cache
boolean
true
Value indicating if the response be cached. True means the response be cached.


dataType
string
"json"
Specifies the type of data to accept from server.


error(xhr,status,error)
function
-
A function that is called when an error occurs during the request.


success(xhr,status,error)
function
-
A function that is called when response arrives to the browser.


## jquery-ajax-example.js
$.ajax({
	url : "https://api.unsplash.com/search/photos?query=home",
	type: "GET",
	async : true,
	contentType: "application/x-www-urlencoded",
	dataType : "json",
	beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Client-ID your-client-id");
    },
	error : function(xhr,status,error){

## ajax-get-parameter-table.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                vickonrails
                / ajax-get-parameter-table.md
            
            
              Created
              November 3, 2017 12:04
            
          
Parameter
Type
Default
Description


url
string
-
An address to fetch the data from.


data
string
-
Specifies data to send to the server alongside the request


function(data,status,xhr)
function
-
A function to handle the response when it arrives.


dataType
string
Automatic type casting
Specifies the type of data to expect from the server. e.g json, text, xml.


## ajax-get-parameter-example.js
$.get(
    "https://api.unsplash.com/photos/?client_id=your-client-id",
    function(data){
        console.log(data);
    },
    "json");
	var ajaxRequest = new XMLHttpRequest();
	ajaxRequest.onreadystatechange = handleRequest;
	ajaxRequest.open('GET','https://api.unsplash.com/photos/?client_id=b14e32fb4fef48a669291db40c3cbb7797701501d9a453c3da8fcf5df3c77470', true);
	ajaxRequest.send();
	function handleRequest(data){
	console.log(data.responseText);
	}
	function handleRequest(){
	console.log(JSON.parse(request.responseText));
	}

	var url;
	url = "https://api.unsplash.com/search/photos/?query=home";
	var request = new XMLHttpRequest();
	request.onreadystatechange = handleRequest;
	request.open('GET',url,true);
	request.setRequestHeader('Authorization','Client-ID Your-client-id-here');
	function handleRequest(){
	if(this.readyState == 4 && this.status == 200){ //Explain this in a bit.
	console.log(JSON.parse(request.responseText));
	}
	}

	var url;
	url = "https://api.unsplash.com/search/photos/?query=home"; //We are searching for the query home.
	var request = new XMLHttpRequest();
	request.onreadystatechange = handleRequest;
	<!DOCTYPE html>
	<html>
	<head>
	<title>Async request</title>
	</head>
	<body>
	<p> click on the button to add an image to the page</p>
	<button type="button">Get image</button>
	<img src="" width="100%">
	</body>
	var request = new XMLHttpRequest();
	request.addEventListener('progress',checkProgress);//fires when the readyState changes.
	request.addEventListener('abort',abortMessage);// fires when the request is aborted.
	request.addEventListener('error',errorMessage);// fires when an error occurs
	request.addEventListener('load',handleRequest);// fires only when the request is successfull and data is sent back to the browser.

	function handleRequest(){
	console.log(request.responseText);
	}
	var request = new XMLHttpRequest();
	request.onreadsystatechange = handleRequest;
	request.open('GET','url',true);
	request.send();

	function handleRequest(){
	console.log(request.responseText);
	}
Method	Type	Default	Description
url	string	-	The url to make the Async request to.
type	string	"GET"	The type of request e.g GET or POST.
Async	boolean	true	A value that specifies if the request be asynchronous or not. True is Asynchronous and default.
beforeSend(xhr)	function	-	A function that is called before the request is sent.
cache	boolean	true	Value indicating if the response be cached. True means the response be cached.
dataType	string	"json"	Specifies the type of data to accept from server.
error(xhr,status,error)	function	-	A function that is called when an error occurs during the request.
success(xhr,status,error)	function	-	A function that is called when response arrives to the browser.
	$.ajax({
	url : "https://api.unsplash.com/search/photos?query=home",
	type: "GET",
	async : true,
	contentType: "application/x-www-urlencoded",
	dataType : "json",
	beforeSend: function (xhr) {
	xhr.setRequestHeader("Authorization", "Client-ID your-client-id");
	},
	error : function(xhr,status,error){
Parameter	Type	Default	Description
url	string	-	An address to fetch the data from.
data	string	-	Specifies data to send to the server alongside the request
function(data,status,xhr)	function	-	A function to handle the response when it arrives.
dataType	string	Automatic type casting	Specifies the type of data to expect from the server. e.g json, text, xml.
	$.get(
	"https://api.unsplash.com/photos/?client_id=your-client-id",
	function(data){
	console.log(data);
	},
	"json");