ajax基础

最新推荐文章于 2024-11-01 13:37:40 发布

susanand

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量1.6k

点赞数 43

文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/susanand/article/details/137874406

版权

XML简介

XML可扩展标记语言；被设计用来传输和存储数据；XML和HTML类似，不同的是HTML都是预定义标签，XML都是自定义标签，用来表示一些数据。

AjAx的特点

优点

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

缺点

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

Chrome网络控制台查看通信报文

在network中可以查看

Express框架

基本使用方法如下

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

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

//3 创建路由规则
app.get('/',(request,response)=>{
    //设置响应
    response.send("hello");
})

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

ajax请求的基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn=document.getElementsByTagName('button')[0];
        const result=document.getElementById("result");
        btn.onclick=function(){
            //1 创建对象
            
            const xhr=new XMLHttpRequest();
            //2 初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server');
            //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
                    if(xhr.status >= 200 && xhr.status<300){
                        console.log(xhr.status)
                        //处理结果 行 头 空行 体
                        //响应
                        console.log(xhr.response);
                        result.innerHTML=xhr.response;

                    }else{

                    }
                }

            }
        }
    </script>
</body>
</html>

设置请求头请求体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax请求</title>
    <style>
     #result{
        width: 200px;
        height: 100px;
        border: solid 1px #903;
     }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result=document.getElementById("result");
        result.addEventListener("mouseover",function(){
            //1 创建对象
            const xhr=new XMLHttpRequest();
            //2 初始化设置类型为URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            //设置请求头信息,     Content-Type设置请求体内的类型的；application/x-www-form-urlencoded为参数查询字符串类型      
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','atguigu');
            //3 发送，send()函数内的参数为请求体
            xhr.send('a=10&b=200&c=300');
            //4 事件绑定
            xhr.onreadystatechange=function(){
                //判断
                if (xhr.readyState===4){
                    if(xhr.status>=200 && xhr.status<300){
                        //处理服务器返回的结果
                   
                        result.innerHTML=xhr.response;
                    }
                }
            }
            


        })
    </script>
   
</body>
</html>

服务端响应json数据

htlm代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务端响应json数据</title>
    <style>
     #result{
        width: 200px;
        height: 100px;
        border: solid 1px #903;
     }
    </style>
</head>
<body>
    <div id="result"></div>
   <script>
    const result=document.getElementById('result');
    window.onkeydown=function(){
        const xhr=new XMLHttpRequest();
        //设置响应体数据的类型
        xhr.responseType='json';
        //初始化
        xhr.open('GET','http://127.0.0.1:8000/server');
        //发送
        xhr.send();
        //事件绑定
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status>=200 && xhr.status<300){
                    //1 手动对数据转化
                    // let data=JSON.parse(xhr.response);
                    // result.innerHTML=data.name;
                    //2 自动转换
                    result.innerHTML=xhr.response.name;
                }
            }
        }
    }
   </script>
   
</body>
</html>

js代码

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

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

//3 创建路由规则
app.get('/server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers",'*');
    //设置响应体
    const data={
        name:'atguigu'

    }
    //对对象进行字符串转换
    let str=JSON.stringify(data);
    response.send(str);
})

//可以接受任何类型的请求
app.post('/server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers",'*');
    //设置响应体
    response.send("hello");
})

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

ajax请求取消

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax请求取消</title>
</head>
<body>
    <button>点击发送</button>
    <button>取消</button>
    <script>
        
        const btns=document.querySelectorAll("button");
        let x=null;
        btns[0].onclick=function(){
            x=new XMLHttpRequest();
            x.open("GET",'http://127.0.0.1:8000/delay')
            x.send();
        }
        btns[1].onclick=function(){
            x.abort();
        }
    </script>
</body>
</html>

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

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

//3 创建路由规则
app.get('/delay',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    setTimeout(()=>{
        response.send('延时响应');
    },3000)
})

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

