Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
- 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
- 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 。
1.原生JavaScript写法:(原生js写ajax就像打电话)
打电话分下面4步 :1.拿出手机 2.拨号 3.说话 4.听对方说话
ajax也分下面4步 :1.创建ajax对象 2.连接到服务器 3.发送请求(告诉服务器我要什么文件) 4.接收返回值
readyState与status:
readyState有五种状态:
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
1 (载入):已经调用open() 方法,但尚未发送请求;
2 (载入完成): 请求已经发送完成;
3 (交互):可以接收到部分响应数据;
4 (完成):已经接收到了全部数据,并且连接已经关闭。
而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。status的状态有几十种,只列出平时常用的几种:
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>ajax跨域</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xmlHttp = new XMLHttpRequest();
//2.绑定监听函数
xmlHttp.onreadystatechange = function(){
//判断数据是否正常返回
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//6.接收数据
alert(xmlHttp.responseText);
}
}
//3.绑定处理请求的地址,true为异步,false为同步
//GET方式提交把参数加在地址后面?key1:value&key2:value
xmlHttp.open("POST","1.txt",true);
//4.POST提交设置的协议头(GET方式省略)
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//POST提交将参数,如果是GET提交send不用提交参数
//5.发送请求
xmlHttp.send("name=zjj&age=18");
}
}
</script>
</head>
<body>
<input type="button" name="" value="按钮" id="btn">
</body>
</html>
2.jQuery写法
jquery是一个优秀的js框架,对js原生的Ajax进行了封装,在封装后的Ajax的操作更加简洁,功能更加强大
常见的三种Ajax请求方法
1)$.get(url, [data], [callback], [type])
2)$.post(url, [data], [callback], [type])
其中:
url:代表请求的服务器端地址
data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)
callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)
常用的返回类型:text、json、html等
3)$.ajax( { option1:value1,option2:value2... } );
常用的option有如下:
async:是否异步,默认是true代表异步
data:发送到服务器的参数,建议使用json格式
dataType:服务器端返回的数据类型,常用text和json
success:成功响应执行的函数,对应的类型是function类型
type:请求方式,POST/GET
url:请求服务器端地址
<!DOCTYPE html>
<html>
<head>
<title>请求数据</title>
<meta charset="utf-8">
<style type="text/css">
b{
margin-left: 20px;
color: #f90;
font-size: 30px;
}
#btn{
background-color: #f90;
color: white;
border-radius: 8px;
outline: none;
border:1px solid #f90;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" >
function chaxun(){
$.ajax({
type:"get",
url:"https://api.apiopen.top/musicRankings",
async:true,
success:function(data){
for (var j = 0; j < data.result.length; j++) {
for (var i = 0; i < data.result[j].content.length; i++) {
$('#ul1').append('<li>'+data.result[j].name+'---------------'
+'<span>'+'歌曲名:'+data.result[j].content[i].title+'</span> '
+'<span>'+'歌曲编号:'+data.result[j].content[i].album_id+'</span> '
+'<span>'+'歌手:'+data.result[j].content[i].author+'</span> '+
'</li>');
}
console.log(data.result[j].name);
}
},
error:function(err){
alert("data"+err+'111');
}
});
}
</script>
</head>
<body>
<b>音乐排行榜</b>
<input type="button" id="btn" value="查询" onclick="chaxun()">
<ul id="ul1">
</ul>
</body>
</html>
这是页面