<script>
var a=function(msg){
alert( msg);
}
a(1);
var a=function(msg){
alert( msg);
}
a(1);
</script>
之前看视频对ajax封装回调函数总不太理解,知道上边例子跑通就理解了一个函数作为参数,其实函数后边再加括号里边传入参数也可以运行,像这样自调用匿名函数
<script>
(function(msg){
alert( msg);
}(1));
</script>
还有可以利用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>