Ajax简介
原生Ajax
Ajax简介 Ajax，全称Asynchronous JavaScript And XML，简单来说就是异步的JS和XML；通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势在于：无需刷新来获取数据。
Ajax是一种将现有标准组合在一起使用的新方式。
XML简介 XML,全称Extensible Makeup Language，被称为可拓展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。
比如说我有一个学生数据:
name ="小明"; age= 18 ; gender = "男";
用XML表示:
<student>
<name>小明</name>
<age>18</age>
<gender>男</gender>
</student>
只不过，现在已经被JSON替代了，例如上述例子用json表示：
{name :"小明"，age: 18， gender : "男"}
Ajax的特点 优点：
- 可以无需页面刷新来与服务器进行通信
- 可以根据不同功能需求，按不同事件来刷新部分页面类容
缺点：
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO（搜索引擎优化）不太友好
HTTP协议 HTTP(hypertext transport protocol)协议『超文本传输协议』﹐协议详细规定了浏览器和万维网服务器之间互相通信的规则。
请求报文 格式 参数
请求行 : 包括：请求类型（ＧＥＴ、ＰＯＳＴ）＼ＵＲＬ路径＼ＨＴＴＰ协议的版本
请求头 : 包括：Host:XXX、Cookie:XXX、Content-type:application/x-www=form-urlencoded、User-Agent:chrome 83
空行 :
请求体: get请求，请求体为空；post则可以不为空，eg:username=admin&password=admin
响应报文 格式：
响应行: 协议版本(http/1.1) 响应状态码(200) 响应字符串(OK)
响应头： Content-Type:text/hhtml；charset=utf-8;
Content-length:2048
Content-encoding:gzip
响应空行：
响应体：<html><html/>
Chrome浏览器控制台查看通信报文 列如：打开百度，搜索“你好”，查看具体的网络请求
Ajax请求的基本操作 ar btn = document.getElementsByClassName('btn')[0];
btn.onclick = () => {
// 发起Ajax 请求的步骤：
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化，设置请求的方法和url
xhr.open('GET', '127.0.0.1:8000/get')
// 3.发送
xhr.send();
// 4.事件绑定，处理服务器返回的结果
// on = when 当...时候
/* readystate是xhr对象中的属性，表示状态，共有5个值:
0(未初始化)、
1(表示open方法已经调用完毕)、
2(表示send方法已经调用完毕)、
3(表示服务端返回部分的结果)、
4(表示服务端返回所有的结果),
*/
xhr.onreadystatechange = () => {
// 判断，是否服务端返回了所有的结果
if (xhr.readyState === 4) {
// 判断响应的状态码 200 404 401 403 500
// 2XX 都是成功
if (xhr.status >= 200 && xhr.status < 300) {
// 处理响应结果，应该包括：行+头+空行+体，但一般注重响应体
console.log(xhr.status)//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有的响应头
console.log(xhr.response)//响应体
//将返回的结果进行赋值
// ....
} else {
// 处理响应失败的结果
}
}
}
}
Ajax请求中设置URL参数
// 2.初始化，设置请求的方法和url
xhr.open('GET', '127.0.0.1:8000/get?a=100&b=400')
POST请求中设置参数
xhr.open('POST', '127.0.0.1:8000/post')
// 3.发送
// POST形式的参数
// xhr.send('a=100&b=300');
xhr.send('a:100&b:300&c:1000');//请求体的格式，是非常灵活的
设置请求头
// 2.初始化，设置请求的方法和url
// xhr.open('GET', '127.0.0.1:8000/get?a=100&b=400')
xhr.open('POST', '127.0.0.1:8000/post')
// 设置请求头,接收两个参数：【头的名字，头的值】
/*
Content-Type:用来设置请求体类型的
*/
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', "aaaa")//该类型，为自定义的，如果需要，则要在后端设置允许接收的请求头类型
后端如下：
// all,可以接收任意类型的请求
app.all('/post', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置允许接收所有响应头类型
response.setHeader('Access-Control-Allow-Headers', '*')
console.log(request);
response.send("POST OK5")
})
整个实例前端代码：
btn.onclick = () => {
// 发起Ajax 请求的步骤：
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化，设置请求的方法和url
// xhr.open('GET', '127.0.0.1:8000/get?a=100&b=400')
xhr.open('POST', '127.0.0.1:8000/post')
// 3.设置请求头,接收两个参数：【头的名字，头的值】
/*
Content-Type:用来设置请求体类型的
*/
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', "aaaa")
// 4.发送
// POST形式的参数
xhr.send('a=100&b=300');
// xhr.send('a:100&b:300&c:1000');//请求体的格式，是非常灵活的
// 5.事件绑定，处理服务器返回的结果
// on = when 当...时候
/* readystate是xhr对象中的属性，表示状态，共有5个值:
0(未初始化)、
1(表示open方法已经调用完毕)、
2(表示send方法已经调用完毕)、
3(表示服务端返回部分的结果)、
4(表示服务端返回所有的结果),
*/
xhr.onreadystatechange = () => {
// 判断，是否服务端返回了所有的结果
if (xhr.readyState === 4) {
// 判断响应的状态码 200 404 401 403 500
// 2XX 都是成功
if (xhr.status >= 200 && xhr.status < 300) {
// 处理响应结果，应该包括：行+头+空行+体，但一般注重响应体
console.log(xhr.status)//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有的响应头
console.log(xhr.response)//响应体
// 设置返回结果
result.innerHTML = xhr.response
} else {
// 处理响应失败的结果
}
}
}
}
IE缓存问题
IE浏览器会对Ajax的请求结果缓存起来，当下一次请求的时候，请求的是本地的缓存，而非最新数据。因此，不利于对于时效性要求较高的场景
解决方法:在url中加个获取目前时间，浏览器每次都会它当成新的请求,eg：‘127.0.0.1:8000/IE?t=’ + Date.now()
btn.addEventListener('click', function () {
// 1.初始化对象
const xhr = new XMLHttpRequest();
// 2.设置请求方法和路径,解决方法，在url中加个获取目前时间，浏览器每次都会它当成新的请求
xhr.open('GET', '127.0.0.1:8000/IE?t=' + Date.now());
// 3.设置请求头
// 4.发送
xhr.send();
// 5.监听请求状态，对结果进行处理
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
results.innerText = xhr.response;
}
}
}
})
Ajax请求超时与网络异常处理
// 1.初始化对象
const xhr = new XMLHttpRequest();
// 超时2s,取消请求
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = () => {
alert("请求超时")
}
// 网络异常的回调
xhr.onerror = () => {
alert("网络出现异常")
}
// 2.设置请求方法和路径,解决方法，在url中加个获取目前时间，浏览器每次都会它当成新的请求
xhr.open('GET', '127.0.0.1:8000/IE?t=' + Date.now());
取消Ajax请求
let xhr = null;
btn1.onclick = () => {
console.log("发送请求")
// 发起Ajax
xhr = new XMLHttpRequest();
// 设置请求头
// 请求地址
xhr.open('GET', '127.0.0.1:8000/IE');
// 发送
xhr.send();
// 监听发送完毕
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response)
}
}
}
}
// abort
btn2.onclick = () => {
// console.log("取消请求");
xhr.abort();
}
Ajax重复发送请求的问题
解决关键：用标识符，来避免重复发送；如果正在发送，则把上一个取消掉；
const btn1 = document.getElementById('btn1');
let xhr = null;
// 用个标识符，来表示请求的状态
let isSendding = false;
btn1.onclick = () => {
console.log("发送请求")
if (isSendding) xhr.abort();//如果正在发送请求，则取消前一个请求，创建新的请求
// 发起Ajax
xhr = new XMLHttpRequest();
isSendding = true;
// 设置请求头
// 请求地址
xhr.open('GET', '127.0.0.1:8000/IE');
// 发送
xhr.send();
// 监听发送完毕
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
isSendding = false;
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response)
}
}
}
}
jQuery发送Ajax请求
<body>
<div class="container">
<button>GET方法</button>
<button>POST方法</button>
<button>通用型方法</button>
</div>
</body>
<script>
// get请求
$('button').eq(0).click(() => {
// get方法四个参数（url,参数，回调函数，响应体类型）
$.get('127.0.0.1:8000/getJosn', { a: 100, b: 100 }, data => {
console.log(data)
}, 'json')
})
// post请求
$('button').eq(1).click(() => {
$.post('127.0.0.1:8000/post', { a: 100, b: 100 }, data => {
console.log(data)
})
})
// 通用型
$('button').eq(2).click(() => {
$.ajax({
//url
url: '127.0.0.1:8000/get',
// 参数
data: {
a: 100,
b: 200
},
// 头部信
headers: {
},
// 请求类型
type: 'GET',
// 响应体类型
dataType: 'json',
// 成功的回调函数
success: data => {
console.log(data)
},
// 超时
timeout: 2000,
error: err => {
console.log(err)
}
})
})
</script>
Axios发送Ajax请求
<body>
<button>GET</button>
<button>POST</button>
<button>Ajax</button>
</body>
<script>
let btn = document.querySelectorAll('button');
// 配置baseUrl
axios.defaults
btn[0].onclick = () => {
axios.get('127.0.0.1:8000/getJosn',
{
// url参数
params: {
id: 100,
name: 'sss'
},
// 请求头参数
headers: {
age: 20
}
})
.then(
value => {
console.log(value)
}
)
}
btn[1].onclick = () => {
axios.post('127.0.0.1:8000/post', {
data: {
name: '小红',
age: '18'
}
}, {
// url参数
params: {
id: 100,
pwd: 123456
},
header: {
authurion: "ssdshsjcns",
}
})
}
// axios通用方式，发送Ajax请求
btn[2].onclick = () => {
axios({
url: '127.0.0.1:8000/get',
method: 'GET',
params: {
id: 100
},
data: {
abc: 100
}
})
}
</script>
使用fetch函数发送Ajax请求
const btn = document.querySelector( ' button');
btn.onclick = function()i
fetch( '127.0.0.1:8000/fetch-server?vip=10', i
//请求方法
method: "POST',//请求头
headers: {
name: "atguigu'}.
//请求体
body: 'username=admin&password=admin'
})
.then(response => i
return response.text();
})
.then(response=>{
console.log(response)
});
}
跨域
同源策略 同源策略(Same-Origin Policy)最早由Netscape公司提出，是浏览器的一种安全策略。同源策略(同源策略)最早由Netscape公司提出，是浏览器的一种安全策略。
同源:协议、域名、端口号必须完全相同。
违背同源策略就是跨域。
如何解决跨域
JSONP是什么？ JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。
JSONP的工作原理？ 在网页有一些标签天生具有跨域能力，比如:img link iframe script.
JSONP就是利用script标签的跨域能力来发送请求的。
JSON如何使用？ 返回函数调用，让前端对该函数进行处理
前端：
<body>
用户名：<input type="text">
<p id="tips"></p>
</body>
<script>
const input = document.querySelectorAll('input');
const p = document.querySelectorAll('p');
function handle(data) {
console.log(data.name);
p[0].innerHTML = data.msg;
}
input[0].onblur = () => {
console.log('a')
// 先获取用户输入的值
let value = this.value;
// 发送该值的请求，在服务器检测该值是否符合
// 1.先创建script标签
const script = document.createElement('script');
// 2.设置src属性
script.src = '127.0.0.1:8000/jsonp';
// 3.将script标签插入文档中
document.body.appendChild(script);
}
</script>
后端：
app.all('/jsonp', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置允许接收所有响应头类型
response.setHeader('Access-Control-Allow-Headers', '*')
// console.log(request);
data = {
name: '小红',
msg: '昵称已使用'
}
let str = JSON.stringify(data);
response.send(`handle(${str})`)
})
jQuery如何发送jsonp请求 注意：要在请求url中带上callback=?
<button>jquery发送jsonp请求</button>
<textarea id="result" name="" id="" cols="30" rows="10"></textarea>
<script>
$('button').eq(0).click(() => {
console.log('a')
// 注意使用jquery发送JSONp请求的时候，url地址后要带上：callback=?
$.getJSON('127.0.0.1:8000/jsonps?callback=?', data => {
console.log(data);
$('#result').html(`名称：${data.name}`)
})
})
</script>
服务器返回：也要先接收callback参数，再按执行函数的格式返回
app.all('/jsonps', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置允许接收所有响应头类型
response.setHeader('Access-Control-Allow-Headers', '*')
// console.log(request);
data = {
name: '小红',
msg: '昵称已使用'
}
let str = JSON.stringify(data);
// 接收callback参数
let cb = request.query.callback;
response.end(`${cb}(${str})`)
})
CORS
CORS是什么？ 具体参见：Cross-Origin Resource Sharing (CORS) - HTTP | MDN (mozilla)
CORS (Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和 post 请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS的工作原理？ CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
CORS的使用方法？ 通过在服务端设置发送请求的请求头、请求方式等信，来使用；
//设置响应头
response.setHeader( "Access-Control-Allow-origin","*");
response.setHeader("Access-Control-Allow-Headers", '*');
response.setHeader("Access-Control-Allow-Method",'*');
CORS的使用方法？ 通过在服务端设置发送请求的请求头、请求方式等信，来使用：
//设置响应头
response.setHeader( "Access-Control-Allow-origin","*");
response.setHeader("Access-Control-Allow-Headers", '*');
response.setHeader("Access-Control-Allow-Method",'*');
本文标签：
简介ajax
发表评论