ajax
跨域
跨域:http 協(xié)議 域名 端口
三者只要有一個不同擂仍,就是跨域
服務(wù)端解決跨域: res.setHeader('Access-Control-Allow-Origin','*')
客戶端 request
客戶端 request 請求三部分 請求行 請求頭 請求體
請求行
req
method ?path ?http version
請求頭
Host 主機(jī)名
Connection 鏈接狀態(tài)
User-Agent 客戶端軟件環(huán)境
Accept 接受響應(yīng)類型
Accept-Encoding 接受的數(shù)據(jù)壓縮格式
Accept-Language 客戶端語言格式
Cookie 數(shù)據(jù)載體
請求體
name=liwenli&id=10
服務(wù)端 response
服務(wù)端 response 響應(yīng)三部分 響應(yīng)行 響應(yīng)頭 響應(yīng)體
響應(yīng)行
http version ?狀態(tài)碼 狀態(tài)語
響應(yīng)頭
Server 服務(wù)名稱
Date 響應(yīng)時間
Content-Type 響應(yīng)內(nèi)容mime類型 字符編碼格式 默認(rèn)text/html
Transfer-Encoding 傳輸編碼格式 chunked 分段傳輸
Connection 鏈接狀態(tài)
Cache-Control 緩存控制
Content-Encoding 壓縮格式
Set-Cookie 設(shè)置cookie
響應(yīng)體 響應(yīng)回送的內(nèi)容
sever詞匯 同步異步
解析url路徑 url.pars
url.parse(req.url,true)解析路徑 如果是true的話,返回的是鍵值隊(duì)
query: { name: 'zhufeng', id: '2' },
pathname是url路徑
query 查詢問號后面的參數(shù)
創(chuàng)建sever
createServer 創(chuàng)建一個sever
res.setHeader()設(shè)置響應(yīng)頭類型信息 (text/css text/html )
var result=fs.readFileSyn('.index/html') 獲取文件路徑
res.end('') 結(jié)束響應(yīng)原押,并返回給客戶端
req.url 客戶端請求路徑
如果請求資源不存在
如果請求資源不存在 返回404
res.statusCode = 404;
res.end('404 NOT FOUND!')
ajax獲取數(shù)據(jù)
注釋:AJAX在不加載網(wǎng)頁的情況下,更新部分?jǐn)?shù)據(jù)
1:
創(chuàng)建對象 XML
var xml=new XMLHTTPRequest();
實(shí)例創(chuàng)建,后續(xù)所有的操作,都用該對象上的屬性
2:
打開地址xml.open()
@param1:請求方式get post delete head put---->method請求方式
@param2:請求地址 接口url
@param3:同步false/異步true ?sync/async
xml.open('git','data.txt',false)
3:
響應(yīng)請求
@param1:readyState 請求狀態(tài)
@param2:status http狀態(tài)碼
xml.onreadystatechange=function(){
if(xml.readyState==4&&/2\d{2}/.test(xml.status)){ 監(jiān)聽狀態(tài)
data=xml.responseText 數(shù)據(jù)存儲在這個里面
}
}
4:xml.send();發(fā)送請求
5:回掉函數(shù)
typeof ?callback=='function'?callback(data):null;
method請求方式
method設(shè)置請求的方式
> GET系列 問號傳參 ?傳遞的服務(wù)器的內(nèi)容有大小限制 谷歌8KB衍菱、火狐7KB、IE2KB
> - get ?獲取
> - delete 刪除
> - head 只獲取服務(wù)器響應(yīng)頭信息
>
> POST系列 設(shè)置請求主體
> - post ?給后端推送數(shù)據(jù)
> - put 更新服務(wù)端數(shù)據(jù)
jquery ajax獲取數(shù)據(jù)
數(shù)據(jù)獲取
$.ajax
$.ajax({
type:'GET',//請求方式 ‘POST’ JSONP(跨域請求) 1.9以下版本mothod用這個
url:'www.baidu.com', //請求url地址棠笑,請求接口地址
dataType:'json'//返回的數(shù)據(jù)類型
async:false//是否異步
cache:true// 默認(rèn)是否緩存 true緩存
context:window 指定success里面上下文
beforeSend:function(){
發(fā)送請求之前 觸發(fā)
}
data:form.serialize(),//表單序列化
jsonp:'',//重寫jsonp的請求 url中回調(diào)函數(shù) key的名字
jsonpCallback:'',//制定jsonp回掉函數(shù)的名稱 ? ? ? ? ? ? ? ? ? ? ? ?value名字
data:{
查詢參數(shù)梦碗,向后臺發(fā)送數(shù)據(jù)(url?wd=liwenli&uid=1)
wd:'liwenli',
uid:1
}
success:function(val){//成功之后返回數(shù)據(jù)
this.data=val
}
timerout:3000//3秒以后終止請求 超時時間/原生xhr.timeout觸發(fā)的是xhr.ontimeout=function(){}
error:function(res){ 請求出錯 404不會被觸發(fā)禽绪,請求超時的時候蓖救,會報錯
}
complete:function(xhr){
不管提交成功或者失敗洪规,都會執(zhí)行
}
})
HTTP網(wǎng)絡(luò)狀態(tài)碼
服務(wù)器響應(yīng)狀態(tài)碼(HTTP網(wǎng)絡(luò)狀態(tài)碼):
> 200 成功
> 3xx 重定向
> 301 永久重定向(永久轉(zhuǎn)移)
> 302 臨時重定向(臨時轉(zhuǎn)移) ?服務(wù)器負(fù)載均衡
> 303 查看其他位置
> 304 讀取緩存數(shù)據(jù)(對于不經(jīng)常改變的CSS/JS等文件,我們可以做304緩存)
> 4xx 請求錯誤
> 400 傳遞參數(shù)有誤 客戶端錯誤
> 401 沒權(quán)限
> 403 禁止 服務(wù)器拒絕請求
> 404 找不到
> 5xx 服務(wù)器錯誤
> 500 未知的服務(wù)器錯誤
> 503 服務(wù)器超負(fù)載
AJAX的各種狀態(tài)
AJAX的各種狀態(tài)
> xhr.readyState
> 0 uninitialized 未初始化,創(chuàng)建了ajax對象循捺,但是沒有調(diào)用open方法的時候斩例;
> 1 loading 調(diào)用open方法,準(zhǔn)備發(fā)送請求从橘;
> 2 loaded 發(fā)送請求后念赶,完全接收響應(yīng)信息,開始準(zhǔn)備解析恰力;
> 3 interactive 交互叉谜,將響應(yīng)回來的原始數(shù)據(jù)解析為客戶端可以調(diào)用的數(shù)據(jù),掛載到xhr.responseText ?xhr.responseXML中等
> 4 done 響應(yīng)完成,客戶端可以調(diào)用踩萎,并且http status是200