ajax的特点
1.ajax的优点
- 可以无需刷新页面而与服务器端进行通信。
- 允许你根据用户事件来更新部分页面内容。
- AJAX的缺点|
- 没有浏览历史,不能回退
- 存在跨域问题(同源)
- SEO不友好
http协议
协议详细规定了浏览器和万维网服务器之间相互通信的规则。
- 请求报文
重点是格式与参数
行 GET POST / 路径 HTTP/1.1
头 Host:atguigu.com
Cookie:name=atguigu
Content-type:
User-Agent:
空行
体 username=admin&password=admin
- 响应报文
行 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)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('hello AJAX')
})
app.post('/server',(request, response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('hello AJAX POST')
})
app.listen(8000,()=>{
console.log('服务器已经启动，8000 端口监听中......')
})
AJAX请求的基本操作
<h1>ajax get请求</h1>
<button id="btn1">点击发送请求</button>
<div id="result1"></div>
<script>
const btn1 = document.getElementById('btn1')
const result1 = document.getElementById('result')
btn1.onclick = function(){
//创建对象
const xhr = new XMLHttpRequest()
//初始化，设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server')
//发送
xhr.send()
//事件绑定 处理服务器端返回的结果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.status); //状态码
console.log(xhr.statusText); //状态字符串
console.log(xhr.getAllResponseHeaders()); //所有响应头
console.log(xhr.response) //响应体
result1.innerHTML = xhr.response
}else{
}
}
}
}
</script>
AJAX设置请求参数
http://127.0.0.1:8000/server?a=100&b=200
AJAX发送post请求
<h2> AJAX post请求</h2>
<div id="result2"></div>
<script>
const result2 = document.getElementById('result2')
result2.onmouseover= function(){
//创建对象
const xhr2 = new XMLHttpRequest()
// 初始化 设置类型与url
xhr2.open('POST','http://127.0.0.1:8000/server')
//发送
xhr2.send()
//事件绑定
xhr2.onreadystatechange = function(){
//判断
if(xhr2.readyState === 4){
if(xhr2.status >= 200 && xhr2.status < 300){
console.log(xhr2.response) //响应体
result2.innerHTML = xhr2.response
}else{
}
}
}
}
</script>
AJAX post设置请求体
xhr2.send('a:100&b:200')
AJAX设置请求头信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
ajax 服务端响应json数据
//手动对数据转化
let data = JSON.parse(xhr.response)
result3.innerHTML = data.name
//自动转化
xhr.responseType = 'json'
result3.innerHTML = xhr.response.name
AJAX-IE缓存问题解决
http://127.0.0.0:8000/ie?t='+Date.now()'
网址后加参数 ?t='+Date.now()
AJAX请求超时与网络异常处理
//超时设置
xhr.timeout = 2000 //2秒没有响应就取消
//超时回调
xhr.ontimeout = function(){
alert('网络异常，请稍后重试')
}
//网络异常回调
xhr.onerror = function(){
alert('你的网络似乎出了一些问题！')
}
AJAX取消请求
let xhr = null;
xhr = new XMLHttpRequest()
//取消请求
xhr.abort()
AJAX请求重复发送问题
//标识变量
let isSending = false // 是否正在发送ajax请求
//判断标识变量
if( isSending) x.abort() //如果正在发送，则取消该请求，创建一个新的请求
x = new XMLHttpRequest()
//修改 标识变量的值
isSending = true
jquery发送ajax请求
$.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:'',
//参数
data:{a:100,b:200},
//请求类型
type:'GET',
//响应体结果
dataType:'json',
//成功的回调
success:function(data){
console.log(data)
},
//失败的回调
error:function(){},
//超时时间
timeout:2000，
//头信息
headers:{
}
})
axios发送ajax请求
//配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000'
//GET请求
axios.get('/axios-server',{
//url参数
params:{id:100,vip:7},
//请求头信息
header:{
name:'atguigu'
}
}).then(value => {
console.log(value)
})
//POST请求
axios.post('/axios-server',{
username:'admin',
password:'admin'
},{
//url参数
params:{id:100,vip:7},
//请求头信息
header:{
name:'atguigu'
}
}).then(value => {
console.log(value)
})
跨域问题
1.jsonp
2.服务器端设置CORS响应头实现跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
response.setHeader('Access-Control-Allow-Method','*')
