Posting data dynamically without refreshing the page - javascript

I just want to know how can I post data without refreshing the page for example, now Facebook when you post a comment it will be posted and shown to the people without refreshing the page. I do know how to insert data in MySQL without refreshing the page with AJAX but the question is: how to insert the data and get it at the same time without refreshing the page.
Thank You

OSDM's answer might seem accomplish the behavior you want but it isn't the one you're asking about. His answer would only provide updates when a user upload's something and not as they are created in the system (uploaded).
There are 2 different ways you can accomplish the fetching of new information in the server: AJAX and WebSockets.
AJAX - AJAX stands for Asynchronous Javascript and XML. It allows you to fetch content with a particular server behind the scene and then you can insert the newly fetched data into your page to display it to the user. This however has to be manually triggered and therefore doesn't really happen in real time. You could trigger the fetching of data either manually (e.g. with the press of a button), or on a timer (e.g. every 5 seconds, 10 minutes, etc). It is important to note that it is hard for the server to know what information the page is currently displaying and therefore each AJAX call usually request all of the information to be displayed and re-render the page (deletes the current content and inserts the newly fetched one which also includes content that was already being displayed).
WebSockets - WebSockets can be thought of as an 'upgraded' HTTP connection. The client and the server establish a connection and are free to send data in either direction. You can set up web sockets between your server and the website (client) such that whenever new content is inserted into the MySQL database the server relays the new content to the client. Much like AJAX, you would interpret the new information and add it to the page. The upside of using web sockets is that information is being fed to you in-real time as the server receives it. This means that you only need to fetch data in bulk when you first load the site and updates are pushed to you as they occur. You do not need to rely on a timer or manual input to fetch data as you're being fed data and not fetching it.
Facebook, for example, doesn't rely on a timer or you fetching new data (although that certainly happens if you refresh the page) but each client is listening to the server for new information through web sockets.

That is all javascript (or jquery). You allready know how to send the data to your server. Now all you need to do is modify the html with javascript.
For example(jquery):
$("#submit").click(function(){
$("#comments").append("<div class=newcomment>"+$("#textbox").val()+"</div>");
$.POST('upload.php',{comments:$("#textbox").val()});
});
Now the comment is send to the upload.php and the comment is added to the comment section of your page.
If you need data from the server also to be included, just add some javascript to upload.php file and do something like this: $("#getdatefromserver").load('upload.php',{comments:$("#textbox").val()}); Now the javascript from upload.php will run in the page.
And no page refresh is done.

Related

Handling database operations with .net core mvc get request

