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(/^2\d{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的参数使用了
一起加油吧~
