Ajax : async javascript and xml
XML:可擴(kuò)展的標(biāo)記語言
運行在客戶端的瀏覽器中的
AJAX四步:
1.var xhr = new XMLHttpRequest; // 創(chuàng)建一個ajax的對象
2.xhr.open("get","/data.txt",false);// 發(fā)送前的基本信息配置:配置請求的方式(GET,POST,PUT,DELET...),一個url, true代表異步, false同步,
[username], [userpass] 這兩個一般不寫,只有服務(wù)器做了安全限制
3這個是一個事件綁定的一個方法,監(jiān)聽狀態(tài)的改變 ?狀態(tài)改變就出發(fā)方法執(zhí)行
.xhr.onreadystatechange=function(){
if(xhr.readyState=4 && /^2/d{2}$/.test(xhr.status)){
?var val = xhr.respnseText;
}
};
4.xhr.send();
0 unsent
1 opened
2 hearers received
3 loading
4 done
2xx 成功
301 ---永久重新定向
302 --- 臨時定向 服務(wù)器的負(fù)載均衡
304 ---本次獲取的內(nèi)容是讀取緩存中的數(shù)據(jù)
400 ---客戶端傳遞給服務(wù)器端參數(shù)出現(xiàn)錯誤
401 ---無權(quán)限訪問
404 ---客戶端訪問的地址不存在
500 -- 未知的服務(wù)器錯誤
501 --服務(wù)器已經(jīng)超負(fù)荷
兼容性問題
//js高階編程技巧之“惰性思想” 能執(zhí)行一次 不執(zhí)行多次
var utils = (function(){
var flag = "getComputedSytle" in window
return{
getCss: function getCss(){
}
};
HTTP METHOD：
一下方式是沒有任何的區(qū)別，post和get都能做，目前開發(fā)都是約定俗成的規(guī)范
GET:一般用于從服務(wù)器獲取數(shù)據(jù) 給服務(wù)器少，從服務(wù)器拿
xhr.open("get","/getList?num=12) 一般用URL問號傳參數(shù)的方法
POST:推送數(shù)據(jù)
一般都使用 請求主題的方式
xhr.open("post","/getList");
xhr.send('{"name":"aa","age":7}')
//get vs post
get 請求的內(nèi)容存在大小的限制，而post沒有
因為get通過URL傳參給服務(wù)器，每個瀏覽器對于url的長度存在限制
GET請求會出現(xiàn)緩存（這個緩存不一定是304，POST是沒有緩存 在心目中我們的GET一般不會讓其出現(xiàn)緩存，清除緩存 后面加隨機數(shù)請求 改變下地址 Math.random()
一般來說GET不安全，而POST相對安全一些
PUT:一般用于上傳資源
DELETE:刪除資源
HEAD:獲取服務(wù)器的響應(yīng)頭信息
同步SYNC 異步ASYNC編程 JS是單線程的
定時器都是異步編程
事件綁定都是異步編程的
回調(diào)函數(shù)都可以理解為異步編程
在AJAX中可以使用異步編程
var count = 0
window.setTimeout(function(){
count++;
console.log(count);}),0)；
)varcount=0當(dāng)多個定時器，如果執(zhí)行完成循環(huán)都到達(dá)時間了 先執(zhí)行時間短的
window.setTimeout(function() {
count++;
console.log(count);
},1000)；
AJAX的同步 異步編程
onreadystate =4 才進(jìn)行其他 ?（同步）
只有異步才能 onreadystate =2 3 能接收到
function createXHR(){};
//ajax 實現(xiàn)請求的公共方法
function(){
var xhr = createXHR();
xhr.open("","",true);
xhr.onreadystatechange = function(){
}
}
JSONP 和AJAX 相同 都是客戶端向服務(wù)器端發(fā)送請求 給服務(wù)器傳遞數(shù)據(jù) 從服務(wù)器端獲取數(shù)據(jù)的方式
AJAX屬于同源策略
JSONP屬于非同源策略（跨域請求） 實現(xiàn)跨域的方式有很多種，終不過JSONP是最常用的
同源 非同源
1）協(xié)議
2）域名 IP
3）端口號?
JSONP的原理
在SCRIPT的時間中，沒有同源跨域這一說，只要是合法的SRC的屬性中地址<script></script>
JSONP就是利用了SCRIPT的這個原理
1）我們首先把需求請求數(shù)據(jù)的，那個跨域的api數(shù)據(jù)接口的地址，賦值給SCRIPT的SRC 屬性
2）把當(dāng)前頁面中的某一個函數(shù)名當(dāng)做參數(shù)值傳遞給需要跨域請求數(shù)據(jù)的服務(wù)器（URL問號傳參）
3）服務(wù)器接收到請求后，需要進(jìn)行特殊的處理：吧傳遞進(jìn)來的函數(shù)名和他需要給你的數(shù)據(jù)拼接成一個字符串 ‘我傳遞的函數(shù)名（需要傳給我們的數(shù)據(jù)）’? fn(data)
4）最后服務(wù)器把準(zhǔn)備的數(shù)據(jù)通過HTTP協(xié)議返回給我們的客戶端，我們的客戶端發(fā)現(xiàn) 執(zhí)行函數(shù)，而且還給函數(shù)傳遞了一堆的數(shù)據(jù)，那個數(shù)據(jù)就是我們想要的
function aaaa(data){
}
xxxxxx&callback=aaaa
服務(wù)器返回一個 ?text\JAVASCRIPT ?charset=utf-8 ? ?fn([........])
JQUERY中的ajax 和jsonp
AJAX
$.ajax({
url:"data.txt"
type:"get"
dataType:"json"
data:null,
async:true,
timeout:1000,
cache: false,(自動加隨機數(shù))
success:function(data){..}},
error:function(){}
);
JSONP ?都是GET和異步請求
$.ajax({
url:"xxxxxxxxx"
type:"get"
dataType:"jsonp"
success:function(data){
});
優(yōu)化 請求次數(shù)的減少 CSS 圖片 CSS SPRITE?雪碧圖(position圖) JS合并?
圖片延遲加載 Ajax和資源文件請求原理是一樣的
URI/URL/URN
ulr:統(tǒng)一資源定位符
http: 傳輸協(xié)議(理解為快遞小哥) v.qq.com :域名 :80 :端口號 index.html:請求的資源文件名 ?name=xxx&age=x :URL問號傳參 ?#bbs :URL的HASH (錨點定位)
傳輸協(xié)議 HTTP:超文本傳輸協(xié)議,除了傳輸文本外還可以傳輸其他的東西,例如:XML等 80
HTTPS:更加安全的HTTP (SSL) 443
FTP:文件傳輸協(xié)議 21
