ajax 请求

系统管理员 2023-10-10 09:27 29阅读 0赞

当接触一项新技术时，首先我们要问自己四个问题，如果这四个问题我们都能学习并理解到位，那么可以说这个新技术你已经完成了初步掌握，下面我们就这四个问题来说ajax应该怎么学习。如果你已经看过我写的JS中ajax的使用教程，相信你对ajax已经有了一个基础了解。那么可以直接看第四部分，以便节约您的时间。

一，ajax是什么？  
AJAX = 异步 JavaScript 和 XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

二，ajax用在哪里？  
简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这种类型的适合用ajax，避免了属性整个页面带来的资源浪费。

三，为什么要使用ajax？  
减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。无恻新更新页面，减少用户心理和实际的等待时间。带来更好的用户体验。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和速写的负担，节约空间和宽带租用成本。可以调用外部数据。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。进一步促进页面呈现和数据的分离。

四，怎么使用在JS中使用ajax？使用时我们要了解的基础知识

1，JQuery是什么东西？  
是一个JavaScript类库，封装了大量的JavaScript底层代码。

2，JQuery的Ajax操作，对JavaScript底层Ajax操作进行了封装，提供了两种方法进行操作  
第一种是底层的$.ajax()操作

$.ajax({
                url:"url",
                type:"get",
                dataType:"json",
                data:{
                    userID:"1"
                },
                success:function(response){
     
                },
                error:function() {
                }
            });

第二种是快捷操作 . g e t ( ) . . .get().. .get()...post()…

$.get(
                "url",
                {userID:"123"},
                function(response) {
                }
            )

$.post(
                "url",
                {userID:"123"},
                function(response) {
     
                }
            )

$.post("你请求的地址",{你请求需要传递的参数},function(res){
     
    })

## 下面是简单的应用 ##

var script = document.createElement('script');
    	script.type = 'text/javascript';
    
    	// 传参并指定回调执行函数为onBack
    	script.src = 'http://102.201.87.103:9999/iotApi/getReceiveMsg';
    	document.head.appendChild(script);
    
    	// 回调执行函数
    	function onBack(res) {
    		alert(JSON.stringify(res));
    	}

$.ajax({
                    url: 'http://102.201.87.103:9999/iotApi/getReceiveMsg',
                    type: 'post',
                    dataType: 'jsonp',  // 请求方式为jsonp
                    crossDomain: true,
                    success: function(data) {
    					alert(JSON.stringify(data))
    					console.log(data)
                    },
                    data: {
    					uuid:"8622d15dff814"
    				}
    			});

$(function(){
    		$.ajax({
                url:"/iotApi/getReceiveMsg",
                type:"get",
                dataType:"json",
                data:{
                    uuid:"8622d15dff814"
                },
                success:function(response){
    				console.log(response)
                },
                error:function() {
    				// console.log(error)
                }
            });
    
    	})