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