AJAX

Echo2024-05-012024-05-01

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的Web开发技术。它允许在不重新加载整个网页的情况下，通过使用JavaScript和XML或其他数据格式，与服务器进行异步数据交换。

AJAX

1.简介

AJAX 异步，就是页面不跳转就能把数据和结果带回来，页面无刷新获取数据。

优点

无刷新获取数据
根据用户事件来更新部分页面内容
缺点

没有浏览记录不能回退
存在跨域问题
SEO不友好爬虫爬不到

1.1XML简介

XML 和HTML相同都是语义标签 HTML是预定义好的标签 XML可以自己定义

XML表示学生数据

<student>
    <name>张三</name>
    <age>19</age>
    <gender>男</gender>
</student>

1.2 AJAX 的使用

搭建一个测试AJAX的服务器

const express=require('express');
const app=express();

//暴露静态资源
app.use(express.static(__dirname+'/src'));

//获取小试牛刀的get请求 然后做出响应
app.get('/get',(request,response)=>{
    response.send('我是get请求返回的界面');
})
app.listen(8000,function(err){
    if(!err){
        console.log('测试ajax请求的服务器成功了');

//指定请求的那个网页的端口号要跟服务的端口号保持在同一位置
console.log(‘http:127.0.0.1:8000/1小试牛刀.html’);
}

} )


- 请求服务的html

