Develop Reference

php or javascript which should I use

What would be the best way to go about this should I use php & mysql? so confused on where to start, still learning php, javascript

You will need a combination of (probably) all 3:
Javascript and HTML
Responsible for managing the user interface
Allows user to send a request to the server. Request can be "I want to challenge B" or "I will accept/deny challenge from A"
Allows user to ask for update from the server, and shows server messages to the user such as "A has challenged you" or "B has accepted/denied your challenge"
Must have access only to public information; no info you want to hide from the user (such as other users' emails or links to other challenges) should be visible to Javascript/HTML
PHP
Responsible for handling users' requests and returning responses or sending updates
Manages registrations, account changes, payments, account deletions etc...
Interacts with the database (eg: MySQL) to store or retrieve data
Generates challenge links
Tracks users' performance
Handles all the business logic and private data: how users get ranked, how users performed in challenges, did user enter correct password,...
MySQL
Responsible for storing user data and challenge data
Returns results to PHP when scripts ask for data
Updates stored data at PHP's command (eg: update users' rankings)

you can use javascript or PHP it does not matter.Only thing you got to remember is if you want to save details to Database like mysql then you got to send details to PHP.
You can use javascript to make the client side checks and send the finalized details to PHP for further processing. This reduces the server side processing.
You can do the HTML form check in PHP also if you do not want to use javascript.

If you are a beginner go with PHP you can easily find solution related to MySql/PHP on the web.
Thanks

depending on the needs for example i will use both javascript and php for validation of the form because
javascript will work faster but its code can be changed
php is slow but its code is hidden and cannot be changed

Posting data dynamically without refreshing the page

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.

How to log in remotely with AJAX?

I'm making a google-chrome-extension for a certain website, and want the browser_action to display the number of notifications a user has received on said website.
Currently, I am using an ajax request to retrieve the HTML from the website/messages page, and then I am using jQuery to count the number of "#unread > li" elements in that HTML (each one representing a new message.)
Now, I take this number and display it on the browser_action icon.
All works perfectly, the correct amount of messages are notified, BUT the user must be logged in on the site (not my site) for it to work properly, otherwise they will think that they have no messages.
I was thinking that I could detect if the user is logged in, and if not display a red ! exclamation mark on the icon. Then, when the user clicks to show the pop-up, it asks them to log in.
However, I have no idea how to actually log the user in to the website using this method: how do I send the credentials across? Or does the website have to support a request like this?
TL;DR
How can I log a user into a website I don't own remotely?

Disclaimer: I've never done a google chrome extension, but based on the rest of your question, it sounds like it's just working with JavaScript like any other web page, so I'll go ahead and answer it.
In any case, working with cookies in JavaScript can be somewhat of a pain:
https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
http://www.perlscriptsjavascripts.com/js/cookies.html
I'm assuming that your server side already works with and expects cookies, so I won't try to suggest any alternatives. That being the case, your server is what needs to validate the cookie, so, IMHO, might as well set the cookie on the server side. If the server handles it, on the JS side, you simply post the username/password to a server-side page, e.g.
$.post("/user/login",{"Username":"foo","Password":"bar"},callback);
That server-side page validates the username/password and then, if successful, generates the cookie and sends a response back to the JavaScript (e.g. {"IsSuccess":true}). Upon receiving a successful response rather than an error, you just start calling the other web services to retrieve your data assuming you are logged in and build out the page.
Assuming that your web services will return HTTP error codes that help you determine a problem with the session, if you get a 401 error code, you take the user back to the login page. If you get a 403 error code, you let the user know they can't access that data...etc., all depending on your app.
Ultimately, JavaScript doesn't know whether a user is actually logged in, so you have to rely on the server to send you information in a way that is understandable so that you can direct/prompt the user as necessary.
[Edit: 2014-11-21]
You didn't answer my other question: what do you get back? If they don't set the cookie themselves at the login, then you need to get back the session token from the response they send...if they don't send you a session ID, you're SOL. If they do send you an session token/session ID, then you need to know what to name it (e.g. PHP uses something like PHPSESSID as the cookie name, but it can be whatever the coders of that domain decided on). Beyond that, you have to be able to set the cookie for THAT domain name (3rd party cookie). This may have mixed results depending on the user's settings--if they block 3rd party cookies--however, since this is a google extension and not a website, maybe it's able to bypass that kind of restriction. I know that FireFox's developer toolbar is able to manipulate cookies for all domains, so it would be a reasonable assumption you would be able to as well.

Passing variables between ASP MVC pages without sending it to server

I am creating a website with ASP.NET MVC 4. The application consists of two pages, whose workflow is similar to Google Maps. On the first page, the user types in a patient's name, date of birth, and some basic data about that patient. Then the user submits the form, and is brought to the second page in the application. The second page is just a print preview that the user can print. I want the user to be able to navigate between the two pages using the browser's back and forward buttons (for example, to change inputs on the first page after seeing the second page)
Actually calculating the data that appears on the printout is very complicated, and I really want to have all that code be executed server-side, where I can use C#. So I need to send the patient's data to the server. The problem is that I don't have an SSL certificate, and I don't want to send a patient's name with their data over HTTP (as this is a violation of privacy). I am willing to send the patient's data over HTTP, as long as it remains detached from the patient's identity (except for at the client). The name and date of birth are simply displayed in the corner of the printout, and do not affect the server-side calculations in the least.
I can think of two possible ways to accomplish this task. The first, more preferred solution, would be a way to send only some of the form data over HTTP, yet still somehow get the name and date of birth from the first page in client-side jquery running on the second page. Maybe I can make a cookie and somehow specify not to send it as part of the http request?
The other way to accomplish this is to make the entire application into a single page, and dynamically change the contents via client-side jquery. In this solution, when the user submits the form, I can fire off an ajax request that will return JSON. I can then populate the print preview with data returned from the server (i.e. the JSON) as well as from the form (i.e. the patient's name and date of birth). Is there a way to accomplish this while still allowing the user to use the browser's back and forward commands to navigate between the data input page and the print preview page if they are in fact the same page?

I don't believe what you described is possibly without severe drawbacks. Sure, you could roll up the data into a cookie or local storage and avoid the POST--but this is a lot of logic in your view, and a pretty nasty hack.
The options I would advise are:
Get an SSL cert. If that's the driving force behind your approach then spend the $6 to get one. Seriously.
Keep the print view in the same page as the form; use css #media types to specify the print styles.

Sniff 3rd Party Page, Check/Insert Data using ASP.NET into Database and Then Display Results

I have been tasked with reading information from a table on a 3rd party page. The website will have multiple pages and thus will have to have the bookmarklet run on it once per page. I currently have the bookmarketlet pulling the data, and putting it into a pipe delimited array. I would like to send this pipe delimited array to a server side function that, in case of injection, sanitizes the data and then checks if it exists in a temp table, if it doesn't exist the the table, then insert.
After all of that is said and done, the script will send information about what happened during the server side scripting and the results will be presented to the user on the web page where the bookmarklet was executed.
I have looked into JSON, AJAX, and JavaScript as possible solutions to submit and work with data(Which I quickly detoured away from).
I am limited to using Microsoft solutions because of the environment I am working in.
So my question is, what would be best and how would I go about this? I have been unable to understand or execute any of these solutions.
What would be be most efficient way to post data to a database and get a response in a Microsoft environment using a bookmarklet on a 3rd party page, and get a response that the user sees?