1.0 ajax封装
- ajax请求数据的过程是固定的 => ajax应该封装. => 封装成插件.
- 每次请求ajax,什么东西不一样?
- 1:请求方式
- 2:url不一样
- 3:参数不一样
- 4:请求数据成功之后的做的事情不一样.(回调函数)
1.0.1 ajax 代码
<body>
<ul></ul>
<script src='js/ajax.js'></script>
<script>
const [oUl] = document.querySelectorAll('ul');
ajax({
method: 'GET',
url: 'http://192.168.x.xx:8080/ajax01/php/getNewsList.php',
// 请求数据成功之后做的事情.
success(res) {
// console.log(res);
// 服务器返回的结果
let data = JSON.parse(res);
data.forEach(({title, date}, i) => {
oUl.innerHTML += `
<li>
<a href='#'>${title}</a>
<span>${date}</span>
</li>
`
});
}
});
</script>
1.0.2 getNews.php
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
header("Access-Control-Allow-Origin:*");
$news = array(
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
);
echo json_encode($news);
1.1.0 ajax代码
<body>
<ul></ul>
<script src='js/ajax.js'></script>
<script>
const [oUl] = document.querySelectorAll('ul');
ajax({
// 请求的方式
method: 'GET',
// 服务器地址
url: 'http://192.168.x.xx:8080/ajax01/php/getNews.php',
// 请求参数。
data: 'num=5',
// 请求数据成功之后做的事情.
success(res) {
// console.log(res);
// 服务器返回的结果
let data = JSON.parse(res);
data.forEach(({title, date}, i) => {
oUl.innerHTML += `
<li>
<a href='#'>${title}</a>
<span>${date}</span>
</li>
`
});
}
});
</script>
</body>
1.1.1 getNews.php
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
header("Access-Control-Allow-Origin:*");
$num = $_GET['num'];
$news = array(
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
);
echo json_encode(array_slice($news, 0, $num));
1.2.0 ajax代码
<body>
<script src="js/ajax.js"></script>
<script>
ajax({
method: 'POST',
url: 'http://192.168.x.xx:8080/ajax01/php/1.post.php',
data: 'username=陈虹伊&age=34',
success(res) {
console.log(res);
}
});
</script>
</body>
1.post.php
<?php
header('content-text:text/html; charset="utf-8"');
error_reporting(0);
header("Access-Control-Allow-Origin:*");
//echo 1;
//$_REQUEST
$username = $_POST['username'];
$age = $_POST['age'];
echo "名字:{$username} , 年龄: {$age}";
<body>
<script src="js/ajax.js"></script>
<script>
ajax({
method: 'POST',
url: 'http://192.168.x.xx:8080/ajax01/php/1.post.php',
data: {
username: '陈虹伊',
age: 32
},
success(res) {
console.log(res);
}
});
</script>
</body>
1.post.php
<?php
header('content-text:text/html; charset="utf-8"');
error_reporting(0);
header("Access-Control-Allow-Origin:*");
//echo 1;
//$_REQUEST
$username = $_POST['username'];
$age = $_POST['age'];
echo "名字:{$username} , 年龄: {$age}";
<body>
<script src="js/ajax.js"></script>
<script>
ajax({
method: 'POST',
url: 'http://192.168.x.xx:8080/ajax01/php/getList.php',
// 将服务器返回的结果默认转换为json格式.
dataType: 'json',
success(res) {
console.log(res);
}
});
</script>
</body>
getList.php
<?php
header('content-text:text/html; charset="utf-8"');
error_reporting(0);
header("Access-Control-Allow-Origin:*");
//$arr1 = array('lily', 'momo', 'zhangsan');
$arr2 = array('username'=>'lily', 'age'=>32);
//echo 'lily,momo,zhangsan';
echo json_encode($arr2);
2.0 JQ的ajax写法
<body>
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script>
$('button').on('click', function() {
// jq的ajax方法.它封装了ajax的所有过程.我们只需要使用它时传递不同的参数即可.
$.ajax({
// 请求方式
type: 'GET',
// 服务器url
url: 'http://192.168.x.xx:8080/ajax01/php/getNewsList.php',
// 返回的数据格式
dataType: 'json',
// 设置请求头。
// headers:{
// contentType: 'application/x-www-form-urlencoded'
// },
// 请求发送的参数
// data: {
// a: 10,
// b: 20,
// },
// 超时时间.请求时长超过3秒就直接终止请求.
timeout: 3000,
// 请求数据成功之后做的事情
success(res) {
// console.log(res);
res.forEach(({title, date}, i) => {
// 老内容
let str = $('ul').html();
// 新内容
let newStr = `
<li>
<a href='#'>${title}</a>
<span>${date}</span>
</li>
`;
// 老内容 + 新内容
$('ul').html(str + newStr);
});
},
// 请求失败进行的回调
error(code) {
console.log(code);
}
});
})
</script>
</body>
2.0.1 JQ的AJAX简写方法
<body>
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script>
$('button').on('click', function() {
// get请求方法的简写.第一个参数是url,第二个参数就是请求到数据之后的回调.
// $.get('http://192.168.x.xx:8080/ajax01/php/getNewsList.php', function(res) {
// renderList(JSON.parse(res));
// });
// get请求传参num.
// $.get('http://192.168.4.79:8080/ajax01/php/getNews.php', {num: 5} ,function(res) {
// renderList(JSON.parse(res));
// });
// 请求数据成功之后做的事情,还可以写在then中.(Promise)
$.get('http://192.168.4.79:8080/ajax01/php/getNews.php', {num: 5})
.then(function(res) {
renderList(JSON.parse(res));
});
// jq的ajax方法.它封装了ajax的所有过程.我们只需要使用它时传递不同的参数即可.
// $.ajax({
// // 请求方式
// type: 'GET',
// // 服务器url
// url: 'http://192.168.4.79:8080/ajax01/php/getNewsList.php',
// // 返回的数据格式
// dataType: 'json',
// // 请求数据成功之后做的事情
// success(res) {
// console.log(res);
// 渲染ul.
// renderList(res);
// }
// });
});
// 渲染ul的方法.
function renderList(res) {
res.forEach(({title, date}, i) => {
// 老内容
let str = $('ul').html();
// 新内容
let newStr = `
<li>
<a href='#'>${title}</a>
<span>${date}</span>
</li>
`;
// 老内容 + 新内容
$('ul').html(str + newStr);
});
}
</script>
</body>
2.0.2
<body>
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script>
$('button').on('click', function() {
// get请求方法的简写.第一个参数是url,第二个参数就是请求到数据之后的回调.
$.get('http://192.168.x.xx:8080/ajax01/php/getNewsList.php', function(res) {
renderList(JSON.parse(res));
});
// get请求传参num.
$.get('http://192.168.x.xx:8080/ajax01/php/getNews.php', {num: 5} ,function(res) {
renderList(JSON.parse(res));
});
// 请求数据成功之后做的事情,还可以写在then中.(Promise)
$.get('http://192.168.x.xx:8080/ajax01/php/getNews.php', {num: 5})
.then(function(res) {
renderList(JSON.parse(res));
});
// jq的ajax方法.它封装了ajax的所有过程.我们只需要使用它时传递不同的参数即可.
$.ajax({
// 请求方式
type: 'GET',
// 服务器url
url: 'http://192.168.x.xx:8080/ajax01/php/getNewsList.php',
// 返回的数据格式
dataType: 'json',
// 请求数据成功之后做的事情
success(res) {
console.log(res);
渲染ul.
renderList(res);
}
});
});
// 渲染ul的方法.
function renderList(res) {
res.forEach(({title, date}, i) => {
// 老内容
let str = $('ul').html();
// 新内容
let newStr = `
<li>
<a href='#'>${title}</a>
<span>${date}</span>
</li>
`;
// 老内容 + 新内容
$('ul').html(str + newStr);
});
}
</script>
2.0.3
- $.ajax(); => 全写 => 可以做更多的配置项.=> 写起来麻烦一点
- $.get(); => get简写 => 没有办法配置太多配置项 => 写起来简单一点
- $.post(); => post简写 => 没有办法配置太多配置项 => 写起来简单一点
- 配置项是什么?(config)(setting)
- 如果参数是一个纯对象,则这个纯对象中的每一个属性都叫配置项.
- $.ajax()方法可以设置多少配置项?都是那些配置项?
<body>
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script>
// post的简写。第二个参数是对象,请求成功的回调写在then中。
$.post('http://192.168.x.xx:8080/ajax01/php/1.post.php', {
username: '邓京京',
age: 32
}).then(res => {
console.log(res);
});
</script>
</body>
2.0.4 Axios
<body>
<script src="js/axios.js"></script>
<script>
// axios是一个第三方的基于Promise的http库 => ajax插件 => ajax只能进行http协议请求.
// 通过axios方法进行ajax数据请求。
axios({
method: 'GET',
// get传参可以通过url传参.
// url: 'http://192.168.x.xx:8080/ajax01/php/1.get.php?username=mimi&age=32',
url: 'http://192.168.x.xx:8080/ajax01/php/1.get.php',
// get传参,还可以通过params来传递.
params: {
username: '小陈',
age: 32,
},
// post,put等请求方法发送参数用data发送
// data: 'a=10&b=20'
// 配置请求头.(和jq一致)
// headers: {'X-Requested-With': 'XMLHttpRequest'},
// 设置超时
// timeout: 3000,
// then用于书写请求数据成功之后的回调.
}).then(res => {
// res是服务器返回的一个对象(这个响应对象是经过axios封装的)
console.log('res', res);
// data属性才是服务器返回的结果.
console.log('res.data', res.data);
});
</script>
</body>
2.0.5 Axios 实现列表
<body>
<input type="text">
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script src="js/axios.js"></script>
<script>
$('button').on('click', function() {
axios({
method: 'GET',
url: 'http://192.168.x.xx:8080/ajax01/php/getNews.php',
params: {num: $('input').val()}
}).then(({data}) => {
$('ul').empty();
data.forEach(({title, date} ,i) => {
$('ul')[0].innerHTML += `
<li>
<a href='#'>${title}</a>
<span>${date}</span>
</li>
`
})
})
});
</script>
<body>
<input type="text">
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script src="js/axios.js"></script>
<script>
$('button').on('click', function() {
axios({
method: 'GET',
url: 'http://192.168.x.xx:8080/ajax01/php/getNewsList.php',
}).then(({data}) => {
data.forEach(({title, date} ,i) => {
$('ul')[0].innerHTML += `
<li>
<a href='#'>${title}</a>
<span>${date}</span>
</li>
`
})
})
})
</script>
2.0.6 Aaxios的get简写
<body>
<input type="text">
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script src="js/axios.js"></script>
<script>
$('button').on('click', function() {
// axios的简写.url是第一个参数.请求要发送的参数写在第二个参数.
axios.get('http://192.168.x.xx:8080/ajax01/php/getNews.php', {
params: {num: $('input').val()}
}).then(({data}) => {
// 请求数据成功后渲染li
renderList(data);
});
});
function renderList(data) {
// 清空ul内容
$('ul').empty();
// 循环插入li
data.forEach(({title, date} ,i) => {
$('ul')[0].innerHTML += `
<li>
<a href='#'>${title}</a>
<span>${date}</span>
</li>
`
});
}
</script>
2.0.7 Aaxios的post简写
<body>
<input type="text">
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script src="js/axios.js"></script>
<script>
$('button').on('click', function() {
// axios的简写.url是第一个参数.请求要发送的参数写在第二个参数.
// post发送参数是通过body发送的.参数通过body发送有很多格式.
// 不同的格式发送参数时的写法是不一样的.
// appliaction/x-www-form-urlencoded => 只能通过序列化字符串发送.
// application/json => 只能发json字符串.
axios.post('http://192.168.4.79:8080/ajax01/php/1.post.php', 'username=mimi&age=32')
.then(({data}) => {
renderList(data);
});
});
function renderList(data) {
console.log(data);
}
</script>
</body>
2.0.8 baseUrl
<body>
<input type="text">
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script src="js/axios.js"></script>
<script>
// 最终请求的url === baseURL + 配置项的url
// 全局配置baseURL。所有的请求都基于这个URL。
axios.defaults.baseURL = 'http://192.168.x.xx:8080/ajax01/php/';
$('button').on('click', function() {
axios({
url:'getNews.php',
method: 'GET',
params: {num: 5},
// baseURL: 'http://192.168.x.xx:8080/ajax01/php/'
}).then(({data}) => {
renderList(data)
});
axios({
url:'getNewsList.php',
method: 'GET',
// baseURL: 'http://192.168.x.xx:8080/ajax01/php/'
}).then(({data}) => {
renderList(data)
})
});
function renderList(data) {
console.log(data);
}
</script>
</body>
2.0.9 实例化Axios
<body>
<input type="text">
<button>新闻列表</button>
<ul></ul>
<script src="js/jq.js"></script>
<script src="js/axios.js"></script>
<script>
// 最终请求的url === baseURL + 配置项的url
// 全局配置baseURL。所有的请求都基于这个URL。
// axios.defaults.baseURL = 'http://192.168.x.xx:8080/ajax01/php/';
// 实例化一个requestAAA,则所有同requestAAA进行的ajax请求的baseURL都是http://aaa:8080/
// create能够填写的配置项和axios的配置项完全相同.
let requestAAA = axios.create({
baseURL: 'http://aaa:8080/',
timeout: 3000
});
// 实例化一个requstBBB, 所有通过requestBBB进行的ajax请求的baseURL都是'http://bbb:8080/'
let requestBBB = axios.create({
baseURL: 'http://bbb:8080/',
timeout: 4000
})
$('button').on('click', function() {
axios({
url:'http://aaa:8080/getNews.php'
});
requestAAA({
url: 'getNews.php'
});
// --------------------------------------------
axios({
url:'http://aaa:8080/getList.php'
});
requestAAA({
url: 'getList.php'
});
// --------------------------------------------
axios({
url:'http://bbb:8080/getNews.php'
});
requestBBB({
url: 'getNews.php'
})
// --------------------------------------------
axios({
url:'http://bbb:8080/getList.php'
});
requestBBB({
url: 'getList.php'
})
});
function renderList(data) {
console.log(data);
}
</script>
</body>
2.1.0.跨域的问题
- 跨域报错.从originA请求originB报错.
- Access to XMLHttpRequest at 'http://192.168.x.xx:8080/ajax02/php/getNewsList.php'
- from origin 'http://127.0.0.1:5500'
- has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- 跨域报错 => 不让进行某种请求. => 为了安全有这个限制.
- 同源策略 => 只有相同origin的两个文件才能进行数据通信.
- 跨域 => 违反同源策略. => 两个进行数据通信的url的origin只要是不一样的,就一定会形成跨域.
- 如何算跨域 => origin由3个部分组成,分别是协议,域名(ip),端口.只要这3个部分有其中一个不一样,都算跨域.
- http://127.0.0.1:5500/01作业.html => 前面html的url.
- http://192.168.x.xx:8080/ajax02/php/getNewsList.php => 后端的url.
- 以上两个url的origin不一样,因此,通过前端url去请求后端url,一定会形成跨域.(请求会失败).
- 本地存储和cookie有一个共同点 => 只有同源页面间才能共享本地存储和cookie存储的数据.(受同源策略影响).
2.1.1 解决跨域问题
ajax跨域解决
- 1:代理 => A请求C是跨域,B请求C不是跨域,则通过A去请求B来完成间接请求C.B就是A的代理.
- 2:cors => 通过设置一个header来完成.header("Access-Control-Allow-Origin:*") => *表示可以运行所有的origin来请求本文件
- 3:jsonp => 前端后端需要同时配合.(已经过时).(不要说jsonp了)
- 请描述下如何解决跨域.
- 请描述一下jsonp的原理.