jQuery发送ajax请求

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery发送ajax请求</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送ajax请求</h2>
        <button class="btn btn-primary">get</button>
        <button class="btn btn-danger">pst</button>
        <button class="btn btn-info">通过型方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            })
        })
        $('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({
                //url
                url:'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>
</body>
</html>

//1 引入express
const { json } = require('body-parser');
const express=require('express');

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

//3 创建路由规则


app.all('/jquery-server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    const data={name:"尚硅谷"};
    response.send(JSON.stringify(data));
})


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

axios发送ajax请求

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios发送ajax请求</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
   <button>GET</button>
   <button>POST</button>
   <button>AJAX</button>
   <script>
    const btns=document.querySelectorAll('button');
    btns[0].onclick=function(){
        //GET请求
        axios.get('http://127.0.0.1:8000/axios-server',{
            //url参数
            param:{
                id:100,
                vip:7
            },
            //请求头参数
            header:{
                name:'atguigu',
                age:20
            }
        }).then(value=>{
            console.log(value)
        })
    }

    btns[2].onclick=function(){
        axios({
            method:'POST',
            url:'http://127.0.0.1:8000/axios-server',
            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);
        })
    }
   </script>
</body>
</html>

//1 引入express
const { json } = require('body-parser');
const express=require('express');

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

//3 创建路由规则


app.all('/axios-server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers",'*');
    const data={name:"尚硅谷"};
    response.send(JSON.stringify(data));
})


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

使用fetch函数发送ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch发送Ajax请求</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
   <button>ajax请求</button>
   
   <script>
   const btn=document.querySelector("button");
   btn.onclick=function(){
    fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
        //请求方法
        method:'POST',
        //请求头
        headers:{
            name:'atguigu'
        },
        //请求体
        body:'username=admin&password=admin'

    }).then(response=>{
        return response.json();
    }).then(response=>{
        console.log(response);
    })
   }
   </script>
</body>
</html>

3 同源策略

同源策略是浏览器的一种安全策略。
同源的条件：当前网页的url和ajax请求的目标资源的协议，域名，端口号，必须完全相同，违背同源策略就是跨域。ajax必须满足同源策略。

3.1如何解决跨域

JSONP：利用浏览器不限制 script 标签跨域的特性，通过 script 标签的 src 属性加载跨域文件。
request：request模块是一个Node.js第三方模块，是对http模块的封装，使用起来更加方便。使用request模块能够解决服务器端同源限制的问题，它解决跨域请求问题的基本过程。
CORS：跨域资源共享，需要后端配合设置 Access-Control-Allow-Origin 字段，允许指定的域名跨域请求数据。

原生jsonp的实践

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 原生jsonp的实践</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
   
   用户名：<input type="text" id="username">
   <p></p>
   <script>
        //获取input元素
        const input=document.querySelector('input');
        const p=document.querySelector('p');
        //声明一个handle函数
        function handle(data){
         
            input.style.border="solid 1px #f00";
            //修改p标签的提示文本
            p.innerHTML=data.msg;
        }
        //绑定事件
        input.onblur=function(){
            //获取用户的输入值
            let username=this.value;
            //向服务器端发送请求，检测用户名是否存在
            //1 创建script标签
            const script=document.createElement('script');

            //2 设置标签的src属性
            script.src='http://127.0.0.1:8000/check-username';
            //3 将script插入到文档中
            document.body.appendChild(script);

        }
   </script>
</body>
</html>

//1 引入express
const { json } = require('body-parser');
const express=require('express');

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

//3 创建路由规则


app.all('/axios-server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers",'*');
    const data={name:"尚硅谷"};
    response.send(JSON.stringify(data));
})

app.all('/fetch-server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers",'*');
    const data={name:"尚硅谷"};
    response.send(JSON.stringify(data));
})

app.all('/check-username',(request,response)=>{
     const data={
        exist:1,
        msg:"用户名已经存在"
     };
     let str=JSON.stringify(data);
     //返回结束
     response.end(`handle(${str})`);
   
})
//4 监听端口启动
app.listen(8000,()=>{
    console.log("服务器已经启动，8000端口监听中...");
})

