get , post,head, put,delete,option,...等等
使用原生javascript提供的数据请求:
//四部曲:
//1.创建ajax对象
var request = new XMLHttpRequest();
//2.ajax的open方法
request.open("get", "http://10.0.152.17/AJAX/ajaxtest", true);
/*
1.第一个参数:GET/POST请求数据--默认GET方法,
2.open的第二个参数:接口地址
3.open的第三个参数:是否异步 为true时,服务器请求异步进行
*/
//3. ajax的send方法 就绪状态码:就绪状态--0(初始化) 1(请求建立) 2(发送完成) 3(解析) 4(完成)
request.send( )
//4 设置回调函数
request.onreadystatechange = function(){
if(request.readyState == 4 && ajax.status==200) {
}
}
使用别人封装好的第三方库:
目前最流行的,使用率最高的是 axios
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
var p = axios.get()
console.log( p ) // Promise
//axios方式获取到的数据:
{data: 3, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: 3 //这就是获取到的数据 同下方3
headers: {content-type: "text/html; charset=UTF-8"}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: "OK"
__proto__: Object
//fetch方式获取到的数据:
3 //同上方的data中的值 直接就会得到结果
因此:axios会比fetch的安全性更高一些。
Axios总结
// A: 无参数
axios.get(url)
.then(res=>console.log(res))
.catch(error=>conosle.log(error))
// B: 有参数
axios({
url: 'http://xxx',
method: 'get' //默认就是get,这个可以省略,
params: {
key: value
}
})
// 统一设置请求头||单独设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 实例化 URLSearchParams的构造器函数得到params对象
let params = new URLSearchParams()
// params.append(key,value) 数据的传参
params.append('a',1)
params.append('b',2)
axios({
url: 'http://localhost/post.php',
method: 'post',
data: params,
headers: { //**单个请求设置请求头**
'Content-Type': "application/x-www-form-urlencoded"
}
})
.then(res => console.log( res ))//es6中一行书写可省略花括号
.catch( error => {
if( error )throw error
})
Fetch总结
//1
fetch('https://www.baidu.com/search/error.html', {
method: 'GET'
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
//2
fetch('http://localhost/get.php?a=1&b=2')
.then(res=> res.text()) // 数据格式化 res.json() res.blob()
.then(data => console.log( data ))
.catch(error => {
if( error ) throw error
})
fetch('./data.json')
.then(res=>{
res.json() //res.text() res.blob()**(在这)
})
.then( data => console.log(data))
.catch( error => console.log( error ))
fetch('https://www.baidu.com/search/error.html', {
method: 'POST' // 指定是POST请求
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
POST请求参数的传递
众所周知,POST请求的参数,不能放在URL中,目的是防止信息泄露。
fetch('https://www.baidu.com/search/error.html', {
method: 'POST',
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
完。