1、原生Ajax
1.1、Ajax简介
(1)Ajax全称为 Asynchronous javascript and xml,就是异步的 js 和 xml
(2)通过Ajax可以在浏览器中发送异步请求,最大优势:浏览器无刷新获取数据
(3)Ajax不是新的编程语言,而是一种将现有的标准语言组合在一起使用的新方式
1.2、XML简介
(1)可扩展标记语言
(2)被设计用来传输数据和存储数据
(3)XML和HTML类似,不同的是HTML都是预定义标签,而XML中没有预定义标签,都是自定义标签
//比如我有一个学生数据
name="孙悟空";age=18;sex="男"
用XML表示
< student>
< name> 孙悟空</ name>
< age> 18</ age>
< sex> 男</ sex>
</ student>
1.3、Ajax的特点
1.3.1 优点
(1)可以通过浏览器向服务器发出异步请求,无需刷新浏览器
(2)允许根据用户事件来更新局部的页面内容
1.3.2 缺点
(1)没有浏览历史,不能回退
(2)存在跨域问题(同源)
(3)SEO不友好
1.3.3 Ajax处理IE缓存问题
(1)解决:在url后面添加时间戳 例如:
let xhr = new XMLHttpRequest ( ) ;
xhr. open ( "get" , "url?name='+new Date()+'" )
1.3.4 Ajax解决网络请求超时处理
(1)超时设置2s
let xhr = new XMLHttpRequest ( ) ;
xhr. timeout = 2000 ;
(2)超时的回调 超过2s后无回应就执行这个回调
let xhr = new XMLHttpRequest ( ) ;
xhr. ontimeout = function ( ) {
alert ( '网络已超时' )
}
1.3.5 Ajax取消请求 使用abort()取消请求
let xhr = null ;
btn[ 0 ] . onclick = function ( ) {
xhr = new XMLHttpRequest ( ) ;
xhr. open ( 'methods' , 'url' , true ) ;
xhr. send ( ) ;
xhr. onreadystatechange = function ( ) {
if ( xhr. readyState == 4 && xhr. status == 200 ) {
alert ( '请求成功~' )
} else if ( xhr. status == 404 ) {
alert ( '未找到请求接口~' )
}
}
}
btn[ 1 ] . onclick = function ( ) {
xhr. abort ( ) ;
}
1.3.6 Ajax解决重复发送请求的问题
let btn = document. querySelectorAll ( '#button' )
let xhr = null ;
let issend = false ;
btn[ 0 ] . onclick = function ( ) {
if ( issend) xhr. abort ( ) ;
xhr = new XMLHttpRequest ( ) ;
issend = true ;
xhr. open ( 'get' , 'url' ) ;
xhr. send ( ) ;
xhr. onreadystatechange = function ( ) {
if ( xhr. readyState === 4 ) {
issend = false
}
}
}
2、jQuery中的Ajax
2.1 jQuery 发送普通的get post请求
(1)
.
g
e
t
(
u
r
l
,
p
a
r
a
m
s
,
[
c
a
l
l
b
a
c
k
]
,
[
d
a
t
a
t
y
p
e
]
)
;
.get(url,{params},[callback],[datatype]);
. g e t ( u r l , p a r a m s , [ c a l l b a c k ] , [ d a t a t y p e ] ) ; .post(url,{params},[callback],[type])
(2)说明:
url:请求url地址; params:请求携带的参数; callback:载入成功时回调函数; datatype:设置返回内容格式,如 xml,html,script,json,text,default
$. get ( 'url' , { name : 'lunlun' , sex : '女' } , function ( data ) {
console. log ( data)
} )
$. post ( 'url' , { name : 'lunlun' , sex : '女' } , function ( data ) {
console. log ( data)
} )
2.2 jQuery发送Ajax请求
$. ajax ( {
url : "url" ,
data : { params} ,
type : "GET" ,
dataType : "json" ,
success : function ( data ) {
console. log ( data)
} ,
timeout : 2000 ,
err : function ( ) {
console. log ( '出错了' )
}
} )
3、axios中的Ajax (axios支持promise)
3.1 axios发送 get post 请求
import axios from 'axios' ;
axios. defaults. baseURL = "http://192.268.1.70:8080"
axios. get ( '/axios/server' , {
params : {
id : 4 ,
name : 'lunlun'
} ,
请求头信息
headers : {
name : "lunlun" ,
age : 18
}
} ) . then ( ( res ) => {
console. log ( res)
} )
axios. get ( '/axios/server' ,
{
username : 'lunlun' ,
userpassword : 'lunlun'
} , {
params : {
id : 4 ,
name : 'lunlun'
} ,
请求头信息
headers : {
name : "lunlun" ,
age : 18
} ,
} ) . then ( ( value ) => {
console. log ( value)
} )
3.2 axios 函数发送Ajax请求
import axios from 'axios' ;
axios. defaults. baseURL = "http://192.268.1.70:8080"
axios ( {
url : "/axios/server" ,
method : "get" ,
params : {
name : "lunlun" ,
id : 2
} ,
data : {
username : "admin" ,
userpassword : "admin"
}
} ) . then ( ( value ) => {
console. log ( value)
} )