AJAX
原生js操作ajax
1.創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();//ie5 ie6? xhr = new ActiveXObject(Microsoft.XMLHTTP")
2.打開鏈接
xhr.open(method,url,ansyn)? method:(get/post)? url:接口的路徑? ? ansyn:是否是異步(默認異步true)
3.發送數據
xhr.send()
4.獲取數據,渲染頁面
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
//do something
}
}
屬性
xhr.status? 200? 404? 500
xhr.readyState? 【0,1,2,3,4】
xhr.statusText? ok? not found
xhr.responseText
xhr.responseXML
post和get的不同點
JQUERY 操作ajax的方法
1.最底層:$.ajax({
type:"get/post",
url:"路徑",
dataType:"xml/html/text/json/jsonp...",
data:{},
success:function(res,statusT,xhr){
返回的結果
},
error:function(){
}
})
$.ajax({url}).done(fn).fail(fn)
2.二層
$.get(url,[data],[fn],[dataType])
$.post(url,[data],[fn],[dataType])
jquery對象.load(url,[data],[fn])
3.最高層
$.getJSON(url,[data],[fn])
$.getSCRIPT(url,[fn])
接口:
http://datainfo.duapp.com/shopdata/datainfo.html
京東評論接口
https://club.jd.com/discussion/getProductPageImageCommentList.action?productId=1085328
典型的軟件三層模型:
視圖界面—數據處理—數據存儲
傳統軟件架構下:后端語言直接操作界面,Ajax只是作為輔助的異步請求實現頁面的局部刷新技術;傳統前后端耦合軟件模型中,Ajax是指作為一個輔助功能。
前后端分離軟件架構模型中:后端語言只是提供接口【接口是URL地址的格式進行呈現的】
前端通過Ajax進行調用,訪問URL接口地址,獲取數據并且渲染到頁面上。
http請求
超文本傳輸協議(HTTP,HyperText?Transfer?Protocol)
http是計算網絡通信的規則
http是一種無狀態的協議(不建立持久連接)
http請求的7個步驟
1.建立tcp連接(TCP(Transmission?Control?Protocol傳輸控制協議))
2.web瀏覽器向web服務器發送請求命令
3.瀏覽器發送請求頭
4.服務器應答
5.服務器發送應答頭信息
6.服務發送數據
7.服務器斷開tcp
當再瀏覽器地址欄鍵入http://www.baidu.com會發生什么情況
1.建立tcp鏈接
2.找域名對應的ip
o再瀏覽器內置緩存里面找
o再向上一級路由找
o再向上一級dns服務找
o在向。。。。。。。。
o找不到
3.向服務器發送請求頭.請求體
4.服務會應答
5.服務器應答頭
o服務器的信息
o狀態碼status:
§100初始化
§200成功
§300各種跳轉(你去別的地方有)
§400各種找不到
§500服務器內部錯誤
§常見200?303?304?307?404?500?505
6.服務器?發送數據
7.服務器關閉tcp
8.讀取數據
9.解析成dom生成?虛擬dom樹
10.建立別的http請求?下載css?js圖片?其他文件
11.渲染頁面
12.重繪頁面
狀態碼:
1xx:信息響應類,表示接收到請求并且繼續處理
2xx:處理成功響應類,表示動作被成功接收、理解和接受200?Ok
3xx:重定向響應類,為了完成指定的動作,必須接受進一步處理
4xx:客戶端錯誤,客戶請求包含語法錯誤或者是不能正確執行404?NOT?FOUNT
5xx:服務端錯誤,服務器不能正確執行一個正確的請求500
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
201-206都表示服務器成功處理了請求的狀態代碼,說明網頁可以正常訪問。
200(成功)服務器已成功處理了請求。通常,這表示服務器提供了請求的網頁。
201(已創建)請求成功且服務器已創建了新的資源。
202(已接受)服務器已接受了請求,但尚未對其進行處理。
203(非授權信息)服務器已成功處理了請求,但返回了可能來自另一來源的信息。
204(無內容)服務器成功處理了請求,但未返回任何內容。
205(重置內容)?服務器成功處理了請求,但未返回任何內容。與204響應不同,此響應要求請求者重置文檔視圖(例如清除表單內容以輸入新內容)。
206(部分內容)服務器成功處理了部分GET請求。
300-3007表示的意思是:要完成請求,您需要進一步進行操作。通常,這些狀態代碼是永遠重定向的。
300(多種選擇)服務器根據請求可執行多種操作。服務器可根據請求者?來選擇一項操作,或提供操作列表供其選擇。
301(永久移動)請求的網頁已被永久移動到新位置。服務器返回此響應時,會自動將請求者轉到新位置。您應使用此代碼通知搜索引擎蜘蛛網頁或網站已被永久移動到新位置。
302(臨時移動)?服務器目前正從不同位置的網頁響應請求,但請求者應繼續使用原有位置來進行以后的請求。會自動將請求者轉到不同的位置。但由于搜索引擎會繼續抓取原有位置并將其編入索引,因此您不應使用此代碼來告訴搜索引擎頁面或網站已被移動。
303(查看其他位置)?當請求者應對不同的位置進行單獨的GET請求以檢索響應時,服務器會返回此代碼。對于除HEAD請求之外的所有請求,服務器會自動轉到其他位置。
304(未修改)?自從上次請求后,請求的網頁未被修改過。服務器返回此響應時,不會返回網頁內容。
如果網頁自請求者上次請求后再也沒有更改過,您應當將服務器配置為返回此響應。由于服務器可以告訴?搜索引擎自從上次抓取后網頁沒有更改過,因此可節省帶寬和開銷。
305(使用代理)?請求者只能使用代理訪問請求的網頁。如果服務器返回此響應,那么,服務器還會指明請求者應當使用的代理。
307(臨時重定向)服務器目前正從不同位置的網頁響應請求,但請求者應繼續使用原有位置來進行以后的請求。會自動將請求者轉到不同的位置。但由于搜索引擎會繼續抓取原有位置并將其編入索引,因此您不應使用此代碼來告訴搜索引擎某個頁面或網站已被移動。
4XXHTTP狀態碼表示請求可能出錯,會妨礙服務器的處理。
400(錯誤請求)?服務器不理解請求的語法。
401(身份驗證錯誤)?此頁要求授權。您可能不希望將此網頁納入索引。
403(禁止)?服務器拒絕請求。
404(未找到)?服務器找不到請求的網頁。例如,對于服務器上不存在的網頁經常會返回此代碼。
405(方法禁用)?禁用請求中指定的方法。
406(不接受)?無法使用請求的內容特性響應請求的網頁。
407(需要代理授權)?此狀態碼與401類似,但指定請求者必須授權使用代理。如果服務器返回此響應,還表示請求者應當使用代理。
408(請求超時)?服務器等候請求時發生超時。
409(沖突)?服務器在完成請求時發生沖突。服務器必須在響應中包含有關沖突的信息。服務器在響應與前一個請求相沖突的PUT請求時可能會返回此代碼,以及兩個請求的差異列表。
410(已刪除)?請求的資源永久刪除后,服務器返回此響應。該代碼與404(未找到)代碼相似,但在資源以前存在而現在不存在的情況下,有時會用來替代404代碼。如果資源已永久刪除,您應當使用301指定資源的新位置。
411(需要有效長度)?服務器不接受不含有效內容長度標頭字段的請求。
412(未滿足前提條件)?服務器未滿足請求者在請求中設置的其中一個前提條件。
413(請求實體過大)?服務器無法處理請求,因為請求實體過大,超出服務器的處理能力。
414(請求的URI過長)?請求的URI(通常為網址)過長,服務器無法處理。
415(不支持的媒體類型)?請求的格式不受請求頁面的支持。
416(請求范圍不符合要求)?如果頁面無法提供請求的范圍,則服務器會返回此狀態碼。
417(未滿足期望值)?服務器未滿足"期望"請求標頭字段的要求。
500至505表示的意思是:服務器在嘗試處理請求時發生內部錯誤。這些錯誤可能是服務器本身的錯誤,而不是請求出錯。
500(服務器內部錯誤)服務器遇到錯誤,無法完成請求。
501(尚未實施)?服務器不具備完成請求的功能。例如,當服務器無法識別請求方法時,服務器可能會返回此代碼。
502(錯誤網關)?服務器作為網關或代理,從上游服務器收到了無效的響應。
503(服務不可用)?目前無法使用服務器(由于超載或進行停機維護)。通常,這只是一種暫時的狀態。
504(網關超時)服務器作為網關或代理,未及時從上游服務器接收請求。
505(HTTP版本不受支持)?服務器不支持請求中所使用的HTTP協議版本。
http請求組成
1.請求方法get?post等等
2.請求的url
3.請求頭
4.請求體
get?post區別
lget形式請求數據,參數會以明文的形式拼接在url地址的后面,請求的長度受到url地址格式的限制;
lpost形式請求數據,參數會打包到請求對象中進行傳遞,不會顯示在url地址中。數據請求的安全性比較GET而言更加隱秘!
l
l什么時候用GET?什么時候用POST?
nget方式請求數據的效率相比POST方式較高!
n參數長度有一定的限制的情況下請求常規數據,使用get方式
n參數長度沒有限制或者包含二進制數據或者包含安全要求的數據等,請求的數據涉及到安全性的情況下,使用Post方式
http響應的的組成
1.文字和數字組成的狀態碼,顯示請求成功與否
2.響應頭
3.響應體(正文)
搭建PHP服務器
·安裝wampserver
·www文件夾就是網站內容所在區域
·本地ip:127.0.0.1
·本地域名:localhost
端口號默認80,如果apache無法運行,就要看一下是不是端口被占用了,在cmd—>netstat–ano
可以修改端口,還可以讓占用80端口的應用解除端口
修改端口
Apache-àhttpd.confàListen?80
什么ajax
Ajax全稱為:“Asynchronous[e's??kr?n?s]JavaScript?and?XML”(異步JavaScript和XML),
它并不是JavaScript的一種單一技術,而是利用了一系列交互式網頁應用相關的技術所形成的結合體。使用Ajax,我們可以無刷新狀態更新頁面,并且實現異步提交,提升了用戶體驗。
一.Ajax概述
Ajax這個概念是由Jesse?James?Garrett在2005年發明的。它本身不是單一技術,是一串技術的集合,主要有:
1.JavaScript,通過用戶或其他與瀏覽器相關事件捕獲交互行為;
2.XMLHttpRequest對象,通過這個對象可以在不中斷其它瀏覽器任務的情況下向服務器發送請求;
3.服務器上的文件,以XML、HTML或JSON格式保存文本數據;
4.其它JavaScript,解釋來自服務器的數據(比如PHP從MySQL獲取的數據)并將其呈現到頁面上。
由于Ajax包含眾多特性,優勢與不足也非常明顯。
優勢主要以下幾點:
1.不需要插件支持(一般瀏覽器且默認開啟JavaScript即可);
2.用戶體驗極佳(不刷新頁面即可獲取可更新的數據);
3.提升Web程序的性能(在傳遞數據方面做到按需放松,不必整體提交);
4.減輕服務器和帶寬的負擔(將服務器的一些操作轉移到客戶端);
而Ajax的不足由以下幾點:
1.不同版本的瀏覽器度XMLHttpRequest對象支持度不足(比如IE5之前);
2.前進、后退的功能被破壞(因為Ajax永遠在當前頁,不會幾率前后頁面);
3.搜索引擎的支持度不夠(因為搜索引擎爬蟲還不能理解JS引起變化數據的內容);
4.開發調試工具缺乏(相對于其他語言的工具集來說,JS或Ajax調試開發少的可憐)。
異步是什么?
使用Ajax最關鍵的地方,就是實現異步請求、接受響應及執行回調。那么異步與同步有什么區別呢?
我們普通的Web程序開發基本都是同步的,意為執行一段程序才能執行下一段,類似電話中的通話,一個電話接完才能接聽下個電話;而異步可以同時執行多條任務,感覺有多條線路,類似于短信,不會因為看一條短信而停止接受另一條短信。Ajax也可以使用同步模式執行,但同步的模式屬于阻塞模式,這樣會導致多條線路執行時又必須一條一條執行,會讓Web頁面出現假死狀態,所以,一般Ajax大部分采用異步模式。
l異步操作和同步操作
n同步操作:不同的事情按照一定的順序進行執行,后一件事情必須等到前一個執行完成才能執行,否則會處于等待狀態。
u通常情況下,同一個模塊中的代碼是按照程序結構順序執行的,就是后一行代碼必須等待前一行代碼執行完成才能執行,否則處于阻塞狀態。
n異步操作:不同的事情在執行過程中,同時執行。不分前后順序
u在程序代碼執行過程中,后一行代碼不會等待前一行代碼執行完成再去執行,而是直接執行,表現出不同行的代碼同時執行的效果。
如何實現ajax呢?
1.運用html和css實現頁面,表達信息
2.運用XMLHttpRequest和web服務器進行數據的異步交換
3.運用javascript操作DOM,實現動態局部刷新
l核心步驟:1.定義對象2.發送數據3.處理響應4.DOM渲染
創建一個XMLHttpRequest對象
XMLHttpRequest是AJAX的基礎。
XMLHttpRequest對象用于和服務器交換數據。
所有現代瀏覽器均支持XMLHttpRequest對象(IE5和IE6使用ActiveXObject)。
XMLHttpRequest用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
1,創建XMLHttpRequest對象的語法
varxhr=newXMLHttpRequest();
所有現代瀏覽器(IE7+、Firefox、Chrome、Safari以及Opera)均內建XMLHttpRequest對象。
老版本的Internet?Explorer(IE5和IE6)使用ActiveX對象:
varxhr=new?ActiveXObject("Microsoft.XMLHTTP");
為了應對所有的現代瀏覽器,包括IE5和IE6,請檢查瀏覽器是否支持XMLHttpRequest對象。如果支持,則創建XMLHttpRequest對象。如果不支持,則創建ActiveXObject:
var?xhr;
if?(window.XMLHttpRequest)
{//?code?for?IE7+,?Firefox,?Chrome,?Opera,?Safari
xhr=new?XMLHttpRequest();
}
else
{//?code?for?IE6,?IE5
xhr=new?ActiveXObject("Microsoft.XMLHTTP");
}
如需將請求發送到服務器,我們使用XMLHttpRequest對象的open()和send()方法:
方法
描述
open(method,url,async)
規定請求的類型、URL以及是否異步處理請求。
·method:請求的類型;GET或POST
·url:文件在服務器上的位置
·async:true(異步默認)或false(同步)
send(string)
將請求發送到服務器。
·string:僅用于POST請求
2,打開鏈接open(method,url,asny);
xhr.open("GET/POST","url?params1=some?ms2=somm2",true);
3,發送send("params1=some?ms2=somm2");可以為空post的時候可以再添加
如果需要像HTML表單那樣POST數據,請使用setRequestHeader()來添加HTTP頭。然后在send()方法中規定您希望發送的數據:
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("name="+uname.value);//發送數據
//?post請求需要發一個header
4,監聽readyStatestatus
xhr.onreadystatechange=function(){//當XHR狀態方式改變時
if(xhr.status==200&&xhr.readyState==4){//如果http的狀態碼200(請求成功)?xhr的狀態是4(成功狀態)
console.log(xhr.responseText)
}
}
如需獲得來自服務器的響應,請使用XMLHttpRequest對象的responseText或responseXML屬性
Request請求response響應
屬性
描述
responseText
獲得字符串形式的響應數據。如果來自服務器的響應并非XML,請使用responseText屬性。
responseXML
獲得XML形式的響應數據。如果來自服務器的響應是XML,而且需要作為XML對象進行解析,請使用responseXML屬性
XMLHttpRequest對象的三個重要的屬性:
1,onreadystatchange事件
當請求被發送到服務器時,我們需要執行一些基于響應的任務。
每當readyState改變時,就會觸發onreadystatechange事件。
readyState屬性存有XMLHttpRequest的狀態信息。
2.readyState存有XMLHttpRequest的狀態。從0到4發生變化。
XMLHTTP的readyState值含義:
·0-未初始化,即尚未調用open。
·1-初始化,即尚未調用send。
·2-發送數據,即已經調用send。
·3-數據傳送中。
·4-完成。
4.status狀態碼在前面已經說過
特別注意status?==?200????ok
注意問題:
1.兼容性問題【XmlHttpRequest對象的兼容性】
2.狀態碼【readyState[0.1.2.3.4],?status[200,402,403,404,?500]】
3.DOM操作【原生JS對于標簽、樣式、屬性、內容的增刪改查】
跨域:
JavaScript出于安全方面的考慮,不允許跨域調用其他頁面的對象。
先來看看哪些情況下才存在跨域的問題:
編號
URL
說明
是否允許通信
1
http://www.a.com/b.js同一域名下
允許
2
http://www.a.com/lab/a.js
http://www.a.com/script/b.js同一域名下不同文件夾
允許
3
http://www.a.com:8000/a.js
http://www.a.com/b.js同一域名,不同端口
不允許
4
http://www.a.com/a.js
https://www.a.com/b.js同一域名,不同協議
不允許
5
http://www.a.com/a.js
http://70.32.92.74/b.js域名和域名對應ip
不允許
6
http://www.a.com/a.js
http://script.a.com/b.js主域相同,子域不同
不允許
7
http://www.a.com/a.js
http://a.com/b.js同一域名,不同二級域名(同上)
不允許(cookie這種情況下也不允許訪問)
8
http://www.a.com/a.js
http://www.b.com/b.js不同域名
不允許
跨域,指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript施加的安全限制。
同源策略:
瀏覽器有一個很重要的概念——同源策略(Same-Origin?Policy)。所謂同源是指,域名,協議,端口相同。不同源的客戶端腳本(javascript、ActionScript)在沒明確授權的情況下,不能讀寫對方的資源。
為什么跨域?
為了讓某些數據實現不同域名上的共享,以達到數據共用提高處理效率的目的,需要對部分數據進行跨域訪問!
如何實現跨域?
1、JSONP:
JSONP(JSON?with?Padding)是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數據訪問的問題。(不支持post請求)
核心:通過script標簽的src屬性,進行域名的包裝來完成跨域數據的訪問。Src來模擬數據的來源,通過和要訪問的服務器的域名一致,進行同源數據的訪問,間接實現的跨域數據訪問。
2、代理:
例如www.123.com/index.html需要調用www.456.com/server.php,可以寫一個接口www.123.com/server.php,由這個接口在后端去調用www.456.com/server.php并拿到返回值,然后再返回給index.html,這就是一個代理的模式。相當于繞過了瀏覽器端,自然就不存在跨域問題。
3、PHP端修改header(XHR2方式)ie10以下版本不支持
在php接口腳本中加入以下兩句即可:
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
我們通常采用JSONP的方法來實現跨域.
json與jsonp的區別:
json是一種數據格式,jsonp是數據訪問的方式
原生js跨域:原生js中,通過動態增加script標簽,指定src屬性進行數據的跨域訪問.
面試題:
1.什么是同源策略.
2.簡單說下原生js是怎么跨域的?
答題點:1)原生js通常使用jsonp進行跨域
2)jsonp跨域的操作過程
3.什么是jsonp,json與jsonp的區別
Jquery??方法
load()方法
jQuery對Ajax做了大量的封裝,我們使用起來也較為方便,不需要去考慮瀏覽器兼容性。對于封裝的方式,jQuery采用了三層封裝:最底層的封裝方法為:$.ajax(),而通過這層封裝了第二層有三種方法:.load()、$.get()和$.post(),?最高層是$.getScript()和$.getJSON()方法。
.load()方法可以參數三個參數:
load(參數1,參數2,參數3)
1,參數1:url必需的URL,規定希望加載的url地址
2,data可選,與請求一同發送的key/value數據,參數類型為Object、
3,callback可選,load方法完成后所執行的回調函數,參數類型為函數Function。
如果想讓Ajax異步載入一段HTML內容,我們只需要一個HTML請求的url即可。
//HTML
//jQuery?$('input').click(function()?{
$('#box').load('test.html');
});
如果想對載入的HTML進行篩選,那么只要在url參數后面跟著一個選擇器即可。
//帶選擇器的url?$('input').click(function()?{
$('#box').load('test.html?.my');
});
如果是服務器文件,比如.php。一般不僅需要載入數據,還需要向服務器提交數據,那么我們就可以使用第二個可選參數data。向服務器提交數據有兩種方式:get和post。
//不傳遞data,則默認get方式$('input').click(function()?{
$('#box').load('test.php?url=qkt');
});
//get方式接受的PHP
if($_GET['url']?=='qkt')?{
echo'前端學習官網';
}else{
echo'其他網站';
}
}
?>
//傳遞data,則為post方式$('input').click(function()?{
$('#box').load('test.php',?{?url?:'qkt'
});
});
//post方式接受的PHP
if($_POST['url']?=='qkt')?{
echo'前端學習官網';
}else{
echo'其他網站';
}
?>
在Ajax數據載入完畢之后,就能執行回調函數callback,也就是第三個參數。
回調函數也可以傳遞三個可選參數:
responseText(請求返回的結果)=====>??js???responseText、
statusText(請求狀態)======>?js??status(字符串success/error)、
xhr(XMLHttpRequest對象)=====>?js??XMLHttpRequest對象。
$('input').click(function()?{
$('#box').load('test.php',?{?url?:'qkt'
},function(response,?status,?xhr)?{
alert('返回的值為:'+?response?+',狀態為:'+?status?+',
狀態是:'+?xhr.statusText);
});
});
注意:status得到的值,如果成功返回數據則為:success,否則為:error。
XMLHttpRequest對象屬于JavaScript范疇,可以調用一些屬性如下:
屬性名說明
responseText作為響應主體被返回的文本
responseXML如果響應主體內容類型是"text/xml"或"application/xml",
返回包含響應數據的XML?DOM文檔
status響應的HTTP狀態
statusTextHTTP狀態的說明
如果成功返回數據,那么xhr對象的statusText屬性則返回'OK'字符串。除了'OK'的狀態字符串,statusText屬性還提供了一系列其他的值,如下:
HTTP狀態碼狀態字符串說明
200OK服務器成功返回了頁面
400Bad?Request語法錯誤導致服務器不識別
401Unauthorized請求需要用戶認證
404Not?found指定的URL在服務器上找不到
500Internal?Server?Error服務器遇到意外錯誤,無法完成請求
503ServiceUnavailable由于服務器過載或維護導致無法完成請求
$.get()和$.post()
.load()方法是局部方法,因為他需要一個包含元素的jQuery對象作為前綴。而$.get()和$.post()是全局方法,無須指定某個元素。對于用途而言,.load()適合做靜態文件的異步獲取,而對于需要傳遞參數到服務器頁面的,$.get()和$.post()更加合適。
GET---從指定的資源請求數據
POST---向指定的資源提交要處理的數據
GET基本上用于從服務器獲的(取回)數據。注意:GET方法可能返回緩存的數據
POST也可以用于從服務器獲取數據,不過POST方法不會緩存數據,并且常用于連同請求一起發送數據。
語法:
$.get(url,[data],[callback],[type])
url:必需待載入頁面的URL地址
data:可選待發送?Key/value?參數。
callback:可選載入成功時回調函數。
type:可選返回內容格式,xml,?html,?script,?json,?text,?_default。
$.get()方法有四個參數,前面三個參數和.load()一樣,多了一個第四參數type,即服務器返回的內容格式:包括xml、html、script、json、jsonp和text。第一個參數為必選參數,后面三個為可選參數。
//使用$.get()異步返回html類型
$('input').click(function()?{
$.get('test.php',?{?url?:'qkt'
},function(response,?status,?xhr)?{if(status?=='success')?{
$('#box').html(response);
}
})//type自動轉為html
});
注意:第四參數type是指定異步返回的類型。一般情況下type參數是智能判斷,并不需要我們主動設置,如果主動設置,則會強行按照指定類型格式返回。
$.post()方法的使用和$.get()基本上一致,他們之間的區別也比較隱晦,基本都是背后的不同,在用戶使用上體現不出。具體區別如下:
1.GET請求是通過URL提交的,而POST請求則是HTTP消息實體提交的;
2.GET提交有大小限制(2KB),而POST方式不受限制;
3.GET方式會被緩存下來,可能有安全性問題,而POST沒有這個問題;
4.GET方式通過$_GET[]獲取,POST方式通過$_POST[]獲取。
$.post語法
$.post(URL,data,callback);
必需的URL參數規定您希望請求的URL。
可選的data參數規定連同請求發送的數據。
可選的callback參數是請求成功后所執行的函數名。
//使用$.post()異步返回html
$.post('test.php',?{
url?:'qkt'
},function(response,?status,?xhr)?{?$('#box').html(response);
});
$.getScript()和$.getJSON()
jQuery提供了一組用于特定異步加載的方法:
$.getScript(),用于加載特定的JS文件;
$.getJSON(),用于專門加載JSON文件。
有時我們希望能夠特定的情況再加載JS文件,而不是一開始把所有JS文件都加載了,
這時使用$.getScript()方法。
語法:
$.getScript(url,callback)
url參數為服務器的請求地址,
callback參數為數據請求成功后,執行的回調函數。
//點擊按鈕后再加載JS文件
$('input').click(function()?{?$.getScript('test.js');
});
$.getJSON()方法是專門用于加載JSON文件的,使用方法和之前的類似。
語法:
$.getJSON(url,[data],callback)專門用來加載json文件的
url參數為請求加載json格式文件的服務器地址,
可選項data參數為請求時發送的數據,
callback參數為數據請求成功后,執行的回調函數。
$('input').click(function()?{
$.getJSON('test.json',function(response,?status,?xhr)?{?alert(response[0].url);
});
});
$.ajax()
$.ajax()是所有ajax方法中最底層的方法,所有其他方法都是基于$.ajax()方法的封裝。JQuery封裝的底層Ajax操作函數,更加側重于定制化選項,讓開發人員控制的細節方面更加精確。
語法:
$.ajax({name:value,?name:value,?...?})
這個方法只有一個參數,傳遞一個各個功能鍵值對的對象。
參數
類型
說明
url
String
發送請求的地址
type
String
請求方式:POST或GET,默認GET
timeout
Number
設置請求超時的時間(毫秒)
data
Object或String
發送到服務器的數據,鍵值對字符串或對象
dataType
String
返回的數據類型,比如html、xml、json等
beforeSend
Function
發送請求前可修改XMLHttpRequest對象的函數
complete
Function
請求完成后調用的回調函數
success
Function
請求成功后調用的回調函數
error
Function
請求失敗時調用的回調函數
global
Boolean
默認為true,表示是否觸發全局Ajax
cache
Boolean
設置瀏覽器緩存響應,?默認為true。?如果dataType類型為script或jsonp則為false。
Content
DOM
指定某個元素為與這個請求相關的所有回調函數的上下文。
contentType
String
指?定?請?求?內?容?的?類?型?。?默?認?為application/x-www-form-urlencoded。
async
Boolean
默認為Boolean是否異步處理。默認為true,false為同步處理
processData
true,
數據被處理為URL編碼格式。如果為false,則阻止將傳入的數據處理為URL編碼的格式。
DataFilter
Function
用來篩選響應數據的回調函數。
IfModified
Boolean
默認為false,不進行頭檢測。如果為true,進行頭檢測,當相應內容與上次請求改變時,請求被認為是成功的。
Jsonp
String
指定一個查詢參數名稱來覆蓋默認的jsonp回調參數名callback。
username
String
在HTTP認證請求中使用的用戶名
password
String
在HTTP認證請求中使用的密碼
scriptCharset
String
當遠程和本地內容使用不同的字符集時,用來設置script和jsonp請求所使用的字符集。
xhr
Function
用來提供XHR實例自定義實現的回調函數
traditional
Boolean
默認為false,不使用傳統風格的參數序列化。?如為
$.ajax({
url:”http://.,.........”,
data:{
//參數
},
dataType:”GET/POST/JSONP/HTML/XML/JavaScript……”
success:function()?{},
error:function()?{}
})
登錄$.post
注冊$.post
商品列表$.getJSON/$.get
商品類型$.getJSON/$.get
商品詳情$.getJSON/$.get
購物車$.post/$.get
訂單數據$.post/$.get
訂單支付$.post