发请求方式 | 请求方法 | 缺陷 |
---|---|---|
form | GET、POST | 刷新页面或新开页面 |
a | GET | 刷新页面或新开页面 |
img | GET | 以图片展示,需要加载一张图片 |
link | GET | 以CSS、favicon形式展示 |
script | GET | 只能以JS脚本运行,JSONP原理 |
使用 form 表单的action
向指定 url 发请求,会刷新页面或新开页面。
使用
标签的 href
属性发__GET__请求,会刷新页面或新开页面。
使用
标签的src
属性发__GET__请求,只能以图片形式展示。
使用
标签的href
属性发__GET__请求,只能以CSS、favicon 的形式展示
使用
标签的src
属性发__GET__请求,只能以脚本形式运行,JSONP重点:XMLHttpRequest 对象用来在浏览器和服务器之间进行数据传输
使用 XMLHttpRequest 对象,首先需要生成一个实例。
let request = new XMLHttpRequest();
三个参数分别对应:
request.send()用来向请求路径发送数据。当请求有数据发送时,参数为所发送的数据。
同步请求会等全部响应完毕再返回,异步请求直接返回该方法。
readyState属性返回一个 XMLHttpRequest 代理当前所处的状态。
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT | 代理被创建,但尚未调用 open() 方法。 |
1 | OPENED | open() 方法已经被调用。 |
2 | HEADERS_RECEIVED | send() 方法已经被调用,并且头部和状态已经可获得。 |
3 | LOADING | 下载中; responseText 属性已经包含部分数据。 |
4 | DONE | 下载操作已完成。 |
onreadystatechange属性监听 readyState 的值(监听 XMLHttpRequest代理的状态),当值发生变化(状态变化),对不同的状态执行相应的回调函数。
以上4个方法/属性就可以完成一个AJAX的请求
request.setRequestHeader()方法:在发送请求之前设置请求头,对应http请求的第二部分。
request.setRequestHeader('Content-Type','x-www-form-urlencoded')
request.responseText 属性就是 AJAX 中后端返回的数据,一般是 JSON 格式的字符串。
步骤:
<script>
// 1. 创建 xhr 对象
const xhr = new XMLHttpRequest();
// console.log(xhr);
// 2.监听 xhr.onreadystatechange 事件
xhr.addEventListener('load', function () {
// 监听 xhr 对象的请求状态 readyState ;与服务器响应的状态 status
if (xhr.status === 200) {
//打印服务器响应回来的数据
console.log(xhr.responseText);
}
});
// 3.调用 xhr.open() 函数
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1');
// 4.调用 xhr.send() 函数
xhr.send();
</script>
步骤:
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性(固定写法)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send(),同时将数据以查询字符串的形式,提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
<script>
// 封装自己的Ajax函数
// data对象:我们需要把data函数中的对象 转化为字符串对象,从而提交给服务器 因此我们要resloveData函数:
// resloveData()思路先定义一个数组 ;然后循环数组data中的元素,并将元素通过push方法将键值对压进我们新定义的数组中;循环结束后将元素用户&连接
function resolveData(data) {
let arr = [];
for (let k in data) {
arr.push(k + '=' + data[k]);
console.log(k + '=' + data[k]);
}
return arr.join('&');
}
var test = resolveData({ name: '张三', age: 18 });
console.log(test);
function myAjax(optins) {
const xhr = new XMLHttpRequest();
// 调用resolveData()函数并指定一个变量来接收拼接好的字符串
const val = resolveData(optins.data);
// xhr添加监听事件然后获取附属器上的数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 400 && xhr.status == 200) {
var res = JSON.parse(xhr.responseText);
options.success(result);
// 判断请求的类型
if (options.method.toUpperCase() == 'GET') {
// 发起get请求
xhr.open('GET', 'optioms.URL?s');
xhr.send();
} else if (options.method.toUpperCase() == 'POST') {
// 发起post请求
xhr.send('POST', 'options.URL');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(val);
}
}
};
}
</script>
axios.get('url', { params: { /*参数*/ } }).then(callback)
具体的请求示例如下:
// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {
// res.data 是服务器返回的数据
var result = res.data
console.log(res)
})
axios.post('url', { /*参数*/ }).then(callback)
具体的请求示例如下:
// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {
// res.data 是服务器返回的数据
var result = res.data
console.log(result)
})
axios 也提供了类似于 jQuery 中 $.ajax() 的函数,语法如下:
axios({
method: '请求类型',
url: '请求的URL地址',
data: { /* POST数据 */ },
params: { /* GET参数 */ }
}) .then(callback)
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/get',
params: { // GET 参数要通过 params 属性提供
name: 'zs',
age: 20
}
}).then(function(res) {
console.log(res.data)
})
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: { // POST 数据要通过 data 属性提供
bookname: '程序员的自我修养',
price: 666
}
}).then(function(res) {
console.log(res.data)
})
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("http://www.liulongbin.top:3006/api/get",function(data,status){
alert("数据:" + data + "\n状态:" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP GET 请求,然后获得返回的结果</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("http://www.liulongbin.top:3006/api/post",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("数据:" + data + "\n状态:" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP POST 请求,并获得返回的结果</button>
</body>
</html>
由于浏览器同源策略,AJAX 不能访问不同源的资源。这时候,就需要跨域。
关于同源策略现阶段一般用两种方法跨域:
JSONP的最基本的原理是:动态添加一个标签,而script标签的src属性是没有跨域的限制的。
标签,通过设置
标签的 src
属性对 src
指向的网站发起请求。
标签的 src
中,告知后端要执行的回调函数在实际使用中,通过两个约定来规范 JSONP 的使用:
?callback=函数名
JSOPN跨域请求例子:
function JSONP(path){
// 创建一个 script 标签
let script = document.createElement("script")
// 随机生成回调函数名
let functionName = 'callback' + parseInt(Math.random()*100000,10)
// 定义回调函数,处理获得的数据
window[functionName] = function(data){
console.log('获取的数据是:')
console.log(data)
alert('请求成功。')
}
// 设置JSONP请求路径
script.src = path + "?callback=" + functionName
// 将 script 标签插入到页面中
document.body.appendChild(script)
// 请求完成之后,删除回调函数,节约内存
delete window[functionName]
}
CORS 是解决跨域数据请求的终极解决方案
原理:CORS 跨域的使用方式是在后端代码中设置响应头,将响应资源的响应头设置成请求页面的源(间接使要响应的资源与请求同源)
response.setHeader('Access-Control-Allow-Origin', '发送请求的源地址')