</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> Update the question so it can be answered with facts and citations by <a href="/posts/19516200/edit">editing this post</a>.
</p>
<p class="mb0 mt6">Closed <span title="2014-03-07 05:40:36Z" class="relativetime">6 years ago</span>.</p>
</div>
</div>
</aside>
Regardless of what type of web application one could program, implementing AJAX would make the program - albeit arguably - more efficient and "prettier".
I am currently working on an online shop with a complete user interface which includes: order history, wishlist, referral links & more. We've come to the realization that by making many of the user operations executable in AJAX would be much user friendly rather than, for example, refreshing the page every time a user removes a product from the wishlist.
Following that logic would result in a massive amount of files in the, let's say, /ajax directory on the server and absurdly long .js files.
My question is this - is there a certain standard or "trick" when writing a lot of different ajax requests? Or better yet, is there an efficient way to write AJAX requests?
Regards,
</div>
Use jQuery.getJSON()
or jQuery.get()
to do the ajax calls. Well, finally both are translated to jQuery.ajax()
.
Create a JS file and include that file in all pages. In that JS file create a ajax function with 3 parameters.
Parameters Values of ajax function:
Call this function from any page, so you don't need to create ajax function in each and every page.
Hope it will help!
The trick is to keep your logic as stupid as possible and have a proper DTO. Now add one of the very powerful Javascript View framework into the mix and your basically done.
Imagine something like the following in the jQuery success callback (without a MVC framework, you populate the elements yourself):
success: function(data, textStatus, jqXHR) {
// data is the DTO as you defined it
$ele = $(data.target);
// and now update your target
$ele.html(data.content);
}
All you need is a generic function that makes all data requests
This function could have the arguments
Add a key &datafunc=somefunctionname
to the request string
On the server side
IF $_POST
contains the key datafunc
, run the respective php function which will return the required data
$fun=$_POST['datafunc'];
$fun();