jQuery – 初探ajax

微信扫一扫,分享到朋友圈

jQuery – 初探ajax

  在学习jQuery中AJAX的时候 , 看到文档中那么多参数 ,一眼望去还是有点吓人的 , 不过理解了用原生JS封装实现ajax , 就可以比较轻松的理解了

原生JS封装AJAX

<script>
functionajax(options){//设置默认参数
var _default ={
type :"GET",
url :"",
data :null,
datatype :"text",
status :null,
success :function(){},
complete :function(){},
error :function(){}
}//用传入的数据对默认数据进行覆盖
options =assign(_default , options);//将传输的数据类型转换成小写
options.type =options.type.toLowerCase();//回调函数里面this指向的绑定;
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= newXMLHttpRequest();
}else{
xhr= new ActiveXObject("Microsoft.XMLHTTP");
}//判断传输数据的类型
//如果数据的传输类型是get , 则把数据拼接到URL上
if(options.type === "get"){
options.url=toUrlData(options.data , options.url , options.type)
}//如果数据的传输类型是post , 则把数据拼接到data上
if(options.type === "post"){
options.data=toUrlData(options.data , options.url , options.type)
}
xhr.open(options.type.toUpperCase() , options.url ,true);//判断是否post传送方式 , 设置请求头
options.type === "post" ? xhr.setRequestHeader("Content-type" , "application/x-www-form-urlencoded") :"";//调用send方法
xhr.send(options.type === "get" ? null: options.data);
xhr.onreadystatechange= function(){if(xhr.readyState === 4){
options.complete();if(/^2d{2}$/.test(xhr.status)){//传递数据 , 如果需要转换成json就转化 , 不需要则原样返回
//如果json报错 ,我们就调用错误函数
try{var res = options.datatype === "json" ?JSON.parse(xhr.responseText) : xhr.responseText;
options.success(res);
}catch(e){
options.error(e, xhr.status)
}
}else{
options.error("error", xhr.status)
}
}//策略模式调用
if(isObject(options.status)){typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";
}
}
}
  //合并对象函数functionassign(){var target = arguments[0];for(var i = 1 ; i < arguments.length ; i++){for(var attr inarguments[i]){ target[attr]=arguments[i][attr]; } }returntarget }   //拼接URL地址functiontoUrlData( obj , url , method){if(isObject(obj) ){var str = "";for(var attr inobj){ str+= "&" + attr + "=" +obj[attr] } str= str.slice(1);//如果数据发送方式是POST,那么直接返回str就可以了; method = method || "";if( method.toUpperCase() === "POST"){returnstr; } url+= "?" +str;returnurl; }returnurl; }   //判断是不是对象functionisObject( data ){ console.log(data.constructor)return (typeof data === "object" && data !== null && data.constructor && data.constructor ===Object) }
  //设置传递的参数var options ={ url :"./data.php", data : { a :2, b :4}, type :"post", success :function(res){ console.log(res ,this) }, error :function(res){ console.log("失败", res) }, complete :function(res){ console.log("完成") }, context : {ddd :1}, status : {404 : function(){ console.log("我找不到页面了") },200 : function(){ console.log("我的状态码是200,非常正常"); } } }
  //调用ajax ajax(options)</script>

   看完了上面用原生JS封装实现AJAX ,下面看看jQuery中的ajax

jQuery中的AJAX

jQuery中ajax有三种写法

写法一:$.getJSON $.getScript  容易使用但是可定制性差

 

 $.getJSON("./06_data.php" , {data : "hello world"} , function(res){
console.log(res)
})
  // 默认把请求回来的数据当成JS执行
$.getScript("./06_data.js" , function(res){
console.log(res)
})

 

写法二:load $.get $.post :存在一定的可配置能力

   $("header").load("./06_data.html" , function(){//对元素的操作一定要放在回调函数里面
$("header").children().css({
color :"#f99"})
})
$.get("./06_data.php" , {data : "get请求"} , function(res){
console.log(res)
} ,"json")

写法三 :$.ajax :可以随意配置 , 同时支持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)
        }
    })
 //随意配置 , 使用参数
    $.ajax({
        url : “./07_data.php”,
        data : {a : 10 , b : 20},
        type : “GET”,
        dataType : “json”,
        context : {name : “my context”},
        status : {
            404 : function(){

            },
            500 : function(){

            }
        }
    });

  看完这些 ,有没有发现jQuery中写法三的和原生封装的JS很像呢 , 看懂了原生JS的封装 , 就可以很轻易的理解jq中ajax的参数使用了

 

  一起加油吧~

 

 

 

 

 
 

 

jQuery – 初探ajax

原文地址:https://www.cnblogs.com/mz33/p/12650208.html

站在汇编角度深入了解 Swift(十三)

上一篇

如何实现抓取网站访客手机号的功能

下一篇

你也可能喜欢

jQuery – 初探ajax

长按储存图像,分享给朋友