Ajax

herr_y
25 阅读6分钟

AJAX

1.定义

ajax是异步的js和xml

ajax是浏览器与服务器进行数据通信的技术

首先引入axios库

![8327c63b7cca06b41afe48091df30601](/Users/mac/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ/nt_qq_6988a9d372d460ac4875f0a4ccb1c974/nt_data/Pic/2025-09/Ori/8327c63b7cca06b41afe48091df30601.jpg)

2.原生AJAX

最大的优势就是无刷新获取数据

3.XML

这是一种可标记的语言,被用来存储数据和传输数据

与html不同的是:xml中没有预定义标签,全是自定义标签

4.AJAX的特点

1.优点

1.可以无需刷新页面与服务器端进行通信

2.允许你根据用户事件来更新部分页面

2.缺点

1.没有历史记录

2.存在跨域问题

3.seo不友好

5.HTTP

http协议,超文本传输协议

6.请求报文

重点是格式与参数

分别有行,头,空行,体

其中有get请求和post请求

7.响应报文

还是有行,头,空行,体

8.查看请求报文和响应报文

进入网页之后点击f12,之后点开network项目,其中都是请求

9.node.js安装

已经装好了

10.exprexx服务端框架

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

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

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/',(request,response)=>{
    //设置响应
    response.send('hello')
})
//监听端口启动服务
app.listen(8000,()=>{
    console.log('启动');
    
})

11.请求发送之前的准备

前端页面的准备

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #result {
                width: 200px;
                height: 100px;
                border: solid 1px purple;
            }
        </style>
    </head>
    <body>
        <button>点击发送请求</button>
        <div id="result"></div>
    </body>
    </html>

服务端代码的准备

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

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

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置一个响应头设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    response.send('hello ajax')
})
//监听端口启动服务
app.listen(8000,()=>{
    console.log('启动');
    
})

12.AJAX操作的基本步骤

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #result {
                width: 200px;
                height: 100px;
                border: solid 1px purple;
            }
        </style>
    </head>
    <body>
        <button>点击发送请求</button>
        <div id="result"></div>
        <script>
            const divseek = document.querySelector('#result')
            document.querySelector('button').addEventListener('click',()=>{
                //创建对象
                const xhr = new XMLHttpRequest()
                //设置初始化
                xhr.open('GET','http://127.0.0.1:8000/server')
                //发送
                xhr.send()
                //事件绑定,处理服务器返回的结果
                //readystate是xhr对象中的属性,表示状态有01234
                //change改变
                xhr.onreadystatechange = ()=>{
                    //在4的时候处理返回所有的结果
                    if(xhr.readyState === 4){
                        //判断响应的状态吗
                        if(xhr.status >= 200 && xhr.status < 300){
                            //处理结果 行 头 空行 体
                            //响应行
                            // console.log(xhr.status)//状态码
                            // console.log(xhr.statusText)//状态字符串
                            // console.log(xhr.getAllResponseHeaders())//所有响应头
                            // console.log(xhr.response)//响应体
                            //设置result文本
                            divseek.innerHTML = xhr.response
                        }else{

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

13.设置AJAX的参数

![image-20250927151218267](/Users/mac/Library/Application Support/typora-user-images/image-20250927151218267.png)

在url后面用问号分隔开然后坠入参数,参数之间用&符号分开

14.发送post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        document.querySelector('#result').addEventListener('mouseover',()=>{
            //创建对象
            const xhr = new XMLHttpRequest()
            //初始化,设置类型
            xhr.open('POST','http://127.0.0.1:8000/server')
            //发送
            xhr.send()
            //事件绑定
            xhr.onreadystatechange = ()=>{
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果
                        document.querySelector('#result').innerHTML = xhr.response
                    }
                }
            }

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

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

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

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置一个响应头设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    response.send('hello ajax')
})
app.post('/server',(request,response)=>{
    //设置一个响应头设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    response.send('hello ajax POST')
})
//监听端口启动服务
app.listen(8000,()=>{
    console.log('启动');
    
})

1.post请求中如何设置参数

![image-20250927152753865](/Users/mac/Library/Application Support/typora-user-images/image-20250927152753865.png)

post中要在send中写参数

15.设置请求头信息

1.设置请求头

![image-20250927153210159](/Users/mac/Library/Application Support/typora-user-images/image-20250927153210159.png)

其中contenttype是设置请求体类型的

后面的是一种固定写法

16.AJAX响应JSON数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        window.addEventListener('keydown',()=>{
            //发送请求
            const xhr = new XMLHttpRequest()
            //初始化¬ø
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            //发送吧
            xhr.send()
            //事件绑定
            xhr.onreadystatechange = ()=>{
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //手动对字符串进行数据转化
                        // let data = JSON.parse(xhr.response)
                        //document.querySelector('#result').innerHTML = data.name
                        //自动转化
                        document.querySelector('#result').innerHTML = xhr.response.name
                    }
                }
            }
        })
    </script>
</body>
</html>

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

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


app.all('/json-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.listen(8000,()=>{
    console.log('启动');
    
})

17.IE缓存问题

若遇到这个问题就去看,直接跳了

18.AJAX请求超时与网络异常处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px skyblue;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const result = document.querySelector('#result')
        document.querySelector('button').addEventListener('click',()=>{
            const xhr = new XMLHttpRequest()
            //超时设置
            xhr.timeout = 2000
            //超时回调
            xhr.timeout = function(){
                alert('网不好')
            }
            //网络异常的回调设置
            xhr.onerroe = function(){
                alert('网络不太好')
            }
            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = ()=>{
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

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

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

// 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.all('/server',(request,response)=>{
    //设置一个响应头设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    response.send('hello ajax - 2')
})
app.all('/json-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.get('/delay',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    setTimeout(()=>{
        response.send('延时响应')
    },3000)
})
//监听端口启动服务
app.listen(8000,()=>{
    console.log('启动');
    
})

19.AJAX中的取消请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="but1">点击发送</button>
    <button class="but2">点击取消</button>
    <script>
        const but1 = document.querySelector('.but1')
        const but2 = document.querySelector('.but2')
        const x = null
        but1.addEventListener('click',()=>{
            const x = new XMLHttpRequest()
            x.open('GET','http://127.0.0.1:8000/delay')
            x.send()
        })
        //取消请求abort
        but2.addEventListener('click',()=>{
            x.abort()
        })

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

利用abort让请求取消

20.AJAX重复发送请求的方法

定义一个isSend布尔变量,将它定义为false

当发送请求的时候就将值变为true

等请求发送完之后就变为false,这样就可以缓解服务器的压力了

21.axios发送AJAX请求

22.同源策略

是由netscape公司提出的,是浏览器的一种安全策略

同源:协议,域名,端口号,必须完全相同

违背同源策略就是跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>尚硅谷</h1>
    <button>点击获取用户数据</button>
    <script>
        document.querySelector('button').addEventListener('click',()=>{
            const x = new XMLHttpRequest()
            x.open('GET','/data')
            x.send()
            x.onreadystatechange = ()=>{
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status <= 300){
                        console.log(x.response)
                    }
                }
            }
        })
    </script>
</body>
</html>

如何解决跨域

JSONP

jsonp是什么,是一个非官方发跨域解决方案,只支持get请求

怎么工作

在网页有一些标签天生具有跨域能力,

jsonp就是利用script标签的跨域功能来发送请求的

使用

1.动态的创建一个script标签

2.设置回调函数

avatar
文章
阅读
粉丝