How to use Web worker with AJAX - ajax

Is there is any way to call ajax function in web worker.Actually i am directly using ajax function to get the response but data is too much heavy,due to that my window is going to be freeze until the response will come.To overcome this problem now i am using web worker.The data(JSON) is dynamic.So can you please tell me how to call ajax function so that i can use it in my application.Here i am attaching web-worker code.
//Worker.js File
var myCallback = function(data){
self.postMessage(JSON.stringify(data));
};
self.addEventListener('message', function(e) {
importScripts('json.js?callback=myCallback');
}, false);
//JOSN.js File
function getResult(){
var randomNum = (Math.floor(Math.random() * 5) + 1),
cacheBuster = (Math.floor(Math.random() * 10000) + 1);
$.ajax({url:'http://examples.kevinchisholm.com/utils/json/jsonp.php?callback=myCallback&cacheBuster=' + cacheBuster + '&sleep=' + randomNum,
type:'POST',cache:false,data:datas,dataType:"json",async:false,
success:function(xmlResponse){
return xmlResponse;
}});
}
getResult();

Yes you can definitely use ajax in web worker by simply using XML Http Request or fetch API and can post the message using postmessage by using my code hope it helps:->
#Declaring Worker
var worker= new Worker("ajax123.js");
worker.onmessage=function(data){
document.body.innerHTML=data.data;
}
#Web Worker Code
fetch(filename)
.then(response => { return response.text(); })
.then(data => { self.postMessage(data) });

Related

Laravel API call form validation not working

I'm working with Laravel API and calling an API method in two different way. In one-way form validation working but in second-way form validation not working. But I really need second-way of API call.
saveMember: function () {
let that = this;
let formData = new FormData();
formData.append('member_info', that.member_info);
// member_info is a Json Object
// This is First way , form validation working good while calling Api
axios.post('/api/member/save_member', that.member_info)
// This is second way, form validation not working
axios.post('/api/member/save_member', that.formData)
.then(function (response) {
console.log("response Here: " + response.data.success);
that.errors = response.data.success;
// location.reload(true);
})
.catch(function (error) {
that.errors = error.response.data.errors;
console.log("Error Here: " + error.response.data);
});
}
Doing form validation in Laravel Request Controller.
Look like Json Object can send to API.
I missing your error when request call to fixed.
But i think you need convert FormData to Json Object:
var obj = {};
that.formData.forEach(function(val, idx){
obj[idx] = val;
});
var json = JSON.stringify(obj);
and then resend:
axios.post('/api/member/save_member', json)
...

How to get each http body updates on angular Http request?