```js
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>1_ajax小试牛刀</title>
        <style>
            #content{
                width: 300px;
                height: 100px;
                border: 1px solid black;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <h3>该页面是测试：ajax小试牛刀</h3>
        <button id="btn">点我发送请求(原生js-ajax-get)</button>
        <div id="content"></div>




--------------------------------重点部分-------------------------------
        <script type="text/javascript" >
            //获取按钮
            const btn = document.getElementById('btn')
            const content = document.getElementById('content')
            //给按钮绑定监听
            btn.onclick = ()=>{
                //1.创建xhr实例对象
                const xhr = new XMLHttpRequest()

                //on  当xxx时候
                //ready 准备
                //state 状态
                //change 状态
                //xhr内部有5种状态，值分别为：0、1、2、3、4
                //xhr实例对象，在实例出来的那一刻状态就是0
                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState === 4){
                        console.log(xhr.response);
                        content.innerHTML = `<h3>${xhr.response}</h3>`
                    }
                }

                //2.指定发送请求的：method、url
                xhr.open('GET','http://127.0.0.1:8000/get')

                //3.发送请求
                xhr.send()
            }
        </script>

----------------------------------------------------------------------------



    </body>
</html>

1.3 xhr的五种状态（了解）

xhr理解为一个能帮我们从服务器拿东西的人每做一步就会有一种状态就会有一个对应的状态值。

五种状态值为

当xhr被实例化出现的那一刻的状态的就是0
open请求已经发送了，但是send还没有调用，此时还能修改请求头的内容
1
2
//2.指定发送请求的：method、url
xhr.open('GET','http://127.0.0.1:8000/get')
send( )已经调用了，请求没法修改了

已经回来一部分数据了小的数据会在此阶段一次性接受完毕，较大的数据有待进一步接收，整个一定会包含请求头

数据全部接收完毕

1.4 get 请求

带参数的get请求包含两种参数

1，query参数

2，parmas参数

下面是两种代码的js的发送方式

js代码

//引入express
const express = require('express')
const cors = require('cors')

//创建app实例对象
const app = express()
//使用中间件解析urlencoded编码形式的请求体参数
app.use(express.urlencoded({extended:true}))
//使用中间件解析json编码形式的请求体参数
app.use(express.json())
app.use(cors())

//暴露静态资源
app.use(express.static(__dirname+'/src'))

//响应GET请求--可以接收query参数
app.get('/test_get',(request,response)=>{
    console.log('有人请求test_get了--携带的query参数是：',request.query);
    /* response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Expose-Headers','*') */
    response.send('hello_test_get')
})

//响应GET请求--可以接收params参数
app.get('/test_get2/:name/:age',(request,response)=>{
    console.log('有人请求test_get2了--携带的params参数是：',request.params);
    response.send('hello_test_get2')
})

//响应get请求
app.get('/get_person',(request,response)=>{
    console.log('有人请求get_person了');
    const person = {name:'tom',age:18,sex:'女'}
    response.send(JSON.stringify(person))
})

//响应get请求
app.get('/get_person_delay',(request,response)=>{
    console.log('有人请求get_person了');
    const person = {name:'tom',age:18,sex:'女'}
    setTimeout(()=>{
        response.send(JSON.stringify(person))
    },3000)
})

//响应POST请求--可以接收请求体参数
app.post('/test_post',(request,response)=>{
    console.log('有人请求test_post了--携带的请求体参数是',request.body);
    response.send('hello_test_post')
})

//响应get请求---jquery
app.get('/test_jquery_get',(request,response)=>{
    console.log('有人请求test_jquery_get了',request.query);
    const car = {name:'马自达·阿特兹',price:'25万'}
    response.send(JSON.stringify(car))
})

//响应post请求----jquery
app.post('/test_jquery_post',(request,response)=>{
    console.log('有人请求test_jquery_post了',request.body);
    const car = {name:'马自达·阿特兹',price:'25万'}
    response.send(JSON.stringify(car))
})

/* app.options('/test_put',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Expose-Headers','*')
    response.setHeader('Access-Control-Allow-Methods','*')
    response.send()
}) */

app.put('/test_put',(request,response)=>{
/*     response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Expose-Headers','*') */
    response.send('hello_test_put')
})

app.get('/test_jsonp',(request,response)=>{
    const {callback} = request.query
    console.log(callback);
    const person = [{name:'tom',age:18},{name:'老刘',age:5}]
    response.send(`${callback}(${JSON.stringify(person)})`)
})

//监听
app.listen(8080,(err)=>{
    if(!err) {
        console.log('测试ajax请求的服务器开启成功了！测试地址如下');
        console.log('http://127.0.0.1:8080/1_ajax小试牛刀.html');
        console.log('http://127.0.0.1:8080/2_xhr的5种状态.html');
        console.log('http://127.0.0.1:8080/3_ajax_get请求.html');
        console.log('http://127.0.0.1:8080/4_ajax_post请求.html');
        console.log('http://127.0.0.1:8080/5_ajax_解析json数据.html');
        console.log('http://127.0.0.1:8080/6_ajax_处理IE浏览器get请求缓存问题.html');
        console.log('http://127.0.0.1:8080/7_ajax请求的异常与超时处理.html');
        console.log('http://127.0.0.1:8080/8_ajax取消请求.html');
        console.log('http://127.0.0.1:8080/9_避免多次重复请求.html');
        console.log('http://127.0.0.1:8080/10_jquery封装的ajax.html');
        console.log('http://127.0.0.1:8080/11_演示回调地狱.html');
    }
})

前端发送get请求携带query参数和parmas 参数

<script type="text/javascript" >
            //获取按钮
            const btn = document.getElementById('btn')
            const content = document.getElementById('content')
            //给按钮绑定监听
            btn.onclick = ()=>{
                //1.创建xhr实例对象
                const xhr = new XMLHttpRequest()

                //绑定监听
                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState === 4 ){
                        if(xhr.status >= 200 && xhr.status < 300){
                            console.log(xhr.response);
                            content.innerHTML = `<h3>${xhr.response}</h3>`
                        }
                    }
                }

                //#region 
                /* 
                        1.形如：key=value&key=value 就是query参数的urlencoded编码形式
                        2.形如：/xx/xxx/老刘/18 就是params参数
                */
                //#endregion
                //2.指定发送请求的：method、url、参数
                // xhr.open('GET','http://127.0.0.1:8080/test_get?name=老刘&age=18') //携带query参数

                xhr.open('PUT','http://127.0.0.1:8080/test_put') //携带params参数

                //3.发送请求
                xhr.send()
            }
        </script>

1.5 post 请求

能接受jquery 和parmar参数

但是主要是要接受请求体body参数

请求体可以包含两种参数 1，unencode 2,json类型的参数

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <title>4_ajax_post请求</title>
      <style>
          #content{
              width: 300px;
              height: 100px;
              border: 1px solid black;
              margin-top: 10px;
          }
      </style>
  </head>
  <body>
      <h3>该页面是测试：ajax_post请求</h3>
      <button id="btn">点我发送请求(原生js-ajax-post)</button>
      <div id="content"></div>
      <script type="text/javascript" >
          //获取按钮
          const btn = document.getElementById('btn')
          const content = document.getElementById('content')
          //给按钮绑定监听
          btn.onclick = ()=>{
              //1.创建xhr实例对象
              const xhr = new XMLHttpRequest()

              //绑定监听
              xhr.onreadystatechange = ()=>{
                  if(xhr.readyState === 4 ){
                      if(xhr.status >= 200 && xhr.status < 300){
                          console.log(xhr.response);
                          content.innerHTML = `<h3>${xhr.response}</h3>`
                      }
                  }
              }

              //2.指定发送请求的：method、url、参数
              xhr.open('POST','http://127.0.0.1:8080/test_post')

              //追加响应头用于标识携带请求体参数的编码形式--urlencoded
              xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

              //追加响应头用于标识携带请求体参数的编码形式--json
              //xhr.setRequestHeader('Content-type','application/json')

              //3.发送请求
              const person = {name:'老刘',age:20}

              xhr.send('name=老刘&age=18') //携带urlencoded编码形式的请求体参数
              // xhr.send(JSON.stringify(person)) //携带json编码形式的请求体参数
          }
      </script>
  </body>
</html>

后端接受前端代码

//引入express
const express = require('express')
const cors = require('cors')

//创建app实例对象
const app = express()
//使用中间件解析urlencoded编码形式的请求体参数
app.use(express.urlencoded({extended:true}))
//使用中间件解析json编码形式的请求体参数
app.use(express.json())
app.use(cors())

//暴露静态资源
app.use(express.static(__dirname+'/src'))

//响应GET请求--可以接收query参数
app.get('/test_get',(request,response)=>{
    console.log('有人请求test_get了--携带的query参数是：',request.query);
    /* response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Expose-Headers','*') */
    response.send('hello_test_get')
})

//响应GET请求--可以接收params参数
app.get('/test_get2/:name/:age',(request,response)=>{
    console.log('有人请求test_get2了--携带的params参数是：',request.params);
    response.send('hello_test_get2')
})

//响应get请求
app.get('/get_person',(request,response)=>{
    console.log('有人请求get_person了');
    const person = {name:'tom',age:18,sex:'女'}
    response.send(JSON.stringify(person))
})

//响应get请求
app.get('/get_person_delay',(request,response)=>{
    console.log('有人请求get_person了');
    const person = {name:'tom',age:18,sex:'女'}
    setTimeout(()=>{
        response.send(JSON.stringify(person))
    },3000)
})

//响应POST请求--可以接收请求体参数
app.post('/test_post',(request,response)=>{
    console.log('有人请求test_post了--携带的请求体参数是',request.body);
    response.send('hello_test_post')
})

//响应get请求---jquery
app.get('/test_jquery_get',(request,response)=>{
    console.log('有人请求test_jquery_get了',request.query);
    const car = {name:'马自达·阿特兹',price:'25万'}
    response.send(JSON.stringify(car))
})

//响应post请求----jquery
app.post('/test_jquery_post',(request,response)=>{
    console.log('有人请求test_jquery_post了',request.body);
    const car = {name:'马自达·阿特兹',price:'25万'}
    response.send(JSON.stringify(car))
})

/* app.options('/test_put',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Expose-Headers','*')
    response.setHeader('Access-Control-Allow-Methods','*')
    response.send()
}) */

app.put('/test_put',(request,response)=>{
/*     response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Expose-Headers','*') */
    response.send('hello_test_put')
})

app.get('/test_jsonp',(request,response)=>{
    const {callback} = request.query
    console.log(callback);
    const person = [{name:'tom',age:18},{name:'老刘',age:5}]
    response.send(`${callback}(${JSON.stringify(person)})`)
})

//监听
app.listen(8080,(err)=>{
    if(!err) {
        console.log('测试ajax请求的服务器开启成功了！测试地址如下');
        console.log('http://127.0.0.1:8080/1_ajax小试牛刀.html');
        console.log('http://127.0.0.1:8080/2_xhr的5种状态.html');
        console.log('http://127.0.0.1:8080/3_ajax_get请求.html');
        console.log('http://127.0.0.1:8080/4_ajax_post请求.html');
        console.log('http://127.0.0.1:8080/5_ajax_解析json数据.html');
        console.log('http://127.0.0.1:8080/6_ajax_处理IE浏览器get请求缓存问题.html');
        console.log('http://127.0.0.1:8080/7_ajax请求的异常与超时处理.html');
        console.log('http://127.0.0.1:8080/8_ajax取消请求.html');
        console.log('http://127.0.0.1:8080/9_避免多次重复请求.html');
        console.log('http://127.0.0.1:8080/10_jquery封装的ajax.html');
        console.log('http://127.0.0.1:8080/11_演示回调地狱.html');
    }
})

1.6 解析json数据

xhr.responseType=’json’;告诉xhr你要解析的是json类型的数据

<body>
        <h3>该页面是测试：ajax_解析json数据</h3>
        <button id="btn">点我发送请求(原生js-ajax-get)</button>
        <div id="content"></div>


        <script type="text/javascript" >
            const btn = document.getElementById('btn')
            const content = document.getElementById('content')

            btn.onclick = ()=>{
                //实例xhr
                const xhr = new XMLHttpRequest()

                //绑定监听
                xhr.onreadystatechange = ()=>{
                    //判断状态码
                    if(xhr.readyState === 4){
                        //判断网页请求是否成功 如果后端响应成功
                        if(xhr.status >= 200 && xhr.status <300){

                            //把后端返回的内容通过解构赋值

                            const {name,age,sex} = xhr.response
                            content.innerHTML = (`
                                <ul>
                                    <li>姓名：${name}</li>
                                    <li>年龄：${age}</li>
                                    <li>性别：${sex}</li>
                                <ul>
                                `)
                        }
                    }
                }

                //配置请求
                xhr.open('GET','http://127.0.0.1:8080/get_person')

                //responseType用于指定返回数据的格式
                xhr.responseType = 'json'

                //发送请求
                xhr.send()
            }
        </script>
    </body>

后端的响应

app.get('/get_person',(request,response)=>{
    console.log('有人请求get_person了');
    const person = {name:'tom',age:18,sex:'女'}
    response.send(JSON.stringify(person))
})

1.7 结构赋值复习

let obj={a,b{c:c}};
//标准的解构赋值取出c的值
let {c}=obj.b
//连续的解构赋值
let {b:{c}}=obj;
//连续的解构赋值加上重命名
let {b:{c:vlaue}};//重命名的名字为value

4405814

1.8 jquery 发送请求

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>10_jQuery封装的ajax</title>
        <style>
            #content{
                width: 300px;
                height: 100px;
                border: 1px solid black;
                margin-top: 10px;
            }
        </style>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
    </head>
    <body>
        <h3>该页面是测试：jQuery封装的ajax</h3>
        <button id="btn1">点我发送请求(jQuery-ajax-get)</button>
        <button id="btn2">点我发送请求(jQuery-ajax-post)</button>
        <div id="content"></div>
        <script type="text/javascript" >
            const btn1 = $('#btn1')
            const btn2 = $('#btn2')
            const content = $('#content')

            btn1.click(()=>{
                //使用jQuery发送ajax-get（完整版）
                $.ajax({
                    url:'http://127.0.0.1:8080/test_jquery_get', //请求地址
                    method:'GET',//请求方式（默认值是GET）
                    data:{school:'atguigu'},//携带的数据
                    dataType:'json',//配置响应数据格式
                    timeout:2000,//指定超时的时间
                    success:(result,reponseText,xhr)=>{
                        console.log(result,reponseText,xhr);
                        content.append(`<div>汽车名：${result.name}，价格：${result.price}</div>`)
                    },//成功的回调
                    error:(xhr)=>{console.log('请求出错了',xhr);} //失败的回调
                })

                //使用jQuery发送ajax-get（精简版）
                /* $.get('http://127.0.0.1:8080/test_jquery_get',{school:'atguigu'},(data)=>{
                    console.log(data);
                    content.append(`<div>汽车名：${data.name}，价格：${data.price}</div>`)
                },'json') */
            })

            btn2.click(()=>{
                //使用jQuery发送ajax-post（完整版）
                $.ajax({
                    url:'http://127.0.0.1:8080/test_jquery_post', //请求地址
                    method:'POST',//请求方式（默认值是GET）
                    data:{school:'atguigu'},//携带的数据
                    dataType:'json',//配置响应数据格式
                    timeout:2000,//指定超时的时间
                    success:(result,reponseText,xhr)=>{
                        console.log(result,reponseText,xhr);
                        content.append(`<div>汽车名：${result.name}，价格：${result.price}</div>`)
                    },//成功的回调
                    error:(xhr)=>{console.log('请求出错了',xhr);} //失败的回调
                })

                //使用jQuery发送ajax-post（精简版）
                $.post('http://127.0.0.1:8080/test_jquery_post',{school:'atguigu'},(data)=>{
                    console.log(data);
                    content.append(`<div>汽车名：${data.name}，价格：${data.price}</div>`)
                },'json')
            })

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

1.9jsonp 解决跨域问题

jsonp 解决跨域问题关键是;

绕开了xhr 利用了script 发送请求不受同源策略限制的特性有一种前端定义函数，后端调用函数的感觉。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <h3>当前页面一定不要用服务器去打开，因为要制造跨域问题，用jsonp去解决</h3>
        <button id="btn">点我获取数据</button>
        <script type="text/javascript" >

            const btn = document.getElementById('btn')
            btn.onclick = ()=>{
                //1.创建script节点
                const scriptNode = document.createElement('script')
                //2.给节点指定src属性(请求地址)
                scriptNode.src = 'http://localhost:8080/test_jsonp?callback=peiqi'
                //3.将节点放入页面
                document.body.appendChild(scriptNode)
                //4.准备好一个函数
                 window.peiqi = (a)=>{
                    console.log(a);
                }
                //5.移除已经使用过的script节点
                document.body.removeChild(scriptNode)
            }
        </script>

    </body>
</html>

js接收部分

app.get('/test_jsonp',(request,response)=>{
    const {callback} = request.query
    console.log(callback);
    const person = [{name:'tom',age:18},{name:'老刘',age:5}]
    response.send(`${callback}(${JSON.stringify(person)})`)
})

1.10 跨域问题

跨域是民间的一种叫法，是同源协议，同源协议主要的目的是为了保护我们的信息安全

如果我们可以在本地获取其他页面的 DOM对象 cookie 输入信息等等，就容易造成，我在我的页面加一个别的网页的映射，然后修饰一番，搞得和别人的官网一样，从而盗取其他人的信息，账户密码等等，就犯罪了。所以就有同源协议。来保护我们的信息

同源协议：网络协议相同，域名（ip地址相同），端口号相同

同源协议限制了（重点从）

1,cookie 不能获取

2，dom不能获取

3，ajax不能获取数据（能发送请求，但是不能获取数据）

重点：

1.原生的js发送get请求和post请求

<script type="text/javascript" >
            //获取按钮
            const btn = document.getElementById('btn')
            const content = document.getElementById('content')
            //给按钮绑定监听
            btn.onclick = ()=>{
                //1.创建xhr实例对象
                const xhr = new XMLHttpRequest()

                //绑定监听
                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState === 4 ){
                        if(xhr.status >= 200 && xhr.status < 300){
                            console.log(xhr.response);
                            content.innerHTML = `<h3>${xhr.response}</h3>`
                        }
                    }
                }

                xhr.open('PUT','http://127.0.0.1:8080/test_put') //携带params参数

                //3.发送请求
                xhr.send()
            }
        </script>

<script type="text/javascript" >
            //获取按钮
            const btn = document.getElementById('btn')
            const content = document.getElementById('content')
            //给按钮绑定监听
            btn.onclick = ()=>{
                //1.创建xhr实例对象
                const xhr = new XMLHttpRequest()

                //绑定监听
                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState === 4 ){
                        if(xhr.status >= 200 && xhr.status < 300){
                            console.log(xhr.response);
                            content.innerHTML = `<h3>${xhr.response}</h3>`
                        }
                    }
                }

                //2.指定发送请求的：method、url、参数
                xhr.open('POST','http://127.0.0.1:8080/test_post')

                //追加响应头用于标识携带请求体参数的编码形式--urlencoded
                xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

                //追加响应头用于标识携带请求体参数的编码形式--json
                //xhr.setRequestHeader('Content-type','application/json')

                //3.发送请求
                const person = {name:'老刘',age:20}

                xhr.send('name=老刘&age=18') //携带urlencoded编码形式的请求体参数
                // xhr.send(JSON.stringify(person)) //携带json编码形式的请求体参数
            }
        </script>

2.取消请求

3，跨域问题

跨域问题

跨域是民间的一种叫法，是同源协议，同源协议主要的目的是为了保护我们的信息安全

如果我们可以在本地获取其他页面的 DOM对象 cookie 输入信息等等，就容易造成，我在我的页面加一个别的网页的映射，然后修饰一番，搞得和别人的官网一样，从而盗取其他人的信息，账户密码等等，就犯罪了。所以就有同源协议。来保护我们的信息

同源协议：网络协议相同，域名（ip地址相同），端口号相同

同源协议限制了（重点从）

1,cookie 不能获取

2，dom不能获取

3，ajax不能获取数据（能发送请求，但是不能获取数据）

4.jsonp解决跨域问题

<script type="text/javascript" >

            const btn = document.getElementById('btn')
            btn.onclick = ()=>{
                //1.创建script节点
                const scriptNode = document.createElement('script')
                //2.给节点指定src属性(请求地址)
                scriptNode.src = 'http://localhost:8080/test_jsonp?callback=peiqi'
                //3.将节点放入页面
                document.body.appendChild(scriptNode)
                //4.准备好一个函数
                 window.peiqi = (a)=>{
                    console.log(a);
                }
                //5.移除已经使用过的script节点
                document.body.removeChild(scriptNode)
            }
        </script>

5.cors 解决跨域

跟前端没多大关系

1	const cors = require('cors')