jQuery - 初探ajax
Posted mz33
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery - 初探ajax相关的知识,希望对你有一定的参考价值。
在学习jQuery中AJAX的时候 , 看到文档中那么多参数 ,一眼望去还是有点吓人的 , 不过理解了用原生JS封装实现ajax , 就可以比较轻松的理解了
原生JS封装AJAX
<script> function ajax(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 = new XMLHttpRequest(); }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]() : ""; } } }
//合并对象函数 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地址 function toUrlData( obj , url , method){ if(isObject(obj) ){ var str = ""; for(var attr in obj){ str += "&" + attr + "=" + obj[attr] } str = str.slice(1); // 如果数据发送方式是POST,那么直接返回str就可以了; method = method || ""; if( method.toUpperCase() === "POST"){ return str; } url += "?" + str; return url; } return url; } //判断是不是对象 function isObject( 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的主要内容,如果未能解决你的问题,请参考以下文章