前端学习Ajax

xiamengjiaomeng

已于 2022-03-18 17:20:01 修改

阅读量738

点赞数

分类专栏：前端文章标签：前端 ajax

于 2022-03-17 22:04:23 首次发布

本文链接：https://blog.csdn.net/xiamengjiaomeng/article/details/123561374

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端学习之Ajax

观看的是尚硅谷李强的视频

1.Ajax相关知识介绍

2.http相关知识介绍

2.1 请求与响应

客户端or浏览器端向服务器发送请求报文，后台服务器接收到请求后，调度服务器处理请求，向请求端发送并返回响应报文，请求端接收到响应报文，解析显示响应体

2.2请求报文

①请求行：
请求类型get/post
url路径
http协议版本
②请求头：
Host
Cookie
Content-Type
User Agent
③请求空行（必须要有）
④请求体 get为空，post可有可无

2.2响应报文

①响应行：
响应状态码
与响应状态码对应的响应状态字符串
http协议版本
②响应头：
Content-Type
Content-Length
Content-encoding
③响空行（必须要有）
④请求体响应主要内容
⑤⑥⑦⑧⑨

2.3常见响应状态码

200 OK 请求成功。一般用于GET 与POST 请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求

2.4不同类型的请求GET: 从服务器端读取数据（查）

POST: 向服务器端添加新数据（增）
PUT: 更新服务器端已经数据（改）
DELETE: 删除服务器端数据（删

3.原生Ajax实践

3.1安装node.js环境

3.2 安装express服务端的框架

3.3各类请求的实践

3.4 安装 nodemon

安装此插件可自动根据面向服务器端.js文件内容的更改对服务器进行开关操作，安装途中报错如下：
nodemon : 无法加载文件 C:\Users\Amanda\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policie
解决办法：
①打开终端，输入Start-Process powershell -Verb runAs ，此步可使我们以管理员身份运行
②在以管理员身份运行的终端中输入set-ExecutionPolicy RemoteSigned，然后再执行nodemon 的安装就好啦

3.5jQuery发送ajax请求

4.跨域

4.1同源策略

浏览器和服务器的协议、域名、端口号必须完全相同，是浏览器的一种安全策略，违背同源策略则称为跨域
实践将网页在本地打开，相当于请求端与响应端为同源，则在请求时可以简写url
注：打开控制台会报错，提示 404 not found favicon.ico, 其实不用管它，也可以自己在文件夹下加个icon文件，然后使用再在html中引入。
html

<body>
    <h1>wahaha</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.getElementsByTagName('button')
        btn[0].onclick = function(){
            const x = new XMLHttpRequest()
            //因为满足同源策略，所以url可以简写
            x.open('GET', '/data')
            x.send()
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status>=200 && x.status<300){
                        console.log(x.response)
                    }
                }
            }
        }
    </script>
</body>

服务器端js

const express = require('express')

const app = express()
app.get('/home' ,(request, response)=>{
    // 响应一个页面
    response.sendFile(__dirname + '/index.html')
})

app.get('/data' ,(request, response)=>{
    response.send('用户数据')
})
app.listen(9000, ()=>{
    console.log('端口9000服务已经启动')
})

4.2跨域解决方案

①JSONP
有些标签本身具有跨域特性：img link iframe script…
script 标签可以跨域请求，但是响应的结果必须为函数调用即JS代码，函数需在html文件中定义，服务器端JS文件需对函数进行传参、调用
基本原理如下：

<body>
    <div id="res"></div>   
    <script>
        function handle(data){
            const res = document.getElementById('res')
            res.innerHTML = data.name
        }
    </script>
    <!-- <script src="http://127.0.0.1:5500/express%E6%A1%86%E6%9E%B6/%E8%B7%A8%E5%9F%9F/2-jsonp/app.js"></script> -->
    <script src="http://localhost:8000/jsonp-server"></script>

</body>
//jsonp 服务
app.all('/jsonp-server', (requesr, response)=>{

    const data = {name:'hanser'}
    //设置响应
    let str = JSON.stringify(data)
    // response.send('console.log("hello jsonp")')
    response.send(`handle(${str})`)

})

JSONP实践

<body>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        const input = document.getElementById('username')
        const p = document.querySelectorAll('p')[0]

        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://localhost:8000/check-username'
            //3 将script插入文档中
            document.body.appendChild(script)

        }
    </script>
</body>

app.all('/check-username', (requesr, response)=>{

    const data = {
        exist:1,
        msg:'用户名已经存在'}
    //设置响应
    let str = JSON.stringify(data)
    // response.send('console.log("hello jsonp")')
    response.send(`handle(${str})`)

})

JQuery JSONP实践

  <!-- jquery引进 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="res"></div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://localhost:8000/jquery-jsonp-server?callback=?', function(data){
                $('#res').html(`
                姓名：${data.name},
                年龄：${data.age}`)
            })

        })
    </script>
</body>

app.all('/jquery-jsonp-server', (request, response)=>{

    const data = {
        name:'哇哈哈',
        age:2}
    //设置响应
    let str = JSON.stringify(data)
    //接受callback参数
    let cb = request.query.callback
    // response.send('console.log("hello jsonp")')
    response.send(`${cb}(${str})`)

})

①CORS
跨域资源共享，无需在客户端进行任何操作，完全在服务器中进行处理，支持get与post等其他请求，只需设置响应头即可，也就是课程最开始的请求案例

app.all('/cors-server',(request,response)=>{
    // 设置响应头
    response.setHeader("Access-Control-Allow-Origin","*")
    response.send('hello CORS')
})