How to write htaccess file which is not affect to ajax functions

[sashika_sur]

I have dynamic page which is loading and preview page from database retrieved values. I did this with successfully. I want to remove parameters from page url. Note that I only used one parameter in url.
My url is something like this. (with parameters)
http://ads/ad?this=daihatsu-boon-m700s-new-design-2016-nugegoda-2019-04-05-22-49-04
I tried to remove parameters from url, (it success) then my url look like this,
http://ads/ad/daihatsu-boon-m700s-new-design-2016-nugegoda-2019-04-05-22-49-04

To do that I added following codes to htaccess file,

RewriteEngine On
#RewriteCond %{SERVER_PORT} 80
ReWriteRule ^ad/([a-zA-Z0-9-/]+)$ ad.php?url=$1
ReWriteRule ^ad/([a-zA-Z0-9-/]+)/ ad.php?url=$1
Options +FollowSymLinks -MultiViews
# Turn mod_rewrite on
#RewriteEngine On
RewriteBase /

# To externally redirect /dir/foo.php to /dir/foo
RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.php [NC]
RewriteRule ^ %1 [R,L,NC]

## To internally redirect /dir/foo to /dir/foo.php
RewriteCond %{REQUEST_FILENAME}.php -f [NC]
RewriteRule ^ %{REQUEST_URI}.php [L]

Everything load properly inside page except ajax retrieving values. There are three ajax functions in my page which is loading some data to DIVs. Those are not working after I remove parameters from url using above rewrite rules.

For understanding I will add one of my ajax function below,

  function load_reviews(){
        var id = "<?php echo $ad->get_ad_id($unique_ad_url) ?>";
        $.ajax({
            url: './middle/review/load_reviews',
            cache:true,
            type: 'GET',
            async: false,
            data:{
                id: id
            },
            success: function(response){
                $('#chat_area').html(response);
            },
            error: function (x, e) {
                if (x.status == 0) {
                    console.log('You are offline!! -  Please Check Your Network.');
                } else if (x.status == 404) {
                    console.log('Requested URL not found.');
                } else if (x.status == 500) {
                    console.log('Internal Server Error.');
                } else if (e == 'parsererror') {
                    console.log('Error. - Parsing JSON Request failed.');
                } else if (e == 'timeout') {
                    console.log('Request Time out.');
                } else {
                    console.log('Unknown Error. - ' + x.responseText);
                }
            }
        });
        return false;

    }

Now when I open the page, inside those DIVs which are supposed to show data from database shows entire same page inside that DIV as small.

And another thing is when I check network responses from google chrome developer tools it shows infinite of files loading. (css, js, ajax responses) . Guys I need your assistence and I appreciate it .