AJAX in the learning jQuery in time to see the document so many parameters, still a little scary at first glance, but understanding the realization of ajax with native JS package, can be relatively easy to understand
Native JS package AJAX
<Script>
function Ajax (Options) {
// set the default parameter
var the _default = {
type : "GET",
url : "",
data : null ,
datatype : "text",
status : null,
success : function(){},
complete : function(){},
error : function(){}
}
// use the incoming data to overwrite the default data
Options = ASSIGN (the _default, Options);
// converts transmission data type lowercase
options.type = options.type.toLowerCase ();
// callback function pointed to which this binding;
IF (isObject (options.context)) {
var callback_list = [ "Success", "Complete", "error" ];
callback_list.forEach(function(item){
options[item] = options[item].bind(options.context)
})
}
var xhr = null;
if(typeof XMLHttpRequest === "function"){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// determine the type of the transmission data of
// the transmission of data is a type of get, put data spliced to the URL
IF (options.type === "GET" ) {
options.url = toUrlData(options.data , options.url , options.type)
}
// If the transmission data is a type of post, to put the spliced data Data
IF (options.type === "POST" ) {
options.data = toUrlData(options.data , options.url , options.type)
}
xhr.open (options.type.toUpperCase (), options.url, to true );
// determines whether post transfer mode, setting request header
options.type === "post" xhr.setRequestHeader ( " Content-type",? "the Application / the X--the WWW-form-urlencoded"): "" ;
// call the send method
xhr.send (options.type === "GET"? null : options.data);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
options.complete();
IF (/ ^ 2 \ {D} $ 2 / .test (xhr.status)) {
// transmitted data, if desired be converted into json is converted, it is returned need not
// if json error, we call the error function
the try {
var RES = options.datatype === "JSON"? the JSON.parse (xhr.responseText): xhr.responseText;
options.success(res);
}catch(e){
options.error(e, xhr.status)
}
}else{
options.error("error" , xhr.status)
}
}
// policy RECALL
IF (isObject (options.status)) {
typeof options.status [xhr.status] === "function" options.status [xhr.status] (): ""? ;
}
}
}
//合并对象函数
function assign(){
var target = arguments[0];
for(var i = 1 ; i < arguments.length ; i++ ){
for(var attr in arguments[i]){
target[attr] = arguments[i][attr];
}
}
return target
}
// URL address splicing
function toUrlData( obj , url , method){
if(isObject(obj) ){
var str = "";
for(var attr in obj){
str += "&" + attr + "=" + obj[attr]
}
str = str.slice (. 1 );
// if the data transmission mode is POST, then it directly back str;
Method Method || = "" ;
IF (method.toUpperCase () === "the POST" ) {
return str;
}
url += "?" + str;
return url;
}
return url;
}
// judge is not an object
function isObject( data ){
console.log(data.constructor)
return (typeof data === "object" && data !== null && data.constructor && data.constructor === Object)
}
// set the transmission parameters
var Options = {
url : "./data.php",
data : {
a : 2 ,
b : 4
},
type : "post",
success : function(res){
console.log(res , this)
},
error : function(res){
console.log ( "failure" , RES)
},
complete : function(res){
console.log("完成")
},
context : {ddd : 1},
status : {
404 : function(){
console.log ( "I can not find the page" )
},
200 : function(){
console.log ( "My status code is 200, very normal" );
}
}
}
// Call ajax
ajax(options)
</script>
After reading the above virgin implemented AJAX JS package, the following look jQuery ajax
The jQuery AJAX
There are three written in jQuery ajax
A writing: $ .getJSON $ .getScript easy to use but can be customized poor
$.getJSON("./06_data.php" , {data : "hello world"} , function(res){
console.log(res)
})
// default to request data back as JS execution
$.getScript("./06_data.js" , function(res){
console.log(res)
})
Written two: load $ .get $ .post: there is a certain degree of configurability
$ ( "header"). Load ( "./ 06_data.html", function () { // the operation of the elements must be placed inside the callback $ ( "header" ) .children (). CSS ({ color : "#f99" }) }) $.get("./06_data.php" , {data : "get请求"} , function(res){ console.log(res) } , "json")
Written three: $ ajax:. Any configuration can also support jsonp
$.ajax({ url : "./06_data.php" , data : {data : "hello world"}, dataType : "json", success : function(res){ console.log(res) } })
$.ajax("./06_data.php" , {
type : "get",
dataType : "html",
success : function(res){
console.log(res)
}
})
// Any configuration parameters
$.ajax({
url : "./07_data.php",
data : {a : 10 , b : 20},
type : "GET",
dataType : "json",
context : {name : "my context"},
status : {
404 : function(){
},
500 : function(){
}
}
});
After reading these, there is not found written in jQuery and JS three native package like it, read the native JS package, you can easily understand jq parameters used in ajax
Come on with it ~