Summary of several usages of js jquery ajax (and introduction to advantages and disadvantages)_javascript skills

This article is about my journey from not knowing what ajax is to becoming proficient in using ajax.

First, the most original way to use ajax

Copy the code The code is as follows:

Personal analysis: This method is pretty good , simple and flexible, but one disadvantage is that there are many redundant codes, which is not conducive to later maintenance.

2. Ajaxrequest encapsulated on the js side

This thing is a good choice for people who are accustomed to using JavaScript. It simply encapsulates the method mentioned above and makes unified calls. It feels good. There is quite a lot of code so I won’t post it. You can search for ajaxrequest on Google.

//There is this method in ajaxrequest.js. This method is an interface for the view side to call. There can be multiple interfaces. Add your own according to the situation.

Copy code The code is as follows:

function ajax_action_fun(url,fun) {
var ajax=new AJAXRequest;
ajax.get(
url,
function(obj){alert(obj.responseText);fun()}
);
}

//Call this interface in html
get_shop_son_list //It is the name of the method executed after the callback

ajax_action_fun("../ajax/shop_ajax.php?type=1",get_shop_list);

function get_shop_list(resValue){
//Here is the operation you want
}

Personal analysis: It makes up for it To overcome the shortcomings of the first method, call the interface uniformly and set up a callback function. The shortcomings, if any, are not in the ajaxrequest itself but in the javascript. Let’s give an example

javascript: If I want to call the ajax_action_fun method, I need to add something to the html

showshop

jquery: You can use it to separate js and html as much as possible, which is very helpful for later maintenance and will save a lot of time, for example, changing the entire site to html;

$(".showshop").bind("click", {url: "../ajax/shop_ajax.php?type=1", function:get_shop_list}, ajax_action_fun);
This way you don’t have to Write onclick event in html

Three, jquery ajax
1)

Copy code The code is as follows:

$.ajax({
type: "POST",
url: "test.php", //The called php file
data: "name=zhang",
success: function(msg){ //Callback function
alert( "Data Saved: " msg); //Here is the operation
}
});

2)
// Call the test.php file, pass a parameter, data is the returned data

Copy the code The code is as follows :

$.post("test.php", { name: "zhang"},
function(data){
alert("Data Loaded: " data);
});