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

发布时间：2020-12-16 02:03:38 所属栏目：百科来源：网络整理

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

</script>

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

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

(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,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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!