Comparison and analysis of js and jquery ajax

Source: Internet
Author: User


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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.