原生Ajax(GET和POST請求)和jQueryAjax(Get和Post請求)詳解
阿新 • • 發佈:2019-02-19
// 原生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('請求失敗'); } }) */