ajax函数封装与调用

Myth丶恋晨 2021-09-29 21:04 480阅读 0赞

HTML+CSS

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css"> html,body{ height: 100%; } #box{ position: relative; width:500px; height: 35px; /*border: 1px solid black;*/ } #querystr{ width: 100%; height: 100%; outline:none; margin:0; /*border: none;*/ } #btnQuery{ position: absolute; left:500px; top:0px; height: 35px; } #musicBox{ position: absolute; left:0px; top:35px; width: 500px; list-style: none; } #musicBox li{ padding: 0; } </style>
    </head>
    <body>
    		百度logo：
    		<div id="box">
    			<input type="text" id="querystr" /><input id="btnQuery" type="button" value="百度一下" />
    			<ul id="musicBox">
    
    			</ul>
    		</div>
    		
    	</form>
    </body>
    </html>

//接口文档：  
//1、请求地址：getMusic.php  
//2、请求方式:get  
//3、请求参数:  
/\*  
参数名 数据类型 描述 是否必须  
musicname String 音乐名称（的一部分） 是  
*/  
//4、响应数据  
/*  
符合musicname的所有音乐的名字，  
如（加入前端传入musicname=你），后端响应如下数据：  
‘\[  
“你是我的眼”,  
“你是我的心”,  
“你是我的宝贝”,  
“你是我的手”,  
“你是我的头”,  
“我是你的优乐美”  
\]’

\*/  
Js代码：

ajax封装函数：

/* 封装ajax 参数： 请求参数：url 请求方式：method 请求参数：params 参数的两种写法： key1=value1&key2=value2 { key1:value1, key2:value2 } 回调函数： 是否异步 返回值：无 */
    function ajaxMy(url,method,params,func,isAsync){ 
        //1.创建对象
        let xhr=new XMLHttpRequest();
        //产生请求参数的字符串：循环把json对象转换为： key1=value1&key2=value2 这样的形势
        let sendstr='';
        for(let key in params){ 
            sendstr+=`${ key}=${ params[key]}&`;
        }
        if(sendstr.length>0){ 
            sendstr = sendstr.substring(0,sendstr.length-1);//musicname=你
        }
    
        let urlAndParam=url;//getMusic.php
        //如果是get方式，并且有请求参数，那么就把url和请求参数用问号隔开
        if(method.toLowerCase()=="get"&&sendstr!=""){ 
            urlAndParam+='?'+sendstr;//getMusic.php?musicname=你
        }
    
        //2.设置请求参数
        xhr.open(method,urlAndParam,isAsync);
    
        //3.设置回调函数
        xhr.onreadystatechange=function(){ 
            if(xhr.readyState==4&&xhr.status==200){ 
                //调用回调函数（如下的 && 表示，逻辑短路，如果func是真，才调用func函数）
                func&&func(xhr.responseText);
                //也可以写成如下：
                if(func){ 
                    func(xhr.responseText);
                }
            }
        }
    
        if(method.toLowerCase()=="post"){ 
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xhr.send(sendstr);
        }else{ 
            //4.发送请求
            xhr.send();
        }
    }
    
    
    
    function Myajax(obj){ 
        let defaultObj={ 
            "url":"#",
            "method":"get",
            "params":{ },
            "func":null,
            "isAsync":true
        };
    
        ajaxObj={ };
        for(let key in defaultObj){ 
            ajaxObj[key]=obj[key]||defaultObj[key];
        }
    
        ajaxMy(ajaxObj.url,ajaxObj.method,ajaxObj.params,ajaxObj.func,ajaxObj.isAsync);
    }

getMusic.php：

<?php
    	header("Content-type:text/html;charset=utf-8");
    
    	//1、得到关键字
    
    	$key = $_GET['musicname'];
    
    	if($key=='你'){ 
    		echo '["你是我的眼前的你","你是我的小鲜肉","你是我的鼻子","我是你的优乐美"]';
    	}else if($key=='你是'){ 
    		echo '["你是我的眼前的你","你是我的小鲜肉","你是我的鼻子"]';
    	}else { 
    		echo '[]';
    	}
    ?>

效果：  
![在这里插入图片描述][20190717220639158.png]

[20190717220639158.png]: /images/20210724/70ce763fa3104ffe8fb3f23d624e2a79.png