I have a controller like the image below. This controller hides the relevant record in the database when the fetch request is sent. Do I need to use http post for such operations in this project that I wrote with Entity framework core? The problem with this controller is that the admin executes the javascript code fetch(https://localhost:5001/admin/deletepost?delete=url) on any page. As soon as this get query runs, the relevant record is hidden or deleted from the database. Is it safe as it is? How can I make it more secure? Thank you very much to everyone who replied.
Although this method is only accessible to the admin, will the deletion of the record as a result of the admin sending this request cause a deficit?
For several reasons, POST is more secure than GET.
GET parameters are passed through the URL. This means that the parameters are stored in the server log and browser history. When using GET, you can also easily change the data submitted to the server because it is in the address bar.
The problem when comparing the security between the two is that POST may block temporary users, but it cannot block malicious users. It is very easy to forge a POST request and should not be fully trusted.
The biggest security problem of GET is not the end user's maliciousness, but the third party sending a link to the end user.
Another point is that you must consider where to use GET and POST, because GET should only be used for operations that do not change database information, and only request or read information and POST data should be used when the data will be changed.
Some web scanners will automatically click on each link (usually a GET request) instead of in a button or form (usually a POSTS request) to avoid changing the database, but for example, if you perform a delete operation after the link, you The risk of clicking on the link may be easier with more automated tools.

How do you archieve to fully separate HTML/JS from PHP?

I've been working and programming for a lot of time, but this simple yet a bit complicated question is always in my mind... this will be about core and plain PHP.
I want to know how can I archieve having just HTML/js files interacting with the server without changing the extension from .html to .php as effective as possible using just the necessary requests.
for example:
I have this website that has a login page:
the user types his username and passwork and its sent using AJAX to auth.php
auth.php do its thing then creates a $_SESSION if valid
the user gets redirected to dashboard.html
Now, how do I get in every reload the current user in the frontend? I can get it in the backend just calling for example $_SESSION["username"] for the purpose of having "welcome [the current username]".
The only solution I've got is to do in every redirect/refresh a AJAX request to ask for that (the request is sent to the PHP script and it echoes the session username for example) but I think this would get very heavy for the server.
what are your thoughts?

How can I rebuild an AJAX Request in Java?

First of all: I don't know anything about AJAX or similar. Please keep that in mind.
Question is above. I am trying to parse information from a website (http://www.sportstats.com/soccer/germany/bundesliga/). More specific: I want to parse the information which is held by the <table id="nextMatches_0">. I found out that this is not possible with the Library I used until now: Jsoup, because the website gets the information from outside. Until now I think that it's AJAX which is fillig in the table.
Though I didn't find a way to parse the information I want, it would be great to just make the same thing the website does and send a request to the server. But I don't have a clue how I could do this, which is why I am asking for help.
Big thanks already :)
It sounds like you're trying to reverse engineer how some data gets into a web page so you can figure out how you can get that same data from your Javas app. So far, you've concluded that the data itself is not in the HTML so your guess is that some script in the web page is putting the data into the page via an Ajax call.
First off, to confirm whether that is the case, you can do two things:
Bring up that page in the web browser and do View/Source. Examine the original HTML of the page and see if the content you want is in there. If it is, then you can just do a direct request from the server to get that page, parse the HTML and then grab your content. If the content you want is not in the original HTML of the page, then go to step 2.
Open the Chrome debugger. Switch to the network tab. Then, load your page into the browser. Examine the requests in the network tab and find all the request that list their "type" as "xhr". These will be the ajax requests from that page. I see at least 3 xhr requests in that page. Then examine each xhr request to see if it is the one requesting and receiving the specific data you are interested in. If you find it, then you can study how the request is formed to see if you can send that same request to the same source from your Java app.
If, in the first step you find the data is actually in the HTML, then you can just request that link from your Java, get the HTML, put it into an HTML parser and then find the content you want in the parsed page.
If, in the second step, you conclude there is an Ajax call that is fetching the data you want, then you need to see how the request is formed and what host it is sent to and copy that type of request from your Java app to see if you can obtain the same data. I see that page contains a couple Ajax calls that are fetching JSON. If one of those is what you want, then you would parse the JSON in your Java app so you could then access the data from your Java code.
Oh, and I'd suggest reading the licensing information on the site to see what you are actually allowed to do with someone else's content or Ajax calls.

send response to different client on model update

I have a simple but unusual problem.
I have a client page making requests to a RESTful API. So the client PUTs, no big deal. A form sends JSON to the API, and from there it is stored in the server database.
However, I have a separate page that is supposed to give me a current status from the database, say, a count of rows. I need the count to be updated every time a new row is created. The current solution is to send a GET request every 5 seconds or so, which is obviously not ideal. I don't want to query the database if there is no row created yet.
So I need a trigger on every row create. This seems trivial to implement in app/api/Controllers/AppController.js. However, in this file I have a reference to the PUTting client, not the GETting one. How can I reference the GETting client there?
It sounds like you're referring to a push service, which would need to be implemented server-side.
If the putting and status update page are supposed to be part of the same session you could store a cookie when storing data. Then the status page could poll the cookie so it knows when to make a new AJAX request. You'd still have client-side constant polling, but since the cookie keeps track of if you need to update or not it'd mean a lot less network calls.
But that would only work if this is supposed to be part of the same session. Otherwise you'd need either constant AJAX polling or some sort of push service.

How to send data to an already open website

I'm a total noob to website development and I'm trying to send data by a HTTP POST to an already opened website, let me explain:
I have a website, that it's being called from another website (that I'm not developing) into a new window, my website performs a query and gets the data that has to be sent back. I need to know if my website can send the data to the already open website that called mine, or do I have to send the data to a new window. Thanks guys.
There really isn't a way to send data to an open web page unless you've specifically designed the system to accept messages from the server. Normally web pages poll the server, asking for information back.
If you really need to push data to a page APE can do this very successfully, but the settup can be daunting and there's alot of work required to wire up the server and web page so they can talk.

Categories

Resources