Merge pull request #2526 from jlamim/user_guide

Page in the official documentation on ajax requests with iSAJAX() fixes #2454

Author: MGatner

user_guide_src/source/concepts/http.rst

@@ -97,6 +97,10 @@ is an object-oriented representation of the HTTP request. It provides everything
 The request class does a lot of work in the background for you, that you never need to worry about.
 The ``isAJAX()`` and ``isSecure()`` methods check several different methods to determine the correct answer.
 
+.. note:: The ``isAJAX()`` method depends on the ``X-Requested-With`` header, which in some cases is not sent by default in XHR requests via JavaScript (i.e. fetch). See the AJAX Requests </general/ajax> section on how to avoid this problem.
+
+::
+
 CodeIgniter also provides a :doc:`Response class </outgoing/response>` that is an object-oriented representation
 of the HTTP response. This gives you an easy and powerful way to construct your response to the client::
 

user_guide_src/source/general/ajax.rst

@@ -0,0 +1,44 @@
+##############
+AJAX Requests
+##############
+
+The ``IncomingRequest::isAJAX()`` method uses the ``X-Requested-With`` header to define whether the request is XHR or normal. However, the most recent JavaScript implementations (i.e. fetch) no longer send this header along with the request, thus the use of ``IncomingRequest::isAJAX()`` becomes less reliable, because without this header it is not possible to define whether the request is or not XHR.
+
+To get around this problem, the most efficient solution (so far) is to manually define the request header, forcing the information to be sent to the server, which will then be able to identify that the request is XHR.
+
+Here's how to force the ``X-Requested-With`` header to be sent in the Fetch API and other JavaScript libraries.
+
+Fetch API
+=========
+
+    fetch(url, {
+        method: "get",
+        headers: {
+            "Content-Type": "application/json",
+            "X-Requested-With": "XMLHttpRequest"
+    }
+
+
+jQuery
+======
+
+For libraries like jQuery for example, it is not necessary to make explicit the sending of this header, because according to the official documentation <https://api.jquery.com/jquery.ajax/> it is a standard header for all requests ``$.ajax()``. But if you still want to force the shipment to not take risks, just do it as follows:
+
+    $.ajax({
+        url: "your url",
+        headers: {'X-Requested-With': 'XMLHttpRequest'}
+    });  
+
+
+VueJS
+=====
+
+In VueJS you just need to add the following code to the ``created`` function, as long as you are using Axios for this type of request.
+
+    axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+
+React
+=====
+
+    axios.get("your url", {headers: {'Content-Type': 'application/json'}})

user_guide_src/source/incoming/incomingrequest.rst

@@ -71,6 +71,10 @@ be checked with the ``isAJAX()`` and ``isCLI()`` methods::
 		. . .
 	}
 
+.. note:: The ``isAJAX()`` method depends on the ``X-Requested-With`` header, which in some cases is not sent by default in XHR requests via JavaScript (i.e. fetch). See the AJAX Requests </general/ajax> section on how to avoid this problem.
+
+::
+
 You can check the HTTP method that this request represents with the ``method()`` method::
 
 	// Returns 'post'