I'm using an express api (my back-end) and an angular app (my front-end).
One express js end point (let's call it '/foo') is processing a lot of files,
i send data using res.write() after each treatment so the http response body is update.
I would like to get this update on my angular app.
I was using ajax in a previous version and it worked fine with ajax call :
xhrFields: {
// Getting on progress streaming response
onprogress: function(e)
{
var progressResponse;
var response = e.currentTarget.response;
if(lastResponseLength === false)
{
progressResponse = response;
lastResponseLength = response.length;
}
else
{
progressResponse = response.substring(lastResponseLength);
lastResponseLength = response.length;
}
actualResponse += progressResponse
}
Unfortunatly i found nothing to get partial http body. I tried to use 'reportProgress' Parameter but it's not working.
For some more context my front-end angular code:
service.ts :
setHolidaysDirectory(holidaysKey: string, path: string): Observable<Object>{
const setHolidayDirectoryStreamHttpRequest =
new HttpRequest('POST', 'http://localhost:8089/holidays/pictures/edit', { 'key': holidaysKey,
'path': path
}, {headers: this._httpHeaders, reportProgress: true, responseType: 'text'});
// pipe stream answer
return this._http.request(setHolidayDirectoryStreamHttpRequest);
}
and my component just call the service and subscribe :
this._holidaysService
.setHolidaysDirectory(key, finalHolidaysForm.path)
.subscribe((stream) => {
console.log('new answer');
console.log(stream);
}, error => console.log(error));
But unfortunatly i got empty answer and all the http body is recovered after res.end() (server side)
Can anyone help pls !
Thank a lot !

Cannot submit form with supertest and mocha

I am using supertest and mocha to test a nodejs application. One of the things users can do is to submit a very simple form, which is picked up by the node server and parsed using formidable.
Here is the mocha test code:
var should = require('should'),
express = require('express'),
app = require('../app.js'),
request = require('supertest'),
csrfToken,
sessionId,
cookies = [];
describe('Post Handler', function(){
it('Uploads new post', function(done){
var req = request(app).post('/post?_csrf=' + csrfToken);
req.cookies = cookies;
req
.type('form')
.send({fieldTitle: 'autopost'})
.send({fieldContent: 'autocontent'})
.send({contentType: 'image/png'})
.send({blobId: 'icon_23943.png'})
.expect(200)
.end(function(error, res){
console.log('here');
done();
});
});
csrfToken retrieves a csrf token from the server, since I am using the csurf module and every POST method requires a csrf token. cookies stores the session cookie that is provided by the node server so I can persist the session between requests.
The form is processed by the following code:
//Takes HTTP form posted by client and creates a new post in the Db
exports.postPostUpload = function (req, res) {
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
console.log(err);
if (err) res.redirect(303, '/error');
else {
var new_post = new post_model.Post().createNewPost(fields);
new_post.setUserId(req.session.passport.user.userId);
new_post.uploadPostToDb(function (error, result) {
if (error) return res.status(500).end();
else {
if (new_post.media.contentType.indexOf('video') !== -1) {
addMessageToEncodingQueue(new_post, function (error, result, response) {
if (error) {
errorHelper.reportError({
stack: new Error().stack,
error: error
});
res.status(500).end();
}
else res.status(200).send(new_post.cuid);
});
}
else return res.status(200).send(new_post.cuid);
}
});
}
});
}
My current problem is, that once the form handler executes the line form.parse(req, function (err, fields, files) {, nothing happens. Formidable does not return error, it just does not return anything. Consequently, the mocha test never receives a reply from the server, and eventually the socket hangs and the test crashes. Needless to say, the form is successfully submit if you do it manually via the website.
There must be an error in the way supertest/mocha are executing this test, but I have not been able to find it. Any pointers are highly appreciated.

Wait for node.js callback to be completed before ending AJAX request

I am using jQuery on the front to make an AJAX post request using $.post(). I also pass a success function which will do something with the data returned. On my node.js server, I am using express to handle requests, the post request calls another function passing a callback which in the callback does a res.send(). How can I get the request not to finish until the callback is done?
My client-side code is:
$.post("/newgroup/", {name: newgroupname}, function(data) {
console.log(data); // Returns undefined because requests ends before res.send
});
My server-side code is:
app.post('/newgroup/', function(req, res){
insertDocument({name:req.body.name, photos:[]}, db.groups, function(doc){
res.send(doc);
});
});
The insertDocument function is:
function insertDocument(doc, targetCollection, callback) {
var cursor = targetCollection.find( {}, {_id: 1}).sort({_id: -1}).limit(1);
cursor.toArray(function(err, docs){
if (docs == false){
var seq = 1;
}
else {
var seq = docs[0]._id + 1;
}
doc._id = seq;
targetCollection.insert(doc);
callback(doc);
});
}
If the code you've shown us is the real code then the only possibility is that the thing you are returning doc is actually undefined. The callback on the client will not fire before res.send() is triggered.
Are you sure that the callback in insertDocument is exactly as you think? Often callbacks are of the form function(err,doc), i.e. try this:
app.post('/newgroup/', function(req, res){
insertDocument({name:req.body.name, photos:[]}, db.groups, function(err, doc){
res.send(doc);
});
});
Okay I found the answer, I am not sure why this works, I just had to change the name of the variable I was sending to the callback, I assume this is because it had the same name as a parameter, so I changed my insertDocument function to look like this
function insertDocument(doc, targetCollection, callback) {
var cursor = targetCollection.find( {}, {_id: 1}).sort({_id: -1}).limit(1);
cursor.toArray(function(err, docs){
if (docs == false){
var seq = 1;
}
else {
var seq = docs[0]._id + 1;
}
doc._id = seq;
targetCollection.insert(doc);
var new_document = doc;
callback(new_document);
});
}
Could it be a sync/async issue? I don't know what library you are using for your saves, but is it a case were the call should be something more like this?
targetCollection.insert(doc, function(err, saveddoc) {
if (err) console.log(err);
callback(saveddoc);
});

prototype javascript ajax request runs back end perl script but continues to return 500

Newbie to this - This code is works - in that the call to the script does what it is supposed to but returns the condition 500 and I can not see why. I am looking for any suggestions or changes that I should be making to make this work.
Thanks to all who respond.
function get_update_odometer(vehicle_key,odometer_value){
var url = "[%Catalyst.uri_for('/invoice/dispatch_util/get_update_odometer')%]";
new Ajax.Request(url, {
method: 'get',
parameters: {
key: vehicle_key,
ovalue: odometer_value
},
asynchronous:false,
onSuccess: successFunc,
onFailure: failureFunc
});
var return_v = $('rcontainer').innerHTML;
document.getElementById('odometer').value = return_v;
return true;
}
function successFunc(response){
if (200 == response.status){
var container = $('rcontainer');
var content = response.responseText;
container.update(content);
}
}
function failureFunc(response){
alert("Call has failed " + response.status );
}
Error code is coming from server side, and you provided the client part.
So have a look if your server script get_update_odometer is working, is callable by your web server and etc ...

Resources