1. 程式人生 > >原生Ajax(GET和POST請求)和jQueryAjax(Get和Post請求)詳解

原生Ajax(GET和POST請求)和jQueryAjax(Get和Post請求)詳解

//	原生Ajax  Get Post請求
	function ajGet(){
//		建立一個 XMLHttpRequest 物件。(這個東西有相容,需要做相容的可以去搜下)
		var xhr = new XMLHttpRequest();
//		開啟請求,三個引數,請求方式,請求路徑,是否非同步
		xhr.open('get','get.php',true);
//		get方式傳送null或者為空
		xhr.send(null);
//		請求結束後,伺服器返回資料需要一個回撥函式來裝

		xhr.onreadystatechange = function(json){
//			XMLHttpRequest 物件的 readyState 屬性加以判斷,如果等於4(服務響應成功)
//			xhr.readyState == 4  是表示後臺處理完成了。
//			xhr.status == 200 是表示處理的結果是OK的。(具體多少成功看後臺)
			if ((xhr.readyState == 4) && (xhr.status == 200)) {
				console.log('成功');
			}
		}	
	}
	
//	xhr.open(method, url, async, username, password)詳解
/*	method 引數是用於請求的 HTTP 方法。值包括 GET、POST 和 HEAD。
	( 大小寫不敏感。)
	POST:用"POST"方式傳送資料,可以大到4MB
	GET:用"GET"方式傳送資料,只能256KB
	如果請求帶有引數的化實用POST方式,POST方式將引數放置在頁面的隱藏控制元件內
	沒有引數使用GET方式
	對於請求的頁面在中途可能發生更改的,也最好用POST方式
	
	url 引數是請求的主體。大多數瀏覽器實施了一個同源安全策略,並且要求這個 URL 與包含指令碼的文字具有相同的主機名和埠。
	async 引數指示請求使用應該非同步地執行。如果這個引數是 false,請求是同步的,後續對 send() 的呼叫將阻塞,直到響應完全接收。
	如果這個引數是 true 或省略,請求是非同步的,且通常需要一個 onreadystatechange 事件控制代碼。
	username 和 password 引數是可選的,為 url 所需的授權提供認證資格。如果指定了,它們會覆蓋 url 自己指定的任何資格。
*/
	
	function ajPost(){
		var xhr = new XMLHttpRequest();
		xhr.open('post','後臺.php',true);
//		post的send需要傳輸一個json物件
/*		比如API有https://csdnimg.cn/static/api/js/component/anticheat.js
		引數有很多隨便舉幾個
		username為zhangsan
		age年齡為18等
*/		
//		建立一個json物件
		var postJson = {
			'username':'zhangsan',
			'age':'18'
		}
		xhr.send(postJson);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				console.log('成功!');
			}else{
				console.log('失敗!');
			}
		}
	}
	
//	jQuery  Get Post請求
//	必需的 URL 引數規定您希望請求的 URL。
//	可選的 callback 引數是請求成功後所執行的函式名。
	$.get(url,function(){});
//	url:待載入頁面的URL地址
//	data:待發送 Key/value 引數。
//	callback:載入成功時回撥函式。
//	type:返回內容格式,xml, html, script, json, text, _default。
	$.get(url, [data], [callback], [type])
	
/*	get請求
	$.ajax({
        type: 'get',
        url: 'json/words.json',
        // 是需要傳輸的資料
        data: {
           id: '111',
           q: 'haha'
        },
        // 傳送型別, 預設是form表單格式
        // contentType: 'json',
        success: function(res, text, xhr) {
           console.log('請求成功');
        },
        error: function() {
           // 傳送ajax 請求失敗,服務端不能做正常的處理
           console.log('請求失敗');
        },
        // 無論成功還是失敗,都會執行該函式
        complete: function() {
           console.log('請求完成');
        }
	})
*/

//	必需的 URL 引數規定您希望請求的 URL。
//	可選的 data 引數規定連同請求傳送的資料。
//	可選的 callback 引數是請求成功後所執行的函式名。
	$.post(URL,data,callback);
//	url:傳送請求地址。
//	data:待發送 Key/value 引數。
//	callback:傳送成功時回撥函式。
//	type:返回內容格式,xml, html, script, json, text, _default。
	$.post(url, [data], [callback], [type]);

//	post請求
/*    $.ajax({
        type: 'post',
        url: 'xxxx.xxx',
        =====》設定請求格式
        contentType: 'json',
        =====》 如果是post請求, 且為json格式,需要經行格式化,轉為json字串。
    	data: JSON.stringify({
        name: 'xixi',
        	q: 'hahaha'
        }),
        headers: {user_id: 36},
        success: function(res, text, xhr) {
            console.log('請求成功');
        },
        error: function() {
            // 傳送ajax 請求失敗,服務端不能做正常的處理
            console.log('請求失敗');
        },
        // 無論成功還是失敗,都會執行該函式
        complete: function() {
           console.log('請求完成');
        }
    })
    */
   
// jsonp的形式
/*  $.ajax({
        type: 'get',
        url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
        data: {
            wd: '你好',
            sid: "1422_21080_19897_26350_20927",
        },
        // 預期後臺返回的格式
        dataType: "jsonp",
        // 連結中callback的字替換成你傳入的值
        jsonp: 'cb',
        // 無論你是jonp,get,post,只要返送請求成功success函式都會呼叫
        success: function(res, text, xhr) {
            console.log(res);
        },
        error: function() {
            // 傳送ajax 請求失敗,服務端不能做正常的處理
            console.log('請求失敗');
        }
    })
*/