jQuery中ajax的相關(guān)知識(shí)點(diǎn)匯總
前言
學(xué)習(xí)JavaScript的同學(xué)都知道, AJAX (async javascript and
xml)翻譯叫做異步的JavaScript和XML , 在原生js中使用發(fā)送網(wǎng)絡(luò)請(qǐng)求也是一件麻煩事,每次都是那幾個(gè)步驟.
我們先來(lái)回顧一下在原生js中如何發(fā)送一個(gè) ajax 網(wǎng)絡(luò)請(qǐng)求
經(jīng)典4步曲
1.原生js的ajax網(wǎng)絡(luò)請(qǐng)求
// IE9及以上 // const xhr = new XMLHttpRequest() // IE9以下 // const xhr = new ActiveXObject('Mricosoft.XMLHTTP') // 對(duì)于這個(gè)兼容寫法我們可以用一個(gè)函數(shù)來(lái)封裝 function createXHR() { var req = null; if (window.XMLHttpRequest) { // 如果有這個(gè)XMLHttpRequest對(duì)象就直接使用 req = new XMLHttpRequest(); } else { // 否則就使用IE8一下的寫法 req = new ActiveXObject("Microsoft.XMLHTTP"); } return req; } // 第一步:創(chuàng)建ajax對(duì)象 var xhr = createXHR(); //這樣就拿到了一個(gè)ajax對(duì)象 // 第二步:配置網(wǎng)絡(luò)請(qǐng)求信息 xhr.open('get', './demo.php', true) // xhr.open('get/post','要發(fā)送網(wǎng)絡(luò)請(qǐng)求去哪個(gè)地址',同步還是異步默認(rèn) true 表示異步,false 表示同步) // 如果是get請(qǐng)求有參數(shù)需要拼接在地址后面,例如'./demo.php?id=2&name=sanqi' // 如果是post請(qǐng)求,參數(shù)就要放在send()里面,例如:xhr.send('id=2&name=sanqi') // 第三步:發(fā)送網(wǎng)絡(luò)請(qǐng)求 xhr.send() // // 第四部:判斷響應(yīng)狀態(tài)拿到數(shù)據(jù) xhr.onreadyStateChange = function () { // 每次 readyState 改變的時(shí)候都會(huì)觸發(fā)該事件 // 我們就在這里判斷 readyState 的值是不是到 4 // 并且 http 的狀態(tài)碼是不是 200 ~ 299 if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) { // 這里表示驗(yàn)證通過(guò) // 我們就可以獲取服務(wù)端給我們響應(yīng)的內(nèi)容了 console.log(xhr.response); } }
這里補(bǔ)充一下readyState的5個(gè)狀態(tài)
- readyState --> 0: 表示未初始化完成,也就是 open 方法還沒(méi)有執(zhí)行
- readyState --> 1: 表示配置信息已經(jīng)完成,也就是執(zhí)行完 open 之后
- readyState --> 2: 表示 send 方法已經(jīng)執(zhí)行完成
- readyState --> 3: 表示正在解析響應(yīng)內(nèi)容
- readyState --> 4: 表示響應(yīng)內(nèi)容已經(jīng)解析完畢,可以在客戶端使用了
上面就是原生的js發(fā)送一個(gè)ajax網(wǎng)絡(luò)請(qǐng)求
2.關(guān)于使用jQuery的ajax網(wǎng)絡(luò)請(qǐng)求
我們?cè)趯W(xué)習(xí)jquery,就了解到,大家都在說(shuō),什么 jq 都給我們封裝好啦,這些網(wǎng)絡(luò)請(qǐng)求都不用我們?nèi)懤?雖說(shuō)如此,但是也還是不能盲目,還是 要具體了解之后才會(huì)使用.
(1).利用jquery發(fā)送get請(qǐng)求
下面統(tǒng)一后端代碼使用文件名為: test.php 這個(gè)文件
<?php header('content-type:text/html;charset=utf-8;'); $id = $_REQUEST['id']; $name = $_REQUEST['name']; $arr = [ 'id' => $id, 'name' => $name ]; echo json_encode($arr); ?>
使用jquery發(fā)送get請(qǐng)求
$.get('./test.php','id=999&name=三七安',function (res) { //第一個(gè)參數(shù)是請(qǐng)求的地址 //第二個(gè)參數(shù)是要發(fā)送給服務(wù)器的數(shù)據(jù) //第三個(gè)參數(shù)是成功時(shí)的回調(diào)函數(shù),里面包含服務(wù)返回給我們的數(shù)據(jù) //第四個(gè)參數(shù)是我們希望拿到的數(shù)據(jù)格式:有幾種選擇:json,text,html,xml,script console.log(res); },'json')
可以看到請(qǐng)求是發(fā)送成功了的
(2) 利用jquery發(fā)送post請(qǐng)求
$.post('./test.php',{id:123,name:'post請(qǐng)求'},function (res) { //這里其他參數(shù)和get請(qǐng)求一致的 //注意,這里的傳輸數(shù)據(jù)我用 對(duì)象的格式來(lái)寫,也能發(fā)送請(qǐng)求成功,也就是說(shuō) //無(wú)論是get請(qǐng)求還是post請(qǐng)求,想服務(wù)端傳數(shù)據(jù),既可以使用字符串格式也可以使用對(duì)象格式 console.log(res); },'json')
這是請(qǐng)求成功的的頁(yè)面
(3)利用jquery發(fā)送綜合發(fā)送 ajax 請(qǐng)求
先來(lái)瀏覽一下語(yǔ)法
// 使用 $.ajax 方法 // 只接受一個(gè)參數(shù),是一個(gè)對(duì)象,這個(gè)對(duì)象對(duì)當(dāng)前的請(qǐng)求進(jìn)行所有的配置 $.ajax({ url: './ajax', // 必填,請(qǐng)求的地址 type: 'GET', // 選填,請(qǐng)求方式,默認(rèn)是 GET(忽略大小寫) data: {}, // 選填,發(fā)送請(qǐng)求是攜帶的參數(shù) dataType: 'json', // 選填,期望返回值的數(shù)據(jù)類型,默認(rèn)是 string async: true, // 選填,是否異步,默認(rèn)是 true success() {}, // 選填,成功的回調(diào)函數(shù) error() {}, // 選填,失敗的回調(diào)函數(shù) cache: true, // 選填,是否緩存,默認(rèn)是 true context: div, // 選填,回調(diào)函數(shù)中的 this 指向,默認(rèn)是 ajax 對(duì)象 status: {}, // 選填,根據(jù)對(duì)應(yīng)的狀態(tài)碼進(jìn)行函數(shù)執(zhí)行 timeout: 1000, // 選填,超時(shí)事件 })
好像每次都要填好多參數(shù),但其實(shí)大部分參數(shù)都是選填的,我們只要看實(shí)際情況來(lái)填寫
在編譯器里面,直接輸入ajax也可以快捷生成部分代碼
發(fā)送ajax請(qǐng)求代碼
$.ajax({ type: "get", url: "./test.php", data: { id:000, name:'發(fā)送$.ajax請(qǐng)求的演示' }, dataType: "json", success: function (response) { console.log(response); } });
打開網(wǎng)頁(yè)就可以看到我們從后端拿回來(lái)的數(shù)據(jù)
下面補(bǔ)充幾個(gè)Ajax的全局函數(shù),也叫鉤子函數(shù),也就是在Ajax整個(gè)請(qǐng)求過(guò)程中的某一個(gè)階段執(zhí)行的函數(shù),而且是任意一個(gè)Ajax請(qǐng)求都會(huì)觸發(fā).
1. ajaxStart, 任意一個(gè)請(qǐng)求開始的時(shí)候都會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxStart(function () { console.log('有一個(gè)請(qǐng)求開始了') })
2. ajaxSend , 任意一個(gè) 請(qǐng)求準(zhǔn)備send之前都會(huì)觸發(fā)這個(gè)請(qǐng)求.
$(window).ajaxSend(function () { console.log('有一個(gè)要發(fā)送出去了') })
3.ajaxSuccess, 任意一個(gè) 請(qǐng)求成功的時(shí)候都會(huì)觸發(fā)這個(gè)函數(shù).
$(window).ajaxSuccess(function () { console.log('有一個(gè)請(qǐng)求成功了') })
4.ajaxError , 任意一個(gè) 請(qǐng)求失敗的時(shí)候就會(huì)觸發(fā)這個(gè)函數(shù).
$(window).ajaxError(function () { console.log('有一個(gè)請(qǐng)求失敗了') })
5.ajaxComplete , 任意一個(gè) 請(qǐng)求完成的時(shí)候就會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxComplete(function () { console.log('有一個(gè)請(qǐng)求完成了') })
6.ajaxStop , 任意一個(gè) 請(qǐng)求結(jié)束的時(shí)候就會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxStop(function () { console.log('有一個(gè)請(qǐng)求結(jié)束了') })
總結(jié)
到此這篇關(guān)于jQuery中ajax的相關(guān)知識(shí)點(diǎn)匯總的文章就介紹到這了,更多相關(guān)jQuery ajax知識(shí)點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- 跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
- jquery ajax請(qǐng)求方式與提示用戶正在處理請(qǐng)稍等
- 為jquery的ajax請(qǐng)求添加超時(shí)timeout時(shí)間的操作方法
- jQuery.ajax 跨域請(qǐng)求webapi設(shè)置headers的解決方案
- Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
- Jquery Ajax請(qǐng)求文件下載操作失敗的原因分析及解決辦法
- 淺析jQuery Ajax請(qǐng)求參數(shù)和返回?cái)?shù)據(jù)的處理
- 教你如何終止JQUERY的$.AJAX請(qǐng)求
相關(guān)文章
基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫彈出表單源碼特效
這篇文章主要介紹了基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫彈出表單,彈出的表單沒(méi)有任何遮蓋層,在web前端程序開發(fā)中經(jīng)常會(huì)用到,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07jackson解析json字符串,首字母大寫會(huì)自動(dòng)轉(zhuǎn)為小寫的方法
下面小編就為大家分享一篇jackson解析json字符串,首字母大寫會(huì)自動(dòng)轉(zhuǎn)為小寫的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12ztree實(shí)現(xiàn)權(quán)限橫向顯示功能
最近在做權(quán)限功能的時(shí)候,采用的ztree實(shí)現(xiàn)的,但是產(chǎn)品要求最后一層的權(quán)限節(jié)點(diǎn)要橫向顯示。下面小編把基于ztree實(shí)現(xiàn)權(quán)限橫向顯示功能的實(shí)現(xiàn)思路分享給大家,供大家參考2017-05-05jquery 獲取 outerHtml 包含當(dāng)前節(jié)點(diǎn)本身的代碼
jQuery.html() 是獲取當(dāng)前節(jié)點(diǎn)下的html代碼,并不包含當(dāng)前節(jié)點(diǎn)本身的代碼,后來(lái)實(shí)驗(yàn)發(fā)現(xiàn)有一個(gè)jQuery的一個(gè)方法可以解決2014-10-10基于JQuery的6個(gè)Tab選項(xiàng)卡插件
今天在修整博客側(cè)欄信息時(shí),利用到了Tab選項(xiàng)卡方式,因?yàn)閆Blog封裝的是JQuery庫(kù),所以很自然地就想到了IdTabs。2010-09-09jQuery EasyUI 組件加上“清除”功能實(shí)例詳解
在使用 EasyUI 各表單組件時(shí),尤其是使用 ComboBox(下拉列表框)、DateBox(日期輸入框)、DateTimeBox(日期時(shí)間輸入框)這三個(gè)組件時(shí),經(jīng)常會(huì)遇到下拉框或日期只允許選擇、不允許手動(dòng)輸入功能,怎么解決呢,下面小編給大家分享解決方案,一起看看吧2017-04-04jQuery側(cè)邊欄隨窗口滾動(dòng)實(shí)現(xiàn)方法
jQuery側(cè)邊欄隨窗口滾動(dòng)實(shí)現(xiàn)方法,需要的朋友可以參考一下2013-03-03jquery click([data],fn)使用方法實(shí)例介紹
大概意思就是觸發(fā)每一個(gè)匹配元素的click事件,本文通過(guò)一個(gè)實(shí)例為大家詳細(xì)介紹下jquery click([data],fn)的使用方法,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07jQuery實(shí)現(xiàn)簡(jiǎn)單漂亮的Nav導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單漂亮的Nav導(dǎo)航菜單效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷與操作頁(yè)面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03