对理解ajax第三个回调函数的封装和 null设置少传的那个参数默认

最新推荐文章于 2023-03-27 17:29:03 发布

imyiligege

最新推荐文章于 2023-03-27 17:29:03 发布

阅读量761

点赞数

分类专栏： javascript 文章标签： javascript ajax

本文链接：https://blog.csdn.net/imyiligege/article/details/44893337

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

</script>

之前看视频对ajax封装回调函数总不太理解，知道上边例子跑通就理解了一个函数作为参数，其实函数后边再加括号里边传入参数也可以运行，像这样自调用匿名函数

还有可以利用null设置少传的那个参数默认是什么

<script>
a=function(msg,a,b,c){
if (c == null) {
c = 9;
}

alert( msg+a+b+c);
};
a(1,2,3,4);
a(1,2,3)
</script>
(function() {
 
       //获取dom元素
       var$ = function(id) {
              returndocument.getElementById(id);
       };
 
       //返回对应的Ajax对象 做兼容性处理
       $.init= function() {
              try{
                     returnnew XMLHttpRequest();
              }catch (e) {
              }
              try{
                     returnnew ActiveXObject('Microsoft.XMLHTTP');
              }catch (e) {
              }
       };
 
       //Ajax的get请求
       $.get= function(url, data, callback, type) {
              //url：请求地址
              //data：请求参数
              //callback：回调函数
 
              //创建对象
              varxhr = $.init();
              //添加时间戳解决缓存问题
              url= url + '?_=' + new Date().getTime();
              //如果传递参数，则连接参数字符串
              if(data != null) {
                     url= url + '&' + data;
              }
              //初始化Ajax对象
              xhr.open('get',url);
              //回调函数
              xhr.onreadystatechange= function() {
                     if(xhr.readyState == 4 && xhr.status == 200) {
                            //当接收数据完毕后，调用指定的函数,将ajax对象
                            //的返回值做为参数进行传递
                            if(type == null) {
                                   type= 'text';
                            }
                            if(type == 'text') {
                                   callback(xhr.responseText);
                            }
                            if(type == 'xml') {
                                   callback(xhr.responseXML);
                            }
 
                            if(type == 'json') {
                                   callback(eval('('+ xhr.responseText + ')'))
                            }
                     }
              };
              //发送Ajax请求
              xhr.send(null);
       };
 
       //Ajax的post请求
       $.post= function(url, data, callback, type) {
              varxhr = $.init();
              xhr.open('post',url);
              xhr.setRequestHeader('Content-Type',
                            'application/x-www-form-urlencoded');
              xhr.onreadystatechange= function() {
                     if(xhr.readyState == 4 && xhr.status == 200) {
                            if(type == null) {
                                   type= 'text';
                            }
 
                            if(type == 'text') {
                                   callback(xhr.responseText);
                            }
 
                            if(type == 'xml') {
                                   callback(xhr.responseXML);
                            }
 
                            if(type == 'json') {
                                   callback(eval('('+ xhr.responseText + ')'))
                            }
                     }
              };
              xhr.send(data);
       };
 
       window.$ = $;
})();






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在此处插入标题</title>
<style>
#result {
width: 500px;
height: auto;
border: 1px outset #cccccc;
display: none;
}


#content {
width: 500px;
}
</style>
<script language='javascript' src='public/public.js'></script>
<script>
window.onload = function() {
//绑定文本框键盘事件
$('content').onkeyup = display;
};


function display() {
//取得输入的内容
var content = $('content').value;
//清空div中所有信息
$('result').innerHTML = '';
//判断用户输入的内容是否为空
if (content == '') {
//隐藏div
$('result').style.display = 'none';
//结束函数的执行
return;
}
//发送Ajax请求，返回匹配的所有数据
$.post('search.php', 'content=' + content, function(msg) {
//清空div所有信息
$('result').innerHTML = '';
//判断返回结果长度，如果大于0，匹配到相关内容
if (msg.length > 0)
//显示div
$('result').style.display = 'block';
else
//隐藏div
$('result').style.display = 'none';
//循环遍历结果  每一个结果就是一个div
for ( var i = 0; i < msg.length; i++) {
//创建一个div
var div = document.createElement('div');
//设置div显示分类名称
div.innerHTML = msg[i].name;
//设置div的鼠标经过事件
div.onmouseover = function() {
this.style.backgroundColor = '#cccccc';//颜色越是a越浅
};
//设置div的鼠标离开事件
div.onmouseout = function() {
this.style.backgroundColor = 'white';
};
//设置div的点击事件
div.onclick = function() {
//让文本框的内容等于当前div中显示的内容
$('content').value = this.innerHTML;
//隐藏当前div
$('result').style.display = 'none';
};
//将新创建的div放在result中
$('result').appendChild(div);
}
}, 'json');
}
</script>
</head>
<body>
<input type='text' id='content' />
<div id='result'></div>
</body>
</html>

imyiligege

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
对理解ajax第三个回调函数的封装和 null设置少传的那个参数默认

var a=function(msg){alert( msg);}a(1);之前看视频对ajax封装回调函数总不太理解，知道上边例子跑通就理解了一个函数作为参数，其实函数后边再加括号里边传入参数也可以运行，像这样自调用匿名函数(function(msg){alert( msg);}(1));(function() {
复制链接

扫一扫

专栏目录