BZOJ 2200 道路與航線(縮點+最短路+拓撲排序)
阿新 • • 發佈:2020-11-03
本質:一個伺服器與瀏覽器之間的代理
使用
get請求
//建立ajax物件 const xhr = new XMLHttpRequest() const params = "?name=llr&age=18" ////引數一:請求方式型別|引數二:請求同源地址+引數 xhr.open('get','http://localhost:3000/jack'+params) //傳送請求 xhr.send() //獲取資源 xhr.onload=function(){ console.log(JSON.parse(xhr.responseText)); }
post請求
document.querySelector('#btn').addEventListener('click',function () { const xhr = new XMLHttpRequest() const username = document.querySelector('#username').value; const age = document.querySelector('#age').value let params = `username=${username}&age=${age}`//POST請求傳送方式 xhr.open('post',`http://localhost:3000/first`) //設定請求引數型別 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') //POST請求引數傳遞方式 xhr.send(params) xhr.onload=function(){ console.log(JSON.parse(xhr.responseText)); } })
post傳遞json
document.querySelector('#btn').addEventListener('click',function () { xhr.open('post','http://localhost:3000/first') xhr.setRequestHeader('Content-Type','application/json'); xhr.send(JSON.stringify({name:'lisi',age:18})) xhr.onload=function(){ console.log(xhr.responseText); } })
請求引數|狀態碼
Content-Type,
-
application/x-www-form-urlencoded=>傳統params(name=llr&age=18)
-
application/json=>json格式
注:傳統表單和get請求只能接受application/x-www-form-urlencoded請求格式
-
通過xhr.status獲取瀏覽器狀態碼(400),通過xhr.readyState獲取ajax狀態碼
http狀態碼
通過xhr.status獲取伺服器狀態碼
404:檢查客戶端地址是否有誤
500:檢查後端資料是否出錯
oonerror:請求無法傳送到伺服器(網路問題),並且會觸發onerror事件
readyState
//目前已被onload事件代替
//狀態碼使用xhr.readyState獲取,234狀態碼需要通過onreadystatechange事件監聽變化
0:未初始化(沒呼叫open)
1:請求已建立,未傳送(沒呼叫send)
2:請求已傳送
3:請求處理中,部分資料可以使用
4:響應已完成,可以獲取並使用伺服器響應了
傳統網站問題
-
網速慢,頁面載入時間長
-
表單提交後,一項內容不合格,需要重新填寫所有表單內容
-
頁面跳轉重定向,造成資源浪費
應用場景
-
頁面上拉載入更多
-
列表資料無重新整理分頁
-
表單項離開焦點資料驗證
-
搜尋框提示文字下拉列表
JSONP
原理:利用script標籤的src屬性
客服端 <script> //客戶端提前宣告好函式,服務端返回宣告好的函式執行,並在形參中傳遞引數 function request(params) { //params就是服務端傳過來的資料,這裡對他進行處理 console.log(params); } </script> <script src='http://localhost:3001'></script> 服務端 <script> app.get('/',(req,res)=>{ const fn = "request({name:'lisi',age:30})" res.send(fn) //也可以使用res.jsonp({name:'lisi',age:30}),不需要send就可以把資料傳遞過去 }) </script>
func必須為全域性函式
方式 $.ajax({ url:"127.0.0.1:8080", method:"get", dataType:"jsonp", success:res=>{ console.log(res) } })
CORS
只需要在伺服器中介軟體中設定res.header即可
app.use((req,res,next)=>{ res.header('Access-Control-Allow-Origin','*') res.header('Access-Control-Allow-Method','post,get') next() })
服務端跨域2
需要安裝引用第三方模組request
const request = require('request') app.get('/',(req,res)=>{ request('http://localhost:3001/cross',(err,response,body)=>{ //err:錯誤物件,成功返回null //response:伺服器端響應資訊 //body:需要跨域獲取的資料 res.send(body) }) })
跨域cookie
處於安全性考慮 ,跨域中cookie不會儲存
客服端:xhr.withCredentials = true當傳送跨域請求時,攜帶cookie資訊
服務端:res.header('Access-Control-Allow-Credentials',true)
$.ajax
$.ajax({ type:'post', url:'/user', //會自動轉換,如果是json需要自己json.strityfy(引數) data:JSON.stringify({username:'lisi'}), //預設contentType為'application/x-www-form-urlencoded' //如果需要將contentType改為json格式需要將data引數同時修改為json格式 contentType:'application/json', datatype:'jsonp', jsonp:'cb',//將地址中的callback改為cb beforeSend:function(){ //請求傳送前呼叫 return false }, success:function(data){ console.log(data) }, error:function(err){ console.log(err) } })
引數一:地址|引數二:params(可選)|引數三:成功後的回撥
$.get('http://www.example.com',{name:'zhangsan',age:30},function(){})
$.post('http://www.example.com',{name:'zhangsan',age:30},function(){})
全域性事件
$(document).on('ajaxStart',function(){})
$(document).on('ajaxComplete',function(){})
服務端RESTful API
修改jQuery中ajax的type即可
get查詢|post新增|delete刪除|