ajax的特點(diǎn)
1.ajax的優(yōu)點(diǎn)
- 可以無(wú)需刷新頁(yè)面而與服務(wù)器端進(jìn)行通信。
- 允許你根據(jù)用戶事件來(lái)更新部分頁(yè)面內(nèi)容。
- AJAX的缺點(diǎn)|
- 沒有瀏覽歷史,不能回退
- 存在跨域問題(同源)
- SEO不友好
http協(xié)議
協(xié)議詳細(xì)規(guī)定了瀏覽器和萬(wàn)維網(wǎng)服務(wù)器之間相互通信的規(guī)則。
- 請(qǐng)求報(bào)文
重點(diǎn)是格式與參數(shù)
行 GET POST / 路徑 HTTP/1.1
頭 Host:atguigu.com
Cookie:name=atguigu
Content-type:
User-Agent:
空行
體 username=admin&password=admin
- 響應(yīng)報(bào)文
行 HTTP/1.1 200 ok
頭
空行
體 <html>
<head>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>
404
403
401
500
200
express框架介紹及基本使用
npm install express
新建 server.js
const express = require('express')
const app = express()
app.get('/server',(request, response)=>{
//設(shè)置響應(yīng)頭 設(shè)置允許跨域
response.setHeader('Access-Control-Allow-Origin','*')
//設(shè)置響應(yīng)體
response.send('hello AJAX')
})
app.post('/server',(request, response)=>{
//設(shè)置響應(yīng)頭 設(shè)置允許跨域
response.setHeader('Access-Control-Allow-Origin','*')
//設(shè)置響應(yīng)體
response.send('hello AJAX POST')
})
app.listen(8000,()=>{
console.log('服務(wù)器已經(jīng)啟動(dòng)，8000 端口監(jiān)聽中......')
})
AJAX請(qǐng)求的基本操作
<h1>ajax get請(qǐng)求</h1>
<button id="btn1">點(diǎn)擊發(fā)送請(qǐng)求</button>
<div id="result1"></div>
<script>
const btn1 = document.getElementById('btn1')
const result1 = document.getElementById('result')
btn1.onclick = function(){
//創(chuàng)建對(duì)象
const xhr = new XMLHttpRequest()
//初始化，設(shè)置請(qǐng)求方法和url
xhr.open('GET','http://127.0.0.1:8000/server')
//發(fā)送
xhr.send()
//事件綁定 處理服務(wù)器端返回的結(jié)果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.status); //狀態(tài)碼
console.log(xhr.statusText); //狀態(tài)字符串
console.log(xhr.getAllResponseHeaders()); //所有響應(yīng)頭
console.log(xhr.response) //響應(yīng)體
result1.innerHTML = xhr.response
}else{
}
}
}
}
</script>
AJAX設(shè)置請(qǐng)求參數(shù)
http://127.0.0.1:8000/server?a=100&b=200
AJAX發(fā)送post請(qǐng)求
<h2> AJAX post請(qǐng)求</h2>
<div id="result2"></div>
<script>
const result2 = document.getElementById('result2')
result2.onmouseover= function(){
//創(chuàng)建對(duì)象
const xhr2 = new XMLHttpRequest()
// 初始化 設(shè)置類型與url
xhr2.open('POST','http://127.0.0.1:8000/server')
//發(fā)送
xhr2.send()
//事件綁定
xhr2.onreadystatechange = function(){
//判斷
if(xhr2.readyState === 4){
if(xhr2.status >= 200 && xhr2.status < 300){
console.log(xhr2.response) //響應(yīng)體
result2.innerHTML = xhr2.response
}else{
}
}
}
}
</script>
AJAX post設(shè)置請(qǐng)求體
xhr2.send('a:100&b:200')
AJAX設(shè)置請(qǐng)求頭信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
ajax 服務(wù)端響應(yīng)json數(shù)據(jù)
//手動(dòng)對(duì)數(shù)據(jù)轉(zhuǎn)化
let data = JSON.parse(xhr.response)
result3.innerHTML = data.name
//自動(dòng)轉(zhuǎn)化
xhr.responseType = 'json'
result3.innerHTML = xhr.response.name
AJAX-IE緩存問題解決
http://127.0.0.0:8000/ie?t='+Date.now()'
網(wǎng)址后加參數(shù) ?t='+Date.now()
AJAX請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理
//超時(shí)設(shè)置
xhr.timeout = 2000 //2秒沒有響應(yīng)就取消
//超時(shí)回調(diào)
xhr.ontimeout = function(){
alert('網(wǎng)絡(luò)異常，請(qǐng)稍后重試')
}
//網(wǎng)絡(luò)異?；卣{(diào)
xhr.onerror = function(){
alert('你的網(wǎng)絡(luò)似乎出了一些問題！')
}
AJAX取消請(qǐng)求
let xhr = null;
xhr = new XMLHttpRequest()
//取消請(qǐng)求
xhr.abort()
AJAX請(qǐng)求重復(fù)發(fā)送問題
//標(biāo)識(shí)變量
let isSending = false // 是否正在發(fā)送ajax請(qǐng)求
//判斷標(biāo)識(shí)變量
if( isSending) x.abort() //如果正在發(fā)送，則取消該請(qǐng)求，創(chuàng)建一個(gè)新的請(qǐng)求
x = new XMLHttpRequest()
//修改 標(biāo)識(shí)變量的值
isSending = true
jquery發(fā)送ajax請(qǐng)求
$.get('url',{a:100.b:200}, function(data){
console.log(data)
})
$.post('url',{a:100.b:200}, function(data){
console.log(data)
})
$.ajax({
//url
url:'',
//參數(shù)
data:{a:100,b:200},
//請(qǐng)求類型
type:'GET',
//響應(yīng)體結(jié)果
dataType:'json',
//成功的回調(diào)
success:function(data){
console.log(data)
},
//失敗的回調(diào)
error:function(){},
//超時(shí)時(shí)間
timeout:2000，
//頭信息
headers:{
}
})
axios發(fā)送ajax請(qǐng)求
//配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000'
//GET請(qǐng)求
axios.get('/axios-server',{
//url參數(shù)
params:{id:100,vip:7},
//請(qǐng)求頭信息
header:{
name:'atguigu'
}
}).then(value => {
console.log(value)
})
//POST請(qǐng)求
axios.post('/axios-server',{
username:'admin',
password:'admin'
},{
//url參數(shù)
params:{id:100,vip:7},
//請(qǐng)求頭信息
header:{
name:'atguigu'
}
}).then(value => {
console.log(value)
})
跨域問題
1.jsonp
2.服務(wù)器端設(shè)置CORS響應(yīng)頭實(shí)現(xiàn)跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
response.setHeader('Access-Control-Allow-Method','*')
