Comparison and analysis of js and jquery ajax

In this blog, I don't know what ajax is like.

I. 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, which can be called by users at the view layer.
 
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 );
} 
 
// Callback function, which returns the data obtained from the called 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 it is not good, that is, there are many redundant code, which is not conducive to later maintenance.

2. js-encapsulated ajaxrequest

This is a good choice for those who are used to using javascript. It encapsulates the method mentioned above and makes unified calls. I feel good. I don't need to post many codes. You can search for ajaxrequest on google.
// Ajaxrequest. js contains this method. This method is an interface called by the view end. You can add multiple interfaces as needed.

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 // method name executed after 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 the shortcomings of the first method. You can call the interface in a unified way and set the callback function. If there is a defect, it is not in ajaxrequest itself but in javascript. For example
Javascript: If I want to call the ajax_action_fun method, I want to add something to html.
<A class = "showshop" href = 'javascript: 'onclick = ajax_action_fun ("../ajax/shop_ajax.php? Type = 1 ", get_shop_list);> Display Store </a>
Jquery: it can be used to separate JavaScript and html as much as possible, which is very helpful for later maintenance and will save a lot of time, for example, changing the site to html;
$ (". Showshop"). bind ("click", {url: "../ajax/shop_ajax.php? Type = 1 ", function: get_shop_list}, ajax_action_fun );

In this way, you do not need to write the onclick event in html.

III. ajax of jquery

1)

$. Ajax ({
Type: "POST ",
Url: "test. php", // php file called
Data: "name = zhang ",
Success: function (msg) {// callback function
Alert ("Data Saved:" + msg); // Here is the operation
   } 
});

2)

// Call the test. Php file and pass a parameter. data is the returned data.

View copy print?
$. Post ("test. php", {name: "zhang "},
Function (data ){
Alert ("Data Loaded:" + data );
});

Now I basically use jquery, haha