AJAX的学习

AJAX的特点

AJAX的优点

1. 可以无需刷新页面而与服务器端进行通信。
2. 允许你根据用户事件来更新部分页面内容。

AJAX的缺点

1. 没有浏览历史，不能回退

2. 存在跨域问题(同源)

3. SEO不友好(爬虫) 不能在网页中找到信息

请求/响应报文:
行
头
空行
体

AJAX的简单使用(get请求)

在express框架的使用

1. 安装express框架

a.初始化:
npm init --yes 来获得package.json文件

b.安装express框架:
npm i express
可以通过express -v检查版本

2.在项目里添加一个js文件,在其中引入express框架并使用(本人设置为express.js)

3.启动服务器
a.在终端输入:
node express.js
b.在浏览器里打开
http://127.0.0.1:8000/
便获得以下数据

4.向服务器请求数据

在新建的html文件中添加Ajax请求,绑定在button标签上,点击即可获得请求

如何在Ajax中传递参数:
在open方法后添加 ? 参数=参数值 & 参数=参数值,便可传参
例如:
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');

AJAX的请求

post请求

只需将open方法的请求改为POST,并在服务器中添加post方法


post请求参数:
在xhr.send()方法中进行传递

xhr.send('a=100 & b=200');

设置请求头

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
若要设置自定义请求头,则
1.xhr.setRequestHeader('hhh','hhhhhhhhhh');
2.将服务器的post方法换为all

app.all('/server',(request,response)=>{
	response.setHeader('Access-Control-Allow-Origin','*');  //设置响应头
	response.setHeader('Access-Control-Allow-Headers','*');
	response.send('hello,world');    //对响应报文的封装
})

3.在服务器的all方法中添加
response.setHeader('Access-Control-Allow-Headers','*');

将请求的数据变为json格式

1.手动
let data=JSON.parse(xhr.response);
2.自动

网络异常的处理
假设在服务器设置了3s后发送响应报文

取消发送
abort();

JQuery发送ajax请求

jQuery通用方法

axios发送ajax请求

cdn引入:
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

设置baseURL

defaults为全局设置
axios.defaults.baseURL='http://127.0.0.1:8000';
url的写法便可写为

可以插入promise语法

其他拓展:

axios函数方法发送ajax请求

有时候,我们可能需求同时发送多个请求,使用axios.all,可以放入多个请求的数组
axios.all()返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1, res2

axios.all(
  [
    axios({
    url:'http://123.207.32.32:8000/home/multidata',
    params:{
    page:1
  }})
  ,axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
]
)
.then(axios.spread((res1,res2)=>{
    console.log(res1);
    console.log(res2);
}))

创建axios实例

我们一般不使用全局axios而是创建实例

const instance1=axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000

})

instance1({     //便可以用instance来使用上面的实例,而不是使用全局的配置
    url:'/category'

}).then((res)=>{
  console.log(res);
})

但这样同样会使项目的main.js更加沉重,所以我们可以把实例分离出去
在新建的js文件中:

import axios from 'axios'


export function request(config,success,failure){
        //创建实例
        const instance =axios.create({
            baseURL:'http://123.207.32.32:8000',
            timeout:5000
        })
        //发送真正的网络请求
        instance(config)
}

或者封装在一个函数中：
export function  getnavbarlist(){
    return request(
        {
            url:'/home/multidata'
        })
}

在main.js中对js的request函数进行引用

import { request } from '../src/network/request'

request(
  {url:'/home/multidata'},
  res=>console.log(res),
  err=>console.log(err)
)

或者
getnavbarlist().then(res=>
      {
        console.log(res);
        }
      )

我们可以直接return instance(config)即可,因为其自带promise

import axios from 'axios'


export function request(config){
       
            const instance =axios.create({
                baseURL:'http://123.207.32.32:8000',
                timeout:5000
            })
            //发送真正的网络请求
            return instance(config)     //会返回一个promise
        }

axios拦截器

instance.interceptors.request.use(config=>{
                console.log(config)
                return config
            },
            bbb=>{console.log(bbb)});

instance.interceptors.response.use(res=>{
               console.log(res);
               return res.data
           },
           err=>{
               console.log(err)
           })

fetch函数方法发送ajax请求

解决跨域问题

展现本地文件

const express =require('express');
//2.创建对象
const app =express();

app.get('/home',(request,response)=>{
	response.sendFile( __dirname  +  '/index.html');  
	//__dirname获取绝对路径
});

app.listen(9000,()=>{
	console.log('55555~,服务器已经启动');
})

jsonp(还没懂)

:为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。