介绍
- AJAX = 异步 JavaScript 和 XML。
- AJAX 是一种用于创建快速动态网页的技术。
- 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
- 优点
- 可以无需刷新页面而与服务器端进行通信
- 允许你根据用户事件来更新部分页面内容
- 缺点
- 没有浏览历史,不能回退
- 存在跨域问题(同源)
- SEO不友好
XML
- XML可扩展标记语言。
- 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" : "男"
}
HTTP
- HTTP(hypertext transport protocol)协议『超文本传输协议』,协议详细规定了浏览器和万维网服务器之间互相通信的规则。
请求报文
行 POST /s?ie=utf-8 HTTP/1.1
头 Host : baidu.com
Cookie: name=zhangsan
Content-type : application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
响应报文
行 HTTP/1.1 200 OK
头 Content-Type: text/html; charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<p>这是一段内容</p>
</body>
</html>
Express 框架
- 安装:npm i express
- js中的基本使用 (server.js)
//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应
//response.send('HELLO EXPRESS');
const data = {
name:'zhangSan',
age:18
};
//对对象进行字符串转换
let str = JSON.stringify(data);
response.send(str);
});
app.POST('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应
//response.send('HELLO EXPRESS');
const data = {
name:'zhangSan',
age:18
};
//对对象进行字符串转换
let str = JSON.stringify(data);
response.send(str);
});
//监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000端口监听中...");
})
- 运行: node server.js
- 其他 js文件 调用server.js中的接口
Get 方法
//绑定事件
btn.onclick = function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
//3.发送
xhr.send();
//4事件绑定 处理服务端返回的结果
//on when当...时候
//readystate 是xhr对象中的属性,表示状态 0 1 2 3 4
//change 改变
xhr.onreadystatechange = function(){
//判断(服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码200 404 403 401 500
//2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//1.响应行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
}else{
}
}
}
}
Post 方法
//绑定事件
btn.onclick = function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//超时回调
xhr.ontimeout = function(){
alert("网络异常,请稍后重试!");
}
//网路异常回调
xhr.onerror = function(){
alert("你的网络似乎出了一些问题!"):
}
//2.初始化设置请求方法和url
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.setRequestHeader("name","zhangsan");
//3.发送
//xhr.send('a=100&b=200&c=300');
//xhr.send('a:100&b:200&c:300');
xhr.send('100');
//4事件绑定 处理服务端返回的结果
//on when当...时候
//readystate 是xhr对象中的属性,表示状态 0 1 2 3 4
//change 改变
xhr.onreadystatechange = function(){
//判断(服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码200 404 403 401 500
//2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//1.响应行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
}else{
}
}
}
//取消请求
//xhr.abort();
}
jQuery中的Ajax
- jQuery 库是一个 JavaScript 文件,可以使用 HTML 的 <script> 标签引用它
<head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js">
</script>
</head>
Get 、POST 方法
/*
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
url : 请求的url地址
data : 请求携带的参数
callback : 载入成功时的回调函数
type : 设置返回内容格式, xml,html,script,json,text,_default
*/
$.get('http://127.0.0.1:8000/server',{a:100,b:100},function(data){
console.log(data);
});
$.post('http://127.0.0.1:8000/server',{a:100,b:100},function(data){
console.log(data);
},'json');
通用方法
$.ajax({
// url
url: 'http://127.0.0.1:8000/server',
// 参数
data: {a:100,b:100},
// 请求类型: GET 、 POST
type: 'POST',
// 响应体结果
dataType: 'json',
// 成功时回调
success: function(data){
console.log(data);
},
// 超时时间
timeout: 2000,
// 失败时回调
error: function(){
console.log("失败");
},
// 头信息
headers:{
c:300,
d:400
}
});
Axios 发送 Ajax 请求
- Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
- Github开源地址: https://github.com/axios/axios
Axios 安装方法
- 使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 或 <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
- 使用 npm: npm install axios
- 使用 bower: bower install axios
- 使用 yarn: yarn add axios
Get 、POST 方法
axios.defaults.baseURL = 'http://127.0.0.1:8000';
axios.get('/server',{
//URL参数
params:{
a: 100,
b: 200
},
// 头信息
headers:{
c: 300,
d: 400
}
}).then(value =>{
console.log(value);
});
axios.post('/server',{
//请求体
username:'zhangsan',
password:'123456'
},{
//URL参数
params:{
a: 100,
b: 200
},
// 头信息
headers:{
c: 300,
d: 400
}
}).then(value =>{
console.log(value);
});
通用方式
axios.defaults.baseURL = 'http://127.0.0.1:8000';
axios({
//请求方法
method: 'POST',
//url
url: '/server',
//URL参数
params: {
a: 100,
b: 200
},
// 头信息
headers: {
c: 300,
d: 400
}
// 请求体
data: {
username:'zhangsan',
password:'123456'
}
}).then(response =>{
console.log(response);
});
Fetch 发送 Ajax
- fetch()是XMLHttpRequest的升级版,用于在JavaScript脚本里面发出 HTTP请求
fetch('http://127.0.0.1:8000/server?a=100&b=200',{
//请求方法
method:"POST",
// 头信息
headers: {
c: 300,
d: 400
},
// 请求体
body: "username=zhangsan&password=123456"
}).then(response =>{
return response.json();
}).then(response =>{
console.log(response);
});