關於ajax的一些總結(面試可能會使用的到)
參考:
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://segmentfault.com/a/1190000012469713
http://mp.weixin.qq.com/s/H2znDNNIVWC5o5i0bp1rhg
http://mp.weixin.qq.com/s/AcVV08QmiK80aALk7wu5uQ
0.ajax的優缺點:
優點:
頁面無刷新
響應速度快
減少帶寬
基於標準化,並被廣泛的支持
缺點:
無法後退
印象程序的異常處理機制
安全問題
對搜索引擎的支持比較弱
1.最原始的ajax的寫法:
1.什麼是ajax
頁面不跳轉,就可以更新頁面的部分內容
2.ajax的原生寫法:
就是XMLHttpRequest對象的使用(這個是Ajax技術的核心)
3.ajax的請求流程:
1.創建XMLHttpRequest對象
2.打開請求地址,初始化請求對象
3.發送請求數據
4.監聽回調函數的狀態
5.收到服務器,返回的應答結果
4.ajax的具體寫法:
代碼:
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest) //兼容和其他的瀏覽器
{// code for all new browsers
xmlhttp=new XMLHttpRequest();//在這裏創建 XMLHttpRequest對象
}
else if (window.ActiveXObject) //兼容IE瀏覽器
{// code for IE5 and IE6
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xmlhttp!=null)
{
xmlhttp.open(“GET”,url,true); //請求的方式和請求地址
xmlhttp.send(null);//發送請求
xmlhttp.onreadystatechange=state_Change;//監聽回調函數
}
else
{
alert(“你的瀏覽器不支持異步請求”);
}
}
function state_Change() //這裏是回調函數(監聽服務器的應答和服務器的狀態)
{
if (xmlhttp.readyState4&&xmlhttp.status200)
//當滿足這兩個條件時表示請求成功,完成響應 4 = “loaded”, 200 = OK
{
var data=xmlhttp.responseText; //拿到服務器返回的數據
// …our code here…在這裏進行數據返回後的操作
}else
{
alert(“Problem retrieving XML data”);
}
}
2.原生ajax的步驟總結:
1.HTML中,創建XMLHttpRequest對象
function getXhr(){
var xhr=null;//定義核心對象
if(window.XMLHttpRequest){//這是其他瀏覽器
xhr=new XMLHttpRequest();
}else{//這是IE
xhr=new ActiveXObject(“Microsoft.XMLHttp”);
}
return xhr;
}
var xhr=getXhr();
2.與服務器建立鏈接open()方法—其實他叫做註冊監聽
type–指定POST
對象.open(“post”,“02.php”);
3.向服務器發送請求數據–send()方法,post請求一定要設置setRequestHeader請求頭信息
//在這裏還是失效了,需要手動設置請求頭,必須在send()之前設置(固定寫法,必須記住)
xhr.setRequestHeader(“Content-Type”,“application/x-www.form-urlencoded”)
xhr.send(“user=adasdasd$pwd=kjkjlk”);
4.接收服務器端響應數據(這一步放在那裏都行好像)
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status=200){
var data=xhr.responseText;
console.log(data);
}
}
form表單有一個隱藏的屬性 enctype(自己下去查一查)
請求頭 content-text:裏面有
提交表單,表單請求數據主要在於這個屬性
5.簡化的步驟:
改變後步驟(這4個步驟,也是對的)
1.創建核心對象(必須寫在第一步)
2.註冊監聽(監聽服務器狀態)
保證你請求成功
readyState 爲4響應完畢
可以接受responseText屬性
3.與服務器端建立鏈接
4.向服務器端發送請求數據
6.註冊監聽之後服務器的5種狀態(其實,就是異步請求的過程而已)
0:初始化,對象被創建了 new 方法被執行了
1.已經建立了連接,和服務器 open()方法
2.已經發送了請求 sent()
3.響應頭接收完畢
4.響應體接收完畢
3.jQuery經常使用(用的是jQuery的響應)
$.ajax({
type:“post”,
url:“請求的地址”,
async:“是否支持異步刷新,默認爲true”,
data:“需要提交的數據”,
dataType:“服務器返回的數據”,
success:function(data){
},
error:function(data){
}
})
4.關於ajax的跨域請求
暫且不說
5.請求頭和響應頭的區別和認識
1.請求頭信息:
Accept：客戶端支持的數據類型
Accept-Charset：客戶端採用的編碼
Accept-Encoding：客戶端支持的數據壓縮格式
Accept-Language：客戶端的語言環境
Cookie：客服端的cookie
Host：請求的服務器地址
Connection：客戶端與服務連接類型
If-Modified-Since:上一次請求資源的緩存時間，與Last-Modified對應
If-None-Match：客戶段緩存數據的唯一標識，與Etag對應
Referer:發起請求的源地址。
2.響應頭的一些信息:
content-encoding：響應數據的壓縮格式。
content-length：響應數據的長度。
content-language：語言環境。
content-type：響應數據的類型。
Date:消息發送的時間
Age:經過的時間
Etag:被請求變量的實體值,用於判斷請求的資源是否發生變化
Expires：緩存的過期時間
Last-Modified：在服務器端最後被修改的時間
server：服務器的型號
4.最常遇見的問題–ajax的跨域解決方案:
1.CORS的解決方案
CORS是一個W3C標準，全稱是”跨域資源共享”（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
2.跨域出現的問題:
問題一:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
並且The response had HTTP status code 404
原因:
本次ajax請求是“非簡單請求”,所以請求前會發送一次預檢請求(OPTIONS)
服務器端後臺接口沒有允許OPTIONS請求,導致無法找到對應接口地址
問題二:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
並且The response had HTTP status code 405
原因:
後臺方法允許OPTIONS請求,但是一些配置文件中(如安全配置),阻止了OPTIONS請求,纔會導致這個現象
解決方案: 後端關閉對應的安全配置
問題三:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
並且status 200
原因:
頭部匹配時出現不匹配現象
解決方案: 後端增加對應的頭部支持
問題四:
heade contains multiple values ‘,’
表現現象是，後臺響應的http頭部信息有兩個Access-Control-Allow-Origin:*
3.解決跨域問題的常見方案:
一般ajax跨域解決就是通過JSONP解決或者CORS解決,如以下:
(注意，現在已經幾乎不會再使用JSONP了，所以JSONP瞭解下即可)
1.爲什麼不使用jsonp
使用script的標籤,只可以使用get方式的請求
2.CORS如何使用
在後臺解決吧(看起來,比較麻煩)
http://mp.weixin.qq.com/s/AcVV08QmiK80aALk7wu5uQ
3.原生的jsonp跨域解決方案:
利用的是script標籤可以跨域的特性
var script=document.createElement(‘script’);
script.type=‘text/javascript’;
//請求服務器,傳參,指定執行函數的返回函數 onBack
script.src=‘http://www.baidu.com:8080/login?user=admin&callback=onBack’;
//將元素掛載到DOM結構中
document.head.appendChild(script);
//執行回調函數
function onBack(res){
alert(res);
}
理解:
就是給原來的頁面加一個script標籤,接收標籤請求的返回值
4.利用jQUery來實現jasonp的請求()
$.ajax({
url:“http://www.baidu.com:8080/login”,
type:‘get’,
dataType:‘jasonp’,
jasonpCallback:‘自定義的回調函數名’,
data:{ 需要傳遞的數據 }
})
進行案例的測試–試一試吧