Several USES of js jquery ajax are summarized and advantages and disadvantages are introduced

This article is a journey from not knowing what ajax is to mastering ajax.

One, the most primitive way to use ajax

<SCRIPT language=javascript>
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//Defines an ajax entry function to be called by the view layer user
function show_type(type_id) {
// alert(id);
createXMLHttpRequest();
var url = "../ajax/shop_type_status.php?id="+type_id+"&time="+Math.random();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function(){ show_back();}
xmlHttp.send(null);
}
//The callback function returns the data from the invoked PHP file to the user
function show_back() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//document.getElementById('cat_id').value = id;
document.getElementById('type_status').innerHTML = xmlHttp.responseText;
}
}
}
</SCRIPT>

Personal analysis: this method is good, simple and flexible, but there is a disadvantage, is more redundant code, not conducive to later maintenance.

Second, js end of the packaging of ajaxrequest

This thing, which is a good choice for people who are used to javascript, simply encapsulates the method described above and makes a unified call. It feels good. I'm not going to post it because I have a lot of code, so I'm going to Google ajaxrequest.

// ajaxrequester. js has a method called this method is for the view side to call the interface, the interface can have more than one, depending on the situation

function ajax_action_fun(url,fun) {
var ajax=new AJAXRequest;
ajax.get(
url,
function(obj){alert(obj.responseText);fun()}
);
}
//The interface is called in HTML
get_shop_son_list   //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's what you want
}

Personal analysis: It makes up for the shortcomings of the first method, which is to unify the calling interface and set the callback function, but the disadvantages, if any, are not in the ajaxrequest itself but in the javascript, for example

Javascript: if I want to call the ajax_action_fun method I need to add something to the HTML

< A class = "showshop" href = "javascript: onclick = ajax_action_fun (".. / ajax/shop_ajax. PHP? Type = 1 ", get_shop_list); > According to shop < / a>

Jquery: it can be used to separate js and HTML as far as possible, which is very helpful for later maintenance, will save a lot of time, for example, the whole site for HTML;

$(". Showshop "). The bind (" click ", {url: ".. / ajax/shop_ajax. PHP? Type = 1 ", the function: get_shop_list}, ajax_action_fun);
So you don't have to write the onclick event in HTML

Third, ajax of jquery
1)

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

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

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