ajax简介

AJAX全称为Asynchronous JavaScript And XML，就是异步的 JS 和 XML
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势： 无刷新获取数据
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

XML是什么？

XML 可扩展标记语言，被设计用来传输和存储数据，现在传输数据用的是JSON

AJAX 的优点

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

AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO（Search Engine Optimization，搜索引擎优化）不友好，爬虫无法爬取

AJAX请求

后台

后台部分是用node的koa框架写的一些简单请求

const Koa = require('koa')
const Router=require('koa-router');
const router=new Router();
const app = new Koa()
const cors=require('koa2-cors');
const bodyParser = require('koa-bodyparser')
const port=9090
//get请求
router.get('/home',async(ctx)=>{
    const data={
        name:'cyw',
        age:20
    }
    ctx.response.body=JSON.stringify(data)
    //超时处理
    setTimeout(()=>{
        ctx.response.body="超时了！"
    },2000)
})
app.use(bodyParser());
//post请求
router.post('/server',async(ctx)=>{
    ctx.response.body="post请求";
    // 设置响应头，允许任意类型的头信息
   response.setHeader('Access-Control-Allow-Headers', '*');
})



//跨域
app.use(cors());
app.use(router.routes(),router.allowedMethods());
app.listen(port,()=>{
    console.log('Server is running at http://localhost:'+port);
})

get请求

请求其实就是分四步：

创建XMLHttpRequest对象xhr
xhr.open
xhr.send
xhr.onreadystatechange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #content{
        width:200px;
        height:200px;
       } 
    </style>
</head>
<body>
    <textarea id="content"></textarea>
    <button>发送请求</button>
    <button>取消请求</button>
    <script>
     const btn=document.getElementsByTagName('button')[0];
     const btn1=document.getElementsByTagName('button')[1];
     const res=document.getElementById('content'); 
     //创建对象
     let xhr=null;
     // 标识是否正在发送 AJAX 请求
     let isSending = false;
     btn.onclick=function(){
   // 若上一个请求尚未完成，则手动取消请求
    if (isSending) {
        console.log('123')
        xhr.abort();
    }
   
    xhr=new XMLHttpRequest() 
    isSending=true
     //初始化，设置请求方法和url
     xhr.open('GET','http://127.0.0.1:9090/home?a=1&b=2&c=3')
     //发送
     xhr.send()
   //超时处理
    // xhr.timeout = 1000;
  // 设置超时回调
  /*
    xhr.ontimeout = () => {
    alert('请求超时！');
    };
    */
     //事件绑定，处理服务器返回结果
     xhr.onreadystatechange=function(){
        if (this.readyState === 4) {
             // 请求响应完毕后，修改变量标识
            isSending = false;
            // 2xx 成功
            if (this.status >= 200 && this.status < 300) {
                // 状态码、状态字符串
                console.log(this.status); // 200
                console.log(this.statusText); // OK
                // 响应头
                console.log(this.getAllResponseHeaders()); // content-length: 13  content-type: text/html; charset=utf-8
                let data=JSON.parse(this.response)
                res.innerHTML=data.name

            }
        }
     }

     }
    
     btn1.addEventListener('click', () => {
       xhr.abort();
    });
    </script>
</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #res{
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <textarea id="res"></textarea>
    <button>发送请求</button>
    <script>
       const btn=document.getElementsByTagName('button')[0];
       const res=document.getElementById('res');
       btn.onclick=()=>{
        const xhr=new XMLHttpRequest()
        xhr.open('POST','http://127.0.0.1:9090/server?')
        //设置请求头
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.setRequestHeader('name', 'cyw');
        //发送
        xhr.send('a=2&b=3&c=4')
        //事件绑定，处理服务器返回结果
        xhr.onreadystatechange=function(){
        if (this.readyState === 4) {
            // 2xx 成功
            if (this.status >= 200 && this.status < 300) {
                // 状态码、状态字符串
                console.log(this.status); // 200
                console.log(this.statusText); // OK
                // 响应头
                console.log(this.getAllResponseHeaders()); // content-length: 13  content-type: text/html; charset=utf-8
               
                // 将响应体内容设置为文本
               res.innerHTML =this.response ;
            }
        }
        }
        }
     </script>
</body>
</html>

axios请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content{
         width:200px;
         height:200px;
        } 
     </style>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <textarea id="content"></textarea>
    <button>发送请求</button>
    <script>
     const btn=document.getElementsByTagName('button')[0];
     const res=document.getElementById('content'); 
     axios.defaults.baseURL = 'http://127.0.0.1:9090';
     btn.onclick=function(){
      axios.get('/home', {
     // 请求参数
     params: {
        a: 100,
        b: 200
    },
    // 请求头
    headers: {
        c: 300,
        d: 400
    }
  }).then(value => {
    console.log(value);
     });
     }
    </script>
</body>
</html>