ajax 請求

原文鏈接：https://blog.csdn.net/v_111/article/details/71080666

當接觸一項新技術時，首先我們要問自己四個問題，如果這四個問題我們都能學習並理解到位，那麼可以說這個新技術你已經完成了初步掌握，下面我們就這四個問題來說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() {
            }
        });

第二種是快捷操作$.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)
            }
        });

	})

   <script type="text/javascript">
	function repeat(){
		$.post('/iotApi/getReceiveMsg',{"uuid":"8622d15dff814"},function (res) {
		// 開始解析
			var msg=res.msg;
            if (res.code == 1) {
				if(msg.substr(7,4)=="0008"){
					document.getElementById("zhuangtai").innerHTML="開";
					console.log("測試");
				}
				
            }
        })
	}
</script>