POST data through Ajax without using JQuery methods - ajax

I've an Ajax code, through which i want to send securely a private access_token to a url via http POST, how to achieve this using below given code??
function getstatus(url, placeid, access_token)
{
if(window.XMLHttpRequest)
{
xmlRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
try
{
xmlRequest = new ActiveXObject("Msxm12.xMLHTTP");
}
catch(e)
{
try
{
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlRequest = false;
}
}
}
xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = function()
{
if(xmlRequest.readyState==4)
{
if(placeid == "adminstatus")
adminstatus.innerHTML=xmlRequest.responseText;
if(placeid == "dbview")
{
dbview.innerHTML=xmlRequest.responseText;
}
}
}
xmlRequest.send();
}
Consider the parameter "access_token" in the function getstatus is to be http POST-ed!

Take a look at XMLHttpRequest, assuming you are attempting to send the data as key/value pairs,
xmlRequest.open("POST",url,true);//use the post method
xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//set the content type
...
xmlRequest.send("access_token="+encodeURIComponent(access_token));//send the token

Related

How can I send a synchronous ajax request to my server in onunload function

I need to send a ajax request to my server before web page close, my send code is below.
SendByAajx = function(msg) {
var response;
var xmlHttpReg;
if(window.XMLHttpRequest){
xmlHttpReg = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
} else {
throw new Error("Unsupported borwser");
}
if(xmlHttpReg != null) {
xmlHttpReg.open("get", "https://127.0.0.1:57688/test"+'?'+msg, false);
xmlHttpReg.send(null);
if(xmlHttpReg.readyState==4){
if(xmlHttpReg.status == 200) {
var data = JSON.parse(xmlHttpReg.responseText);
if(typeof(data.errorcode) == "number" &&
data.errorcode != 0) {
throw("response error:" + data.errorcode);
}
response = data.result;
} else {
throw new Error("Error");
}
}
}
return response;
}
When I call this function in a button onclick event, it works.
function GetOnClick() {
try{
var result = SendByAajx (“data”);
} catch (e) {
//alert(errorInfo);
}
SetButtonDisabled(false);
}
But when I call this function when the page is unloaded, it doesn't work.
<body onload="javascript:OnLoad();" onunload="javascript:OnUnLoad()">
function OnUnLoad() {
try{
var result = SendByAajx(“data”);
} catch (e) {
//alert(errorInfo);
}
}
When I debug the application, the JS execution stops after this line:
xmlHttpReg.send(null);
It didn’t go to the next line:
if(xmlHttpReg.readyState==4)
The “data” is also not sent to the server.
What is wrong with my program, can ajax be called in an onunload function? What should I do to make it work?

How do i use the AJAX request in JSP

I have created a registration page in JSP and I wanted to validate it with AJAX. So far I have written a piece of code that creates a request object(AJAX).
validate.js
window.onload=initPage;
function initPage() {
document.getElementById("username").onblur = checkUsername;
document.getElementById("register").disabled = true;
}
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
return request;
}
function checkUsername() {
document.getElementById("username").className="thinking";
request=createRequest();
if(request==null)
alert("Unable To Fetch Request");
else
{
var name=document.getElementById("username").value;
var userName=escape(name);
var url="checkName.jsp?username="+userName;
request.onreadystatechange=showUserNameStatus;
request.open("GET", url, true);
request.send(null);
}
}
The problem that I'm into is the url. I don't know how to validate that username in checkName.jsp. Actually the scenario is if the userName is validated then user can register himself and if the username is already registered, then server should force the user to choose different username.
function showUserNameStatus() {
if(request.readyState==4)
{
if(request.status==200)
{
if(request.responseText=="okay")
{
document.getElementById("username").className="approved";
document.getElementById("register").disabled = false;
}
else
{
document.getElementById("username").className = "denied";
document.getElementById("username").focus();
document.getElementById("register").disabled = true;
}
}
}
}
If I understand, you have a registration page jsp , in which you are posting an AJAX call to validate the user , if the user is valid then you want to go ahead else you would like to throw back stating the user is already present ,choose a new one .
Instead of posting a call to the jsp ,what I will suggest is you can post the same to a servlet/controller/action class (whichever standard framework you are referring to) and then return back the response to the ajax call.

