Getting started with ajax

Simple jQuery Example to Communicate with Server

Taken from jQuery.ajax API web site:

$.ajax({
    method: "POST",
    url: "some.php",
    data: {
        name: "John",
        location: "Boston"
    },
    success: function(msg) {
        alert("Data Saved: " + msg);
    },
    error: function(e) {
        alert("Error: " + e);
    }
});

This chunk of code, due to jQuery, is easy to read and to understand what’s going on.

  • $.ajax - this bit calls jQuery’s ajax functionality.

  • method: "POST" - this line here declares that we’re going to be using a POST method to communicate with the server. Read up on types of requests!

  • url - this variable declares where the request is going to be SENT to. You’re sending a request TO somewhere. That’s the idea.

  • data - pretty straight forward. This is the data you’re sending with your request.

  • success - this function here you write to decide what to do with the data you get back msg! as the example suggests, it’s currently just creating an alert with the msg that gets returned.

  • error - this function here you write to display error messages, or to provide actions to work when the ajax request went through errors.

  • an alternative to .done is

    success: function(result) {
        // do something
    });
    

Installation or Setup

What is AJAX?


AJAX stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files. -Mozilla Developer Network 2016

The easiest way of implementing AJAX, especially if you’re planning on communicating with servers is by using jQuery.

What is jQuery?


jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. -jquery.com

For those who haven’t used much jQuery, think of it as functions that we can use to make our lives easier. This is perfect for using with AJAX as it cuts down on the amount of code we have to write to accomplish the same thing!

How to Add jQuery to your web site

If you need to Use Ajax, you need to add jQuery to your project. http://jquery.com/download/ In This link you can see many ways to add jquery. You can use downloaded version of jQuery or you can use a CDN. http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn. But there is some security risk if you uses CDN. Becauese the project call out to use jquery, so a hacker could manipulate the call. So better if you could use downloaded version. Lets see how to add jquery to html project. It’s easy. First example is to use Downloaded source. Use this link to http://jquery.com/download/#jquery download. If you are just want to use jquery, I suggest you to download Download the compressed, production jQuery 3.1.1 When you download it add jquery-version.min.js to appropriate place (like javascript folder of your project) Then just add