js原生ajax与jquery的ajax的用法区别

最新推荐文章于 2024-07-15 22:52:27 发布

samllplum

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量3.2k

点赞数 3

分类专栏： JS基础文章标签： ajax

本文链接：https://blog.csdn.net/sunnyjingqi/article/details/87389955

版权

JS基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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>&nbsp;&nbsp;&nbsp;&nbsp;'
       				+'<span>'+'歌曲编号:'+data.result[j].content[i].album_id+'</span>&nbsp;&nbsp;&nbsp;&nbsp;'
       				+'<span>'+'歌手:'+data.result[j].content[i].author+'</span>&nbsp;&nbsp;&nbsp;&nbsp;'+
       				'</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>

这是页面

samllplum

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
js原生ajax与jquery的ajax的用法区别

Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。1.原生JavaScript写法：（原生js写ajax就像打电话）...
复制链接

扫一扫

专栏目录