AJAX - Return responseText

I've seen the myriad threads sprawled across the Internet about the following similar code in an AJAX request returning undefined:
AJAX.onreadystatechange = function() {
if(AJAX.readyState == 4) {
if(AJAX.status == 200) {
var response = AJAX.responseText;
return response;
}
else {
window.alert('Error: ' + AJAX.status);
return false;
}
}
};
I know that I'm supposed to "do something with" responseText like writing it to the HTML. The problem: I don't have that luxury. This bit of code is intended to be inside of a generic method for running fast AJAX requests that way all the code for making an AJAX request doesn't have to written out over and over again (~40×) with the chance of a minor problem here or there that breaks the application.
My method HAS to explicitly return responseText "or else." No writing to HTML. How would I do this? Also, I'd appreciate a lack of plugs for JQuery.
What I'm looking for:
function doAjax(param) {
// set up XmlHttpRequest
AJAX.onreadystatechange = function() {
if(AJAX.readyState == 4) {
if(AJAX.status == 200) {
var response = AJAX.responseText;
return response;
}
else {
window.alert('Error: ' + AJAX.status);
return false;
}
}
};
// send data
}
...
function doSpecificAjax() {
var param = array();
var result = doAjax(param);
// manipulate result
}
Doing a little research I came across this SOF post:
Ajax responseText comes back as undefined
Based on that post, it looks like you may want to implement your ajax method like this:
function doRequest(url, callback) {
var xmlhttp = ....; // create a new request here
xmlhttp.open("GET", url, true); // for async
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status == 200) {
// pass the response to the callback function
callback(null, xmlhttp.responseText);
} else {
// pass the error to the callback function
callback(xmlhttp.statusText);
}
}
}
xmlhttp.send(null);
}
Then, you can call that method like this...
doRequest('http://mysite.com/foo', function(err, response) { // pass an anonymous function
if (err) {
return "";
} else {
return response;
}
});
This should return the responseText accurately. Let me know if this doesn't give you back the correct results.

Adapt ajax for crossdomain

Is it possible adapt this code for crossdomain and how
function makeRequest(url) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); };
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents(http_request) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
receiveData(http_request.responseText);
} else {
alert("Îòâåò ñåðâåðà ïîëó÷åí, íî åñòü îøèáêà");
}
}
}
The same origin policy prevents JavaScript reading data from different origins under normal circumstances.
You can work around with:
A proxy for the data on the page's origin
JSONP
CORS (limited browser support, but possibly good enough for prime time now)

problem with AJAX request

i hava created the ajax XMLHttpRequest request for getting the data dyanmically ,
here is the code
var XMLHttpReq;
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
XMLHttpReq = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
try {
if(XMLHttpReq==null)
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
if(XMLHttpReq==null)
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
}
}
this is the method which sends the request
function personList(person) {
createXMLHttpRequest();
var url="query?option=person&userName="+person.innerHTML;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange =personListResponse;
XMLHttpReq.send(null);
}
function personListResponse() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var xml=XMLHttpReq.responseXML;
}
}
}
the request is sent to the servlet only for the first time,when i try for the second the request is not sent ,instead am getting the previous response what i got earlier
I suppose it's cache.
Try adding this before the request:
XMLHttpReq.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
XMLHttpReq.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
XMLHttpReq.setRequestHeader("Pragma", "no-cache");
If it doesn't work, try adding an additional parameter to your url, making it unique and therefore, not caching.
var url="query?option=person&userName="+person.innerHTML + "&d=" + new Date().getTime()
I really don't like this solution, but it helps you to know if the problem is related to cache.

Resources