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,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) {
//的返回值做为参数进行传递
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,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>
