1、什么是ajax? 異步的JavaScript和XML
XHTML:可擴展的超文本標記語言
||
HTML
xml:數據結構 可擴展的標記語言
json:輕量級的數據格式
2、ajax使用的場景
1、局部刷新
2、表單驗證 (最初的設計目的)
3、無刷新動態獲取數據
3、ajax的優點
1、效率高 用戶體驗好
2、無刷新動態獲取數據
4、ajax請求數據的流程
1,創建一個ajax對象 xhr
2,打開地址
3,發送
4,等待數據
5,ajax的狀態: ajax的狀態有哪些
0-未初始化,尚未調用open()方法
1-啟動,調用open()方法,已調用send()的方法,正在發送請求
2-發送,已經調用send()方法,已接受到響應
3-解析 正在解析響應數據
4、完成,響應數據解析完成,客戶端可以調用;(我們都是使用xhr.readyState == 4 判斷ajax請求是否結束)
6,服務器的狀態
常見的服務器狀態碼有哪些?
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到,但返回信息為空
205——服務器完成了請求,用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET,但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼,現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求,如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖,請求資源不可訪問
407——類似401,用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態,請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段,在當前請求資源范圍內沒有range指示值,請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值,如果是代理服務器,可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用,有時是為了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載,服務器使用另一個關口或服務來響應用戶,等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本
必須要記住的
100:客戶端必須發送請求
200:請求成功
304:重定向 (提問);
404: 數據不存在
500:服務器錯誤
5、ajax能否跨域?如何解決跨域?場景的跨域方式有哪些?
(1)不能
(2)
跨域:瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能調用b.cn中的js,對象或數據(因為a.cn和b.cn是不同域),所以跨域就出現了.
同源策略:請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,端口,協議相同.
解決跨域的方式 A:
基於script標簽實現跨域 B:基於jquery跨域 jquery已經把跨域封裝到ajax上 jsonp形式的ajax請求:並且通過get請求的方式傳入參數,注意:跨域請求是只能是get請求不能使用post請求 C:通過iframe來跨子域
6,
get與post的區別
1、上傳獲取數據
2、get不安全 post安全 這樣理解有點錯誤
form Data
取決於http協議和https協議
get傳遞數據的時候通過url進行傳遞數據 在地址?后面進行傳遞數據
類型 key = val 如果是傳遞多個值的時候 用&分割
例如
www.baidu.com?username=帥哥&age=34&sex=男
get存儲量的大小只有2K
post傳遞數據的時候 虛擬的機制 setRequestHeader() send(數據)
(1)get的ajax
//第一步 創建ajax對象
var xhr = new XMLHttpRequest();
//第二步 打開要發送的地址
xhr.open("get","http://10.9.188.25/qbank/php/select.php");
/*
參數1:method--->get post
參數2:請求的地址
參數3:布爾值 默認是false 異步true同步
*/
//第三部發送
xhr.send();
console.log(xhr.readyState)
//第四步
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText))
}
}
(2)post的ajax
//第一步創建ajax對象
var xhr = new XMLHttpRequest();
//打開請求的方式
xhr.open("post","http://10.9.188.25/qbank/php/insert.php");
//如果是post進行提交的時候必須設置響應頭
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//post發送數據請求的時候參數要放在send里面
xhr.send("content=面向對象&where=this的指向&idea=多練");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText))
}else{
console.log(xhr.status);
}
}
(3)封裝ajax
function ajax(options){
//創建一個ajax對象
var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");
//數據的處理 {a:1,b:2} a=1&b=2;
var str = "";
for(var key in options.data){
str+="&"+key+"="+options.data[key];
}
str = str.slice(1)
if(options.type == "get"){
var url = options.url+"?"+str;
xhr.open("get",url);
xhr.send();
}else if(options.type == "post"){
xhr.open("post",options.url);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(str)
}
//監聽
xhr.onreadystatechange = function(){
//當請求成功的時候
if(xhr.readyState == 4 && xhr.status == 200){
var d = xhr.responseText;
//將請求的數據傳遞給成功回調函數
options.success&&options.success(d)
}else if(xhr.status != 200){
//當失敗的時候將服務器的狀態傳遞給失敗的回調函數
options.error&&options.error(xhr.status);
}
}
}
ajax({
type:"get/post",
url:"請求的地址",
data:{},
success:function(data){
console.log(data)
}
})
1,AJAX不是JavaScript的規范, ajax的縮寫:Asynchronous JavaScript and XML,意思就是用JavaScript執行異步網絡請求
注意:AJAX請求是異步執行的,也就是說,要通過回調函數獲得響應。
2,使用原生js實現ajax
創建一個 XMLHttpRequest 對象。如果不支持創建該對象的瀏覽器,則需要創建 ActiveXObject,具體方法如下:
var xmlHttpRequest;
function createXmlHttpRequest(){
if(window.XMLHttpRequest) //非IE
xmlHttpRequest = new XMLHttpRequest();
else if(window.ActiveObject)//IE6+
xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
else//IE6-
xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
}
提交請求的方法:
open(method,url);//分別為提交的方法(GET或者POST)和提交的url
send(content);
onreadystatechange(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.state == 200){
//請求成功
}
}else{
//請求失敗
}
}
當創建了XMLHttpRequest
對象后,要先設置onreadystatechange
的回調函數。在回調函數中,通常我們只需通過readyState === 4
判斷請求是否完成,如果已完成,再根據status === 200
判斷是否是一個成功的響應。
XMLHttpRequest
對象的open()
方法有3個參數,第一個參數指定是GET
還是POST
,第二個參數指定URL地址,第三個參數指定是否使用異步,默認是true
,所以不用寫。
注意,千萬不要把第三個參數指定為false
,否則瀏覽器將停止響應,直到AJAX請求完成。如果這個請求耗時10秒,那么10秒內你會發現瀏覽器處於“假死”狀態。
最后調用send()
方法才真正發送請求。GET
請求不需要參數,POST
請求需要把body部分以字符串或者FormData
對象傳進去。