A summary of several usages of JS jquery Ajax (and its advantages and disadvantages) _javascript skills

This article is a journey that I don't know what Ajax is to skillfully use Ajax.

One, the most primitive way to use Ajax

Copy Code code as follows:

<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 that is used by the view layer user to invoke the

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, which returns the data obtained from the invoked PHP file, back 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 very good, simple and flexible, but a little bad, that is, redundant code more, not conducive to the maintenance of the latter.

Second, JS-end Package Ajaxrequest

This is a good choice for people who are used to JavaScript, it is a simple encapsulation of the way it is said, and makes a unified call. Feel good, code quite a lot of not posted out, we can go to Google search ajaxrequest.

There's a method in the Ajaxrequest.js. This method is an interface that can be invoked by the view end, and the interface may have multiple, depending on the situation, add

Copy Code code as follows:

function Ajax_action_fun (url,fun) {
var ajax=new ajaxrequest;
Ajax.get (
Url
function (obj) {alert (obj.responsetext); Fun ()}
);
}

This interface is called inside 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) {
This is the operation you want.
}

Personal Analysis:It makes up for the lack of the first method, unified call interface, you can set the callback function, disadvantage if there is, not ajaxrequest itself but in JavaScript, for example.

javascript: If I want to call Ajax_action_fun this way I'm going to add something to the HTML

<a class= "Showshop" href= ' javascript: ' Onclick=ajax_action_fun (". /ajax/shop_ajax.php?type=1 ", get_shop_list);> Show Shop </a>

jquery: With it can be as far as possible to separate JS and HTML, which is very helpful for later maintenance, will save a lot of time, for example, the whole station for HTML;

$ (". Showshop"). Bind ("click", {URL: ...). /ajax/shop_ajax.php?type=1 ", function:get_shop_list}, Ajax_action_fun);
So you don't have to write the onclick event in HTML.

Three, jquery Ajax
1)

Copy Code code as follows:

$.ajax ({
Type: "POST",
URL: "test.php",//php file invoked
Data: "Name=zhang",
Success:function (msg) {//callback function
Alert ("Data Saved:" + msg); Here is the operation
}
});

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

Copy Code code as follows:

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