What is Ajax? Ajax interaction Model?

The full name of Ajax is asynchronous JavaScript and XML (asynchronously loading JavaScript and XML).

Ajax is not a new programming language, but a new method of using existing standards. Ajax is the art of exchanging data with a server and updating parts of a Web page without reloading the entire page.

Ajax is a technique that can update parts of a Web page without reloading the entire page.

Ajax is a technique for creating fast, Dynamic Web pages. A small amount of data exchange with the server in the background. Ajax makes it possible for Web pages to be updated asynchronously. This means that you can update a part of a webpage without reloading the entire page. While traditional Web pages (without Ajax) need to be updated, the entire page face must be overloaded.

Here are the following: encapsulation of Ajax

function Myajax (type,url,params,datatype,isasync,callback) {
var xhr = null;
if (window. XMLHttpRequest) {
XHR = new XMLHttpRequest ();
} else {
//compatible with IE 6
XHR = new ActiveXObject (' microsoft.xmlhttp ');
}
if (type = = ' Get ') {//get method does not necessarily follow arguments
if (params) {
URL + = '? ' + params;
}
Xhr.open (type, URL, isasync);
Xhr.send (NULL);
} else if (type = = ' Post ') {
Xhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');
Xhr.open (type, URL, isasync);
Xhr.send (params);
}
if (IsAsync) {
Xhr.onreadystatechange = function () {
if (xhr.readystate = = 4 && xhr.status = = 200) {
if (xhr.responsexml) {
var result=xhr.responsexml;
}else if (xhr.responsetext) {
var Result=xhr.responsetext;
// }
var result = null;
if (DataType = = ' json ') {
var Result=xhr.responsetext;
Result=json.parse (result);
var result = Json.parse (Xhr.responsetext);
} else if (DataType = = ' xml ') {
var result = Xhr.responsexml;
} else {
var result = Xhr.responsetext;
}
Callback && callback (result);
}
}
} else {
if (xhr.readystate = = 4 && xhr.status = = 200) {
if (xhr.responsexml) {
var result=xhr.responsexml;
}else if (xhr.responsetext) {
var Result=xhr.responsetext;
// }
var result = null;
if (DataType = = ' json ') {
var Result=xhr.responsetext;
Result=json.parse (result);
var result = Json.parse (Xhr.responsetext);
} else if (DataType = = ' xml ') {
var result = Xhr.responsexml;
} else {
var result = Xhr.responsetext;
}
Callback && callback (result);
}
}

}

Two-time package parameters become objects
function myAjax2 (option) {
var defaults={//defines a default value to overwrite with the value called by obj
Type: ' Get ',
URL: ' # ',
DataType: ' JSON ',
data:{},//parameter because the parameter is not necessarily a pair so the time to initialize with an empty object
Async:true,
Success:function (Result) {
Console.log (result);
}

}

for (var key in option) {//overwrite the above amount
Defaults[key]=option[key];
}

var xhr=null;
if (window. XMLHttpRequest) {
Xhr=new XMLHttpRequest ();
}else {
Xhr=new ActiveXObject ("Microsoft.XMLHTTP");
}
var params= ';
for (Var attr in Defaults.data) {
params+=attr+ ' = ' +defaults.data[attr]+ ' & ';
}
if (params) {
Params=params.substring (0,params.length-1);
}

if (defaults.type== "get") {
defaults.url+= '? ' +params;
}
Xhr.open (Defaults.type,defaults.url,defaults.async);
if (defaults.type== "get") {
Xhr.send (NULL)
}else if (defaults.type== ' post ') {
Xhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');
Xhr.send (params);
}
if (Defaults.async) {
Xhr.onreadystatechange=function () {
if (xhr.readystate==4&&xhr.status==200) {
if (defaults.datatype== ' json ') {
var result=json.parse (Xhr.responsetext);
}else if (defaults.datatype== ' xml ') {
var result=xhr.responsexml;
}else {
var Result=xhr.responsetext;
}
Defaults.success (result);
}
}
}else {
if (xhr.readystate = = 4) {
if (Xhr.status = = 200) {
var result = null;
if (Defaults.datatype = = "json") {
result = Xhr.responsetext;
result = Json.parse (result);
} else if (Defaults.datatype = = "xml") {
result = Xhr.responsexml;
} else {
result = Xhr.responsetext;
}
Defaults.success (result);

}
}
}


}

Ajax encapsulation in jquery (most commonly used)
$.ajax ({
Url:url,
Type:type,
data:{
Uname:username
// },
Async:true,
DataType: ' JSON ',
Success:function (Result) {
// // ......
// }
// })

$.get () $.post ()
var params= .....

$.get (url+ '? ') +params,function (Result) {
// 。。。。。
// })
$.post (Url,{xx:xx},function () {

// })

Ajax interaction Model: The following

What is Ajax? Ajax interaction Model?