AJAX知识点总结

原生AJAX

AJAX简介

AJAX是异步的JS和XML；

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势就是：无刷新获取数据

AJAX不是一门新的编程语言，只是一种将现有的标准组合在一起使用的新方式；

XML简介

可扩展标记语言，被设计用来传输和存储数据，与HTML类似，但是XML中没有预定义的标签，其标签都是自定义好的

AJAX的特点

AJAX的优点

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

AJAX的缺点

1. 没有浏览历史，不能回退；
2. 存在跨域问题（同源）；
3. SEO不友好

HTTP协议

请求报文

重点是格式与参数

行          GET     url路径     HTTP版本
头          Host      Cookie    Content-type    User-Agent
空行
体          GET请求时为空，POST请求时可以不为空

响应报文

重点是格式与参数

行          HTTP版本    响应代码如200   响应字符串如'OK'
头          Content-type    Content-length      Content-encoding
空行
体          主要返回结果

express基本使用

// 1、引入express
const express=require('express')

// 2、创建应用对象
const app=express()

// 3、创建路由规则
app.get('/server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    response.send('HELLO EXPRESS')
})

//4、监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中...")
})

AJAX基本操作

// 1、创建对象
const xhr=new XMLHttpRequest();
// 2、初始化，设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server')
// 3、发送
xhr.send()
// 4、事件绑定，处理服务器返回的结果
// readystate表示xhr对象中的属性，它表示状态
// 0：未初始化
// 1：open方法调用完毕
// 2：send方法调用完毕
// 3：服务端返回了部分的结果
// 4：服务端返回了所有的结果
xhr.onreadystatechange=function(){
    //判断（服务端返回所有的结果）
    if(xhr.readyState===4){
        if(xhr.state>=200&&xhr.state<300){
            //处理结果
            // 1、响应行
            console.log(xhr.status);//返回响应状态码
            console.log(xhr.statusText)//返回响应字符串，如“ok”
            console.log(xhr.getAllResponseHeaders)//返回所有的响应头
            console.log(xhr.response)//返回响应体
        }
    }
}

超时设置

xhr.timeout=2000//超过2s如果还没接收到东西自动取消请求

超时回调

xhr.ontimeout=function(){
    alert("网络异常，请稍后重试")
}

网络异常回调

xhr.onerror=function(){
    alert("您的网络似乎出了一些问题")
}

AJAX手动取消

xhr.abort()

Axios：AJAX工具包

首先安装好axios，或者引入axios

发送get请求

axios.get('http://127.0.0.1:8000/axios-server',{
    //url参数
    params:{
        id:100,
        vip:7
    },
    //请求头信息
    headers:{
        name:'at',
        asge:20
    }
})

fetch

用axios差不多，但是用的地方不多

跨域

同源策略

同源策略是浏览器的一种安全策略

同源：协议、域名、端口号 必须完全相同

ajax必须遵循同源策略，违背同源策略就是跨域

如何解决跨域

JSONP（只支持get请求）

CORS

CORS通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后就会对该响应进行处理