AJAX基础与进阶

一、express基本使用

1. 在最外层启动终端，添加文件

2. 创建 express 框架

// 1. 引入express
const express = require('express');//  2. 创建应用对象
const app = express();// 3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/' , (express,request)=>{// 设置响应response.send('HELLO EXPRESS');
});// 4. 监听端口启动服务
app.listen(8000, ()=>{console.log("服务已启动，8000 端口监听中....");
});

3. 右击这里点开在终端打开

4. 输入node express基本使用·js

5. 打开浏览器搜索网址127.0.0.1:8000

注意：这三个文件都要有，一个没有都不可以

二、原生AJAX

1. 前端准备

2.服务端准备（express框架）

tip ：8000端口已经被占用

在node中按Ctrl C 关闭八千端

回到原来终端，在用node 文件名，实现运行

tip ：看到 xhr 一般要想到ajax

3. get

响应头只要是2开头的都表示成功

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET 请求</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result");//绑定事件btn.onclick = function(){//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化 设置请求方法和 urlxhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');//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){//处理结果  行 头 空行 体//响应 // console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//响应体//设置 result 的文本result.innerHTML = xhr.response;}else{}}}}</script>
</body>
</html>

4.get请求中设置参数

在 url 后面缀参数，用问号分隔，多个参数之间用 & 分隔

5.post

js代码修改之后，需要重新调用后台，Ctrl C关闭之前端口，重新启用新端口

6. post请求中设置参数

7. 设置请求头

8.JSON

注意：send（）只能接受字符串类型，想要传递对象等其他类型，则必须进行转换

1. 黄框中的响应头，可以设置任意的响应头，自定义的也可以

2. 红框中，将对象转变成字符串，使得send可以传递对象

获取复杂的字符串数据

9. IE缓存

针对 IE 缓存的 JS 代码

HTML代码

10. 请求超时和网络异常处理

timeout 超时取消（超时的话，取消该操作）

11. 取消请求

用 abort

12. 重复发送请求

一旦结果是false，就不会发送新的请求

三、jQuery 中的AJAX

1. get 与 post

加 json 会变为对象，不加的话处理完会变成字符串

        $('button').eq(0).click(function(){$.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){console.log(data);},'json');});$('button').eq(1).click(function(){$.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){console.log(data);});});

2. 通用方法

将响应体从字符串变为对象

   <script>$('button').eq(0).click(function(){$.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){console.log(data);},'json');});$('button').eq(1).click(function(){$.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){console.log(data);});});$('button').eq(2).click(function(){$.ajax({//urlurl: 'http://127.0.0.1:8000/jquery-server',//参数data: {a:100, b:200},//请求类型type: 'GET',//响应体结果dataType: 'json',//成功的回调success: function(data){console.log(data);},//超时时间timeout: 2000,//失败的回调error: function(){console.log('出错啦!!');},//头信息headers: {c:300,d:400}});});</script>

四、axios

1. 发送AJAX请求

① get

② post

1. 先url 2. 再请求体 3. 再其他配置

③ 通用方式

 btns[2].onclick = function(){axios({//请求方法method : 'POST',//urlurl: '/axios-server',//url参数params: {vip:10,level:30},//头信息headers: {a:100,b:200},//请求体参数data: {username: 'admin',password: 'admin'}}).then(response=>{//响应状态码console.log(response.status);//响应状态字符串console.log(response.statusText);//响应头信息console.log(response.headers);//响应体console.log(response.data);})}