jquert发送jsonp请求

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> jquert发送jsonp请求</title>
    <style>
        #result{
            width: 300px;
            height: 400px;
            border: solid 1px #098;

        }
    </style>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
   <button>点击发送jsonp请求</button>
   <div id="result"></div>
   <script>
       $('button').eq(0).click(function(){
        $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
            $('#result').html(
                `
                名称：${data.name},
                校区：${data.city}
                `
            )
        });
       });
   </script>
</body>
</html>

//1 引入express
const { json } = require('body-parser');
const express=require('express');

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

//3 创建路由规则


app.all('/axios-server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers",'*');
    const data={name:"尚硅谷"};
    response.send(JSON.stringify(data));
})

app.all('/fetch-server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers",'*');
    const data={name:"尚硅谷"};
    response.send(JSON.stringify(data));
})

app.all('/check-username',(request,response)=>{
     const data={
        exist:1,
        msg:"用户名已经存在"
     };
     let str=JSON.stringify(data);
     //返回结束
     response.end(`handle(${str})`);
   
})
app.all('/jquery-jsonp-server',(request,response)=>{
    const data={
       name:'尚硅谷',
       city:['北京','上海']
    };
    let str=JSON.stringify(data);
    //接收callback参数
    let cb=request.query.callback;
    //返回结束
    //使用${cb}代替原来的handle
    response.end(`${cb}(${str})`);
  
})
//4 监听端口启动
app.listen(8000,()=>{
    console.log("服务器已经启动，8000端口监听中...");
})

CORS

是什么？
cors(cross-origin resource sharing)，跨域资源共享，cors是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准新增了一组http首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
怎么工作？
cors是通过设置一个响应头来告诉浏览器，请求允许跨域，浏览器收到响应后就会对响应放行。

4 ES6

对象优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 原生jsonp的实践</title>
    
</head>
<body>
 
   <div id="result"></div>
   <script>
      const person={
        name:'jack',
        age:21,
        language:['java','js','css']
      }
      console.log(Object.keys(person));
      console.log(Object.values(person));
      console.log(Object.entries(person));

      const target ={a:1};
      const source1={b:2};
      const source2={c:3};
      //{a:1,b:2,c:3}
      //object.assign方法的第一个参数是目标对象，后面的参数是源对象，可以将源对象的数值复制到目标对象中
      Object.assign(target,source1,source2);
      console.log(target)

      //2)声明对象的简写方式
      const age=23;
      const name="zhangsan";
      const person1={age:age,name:name};
      const person2={age,name};
      console.log(person2);
      //3)对象的函数属性简写
      let person3={
        name:'jack',
        //以前
        eat:function(food){
            console.log(this.name+'在吃'+food);
        },
        eat2:food=>console.log(this.name+'在吃'+food),
        eat2(food){
            console.log(this.name+"在吃"+food);
        }    
      }
      person3.eat('西瓜');
      //4)对象拓展运算符
      //拓展运算符（...）用于取出参数对象所有可以遍历属性然后拷贝到当前对象
      //拷贝对象（深拷贝）
      let person4={name:'amy',age:15}
      let someone={...person1}
      console.log(someone)
      //（合并对象）
      let age1={age:15}
      let name1={name:'amy'}
      let person5={...age1,...name1}//如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
      console.log(person5)
   </script>
</body>
</html>

map,reduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 原生jsonp的实践</title>
    
</head>
<body>
 
   <div id="result"></div>
   <script>
    //数组中新增了map和reduce方法
    //map()：接收一个函数，将原来数组中的所有元素用这个函数处理后放进新数组中
    let arr=['1','2','3','4'];
    // arr=arr.map((item)=>{
    //     return item*2;
    // })
    arr=arr.map(item=>
         item*2
    )
    console.log(arr);
    //reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或未被赋值的元素
    
    let result=arr.reduce((a,b)=>{
        console.log("上一次对话"+a);
        console.log("当前对话"+b);
        return a+b;

    });
    console.log(result);
   </script>
</body>
</html>