前端学习Ajax_代码007(未授权)

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

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

①请求行：
请求类型 get/post
url 路径
 http 协议版本
②请求头：
Hos t
Cook ie
Conte nt-Ty pe
Us er Ag e nt
③请求空行（必须要有）
④请求体 get 为空，post可有可无

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

200 OK 请求成功。一般用于GET 与POST 请求
201 Cre ated 已创建。成功请求并创建了新的资源
401 Unauthori zed 未授权/请求要求用户的身份认证
404 Not Fou nd 服务器无法根据客户端的请求找到资源
500 Intern al Ser v er Er ro r 服务器内部错误，无法完成请求

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

<body&gt;
    <h1&gt;wahaha</h1&gt;
    <button&gt;点击获取用户数据</button&gt;
    <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 &amp;&amp; x.status<300){
                        console.log(x.response)
                    }
                }
            }
        }
    </script>
</body>

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服务已经启动')
})

<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})`)

})

<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引进 -->
    <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})`)

})

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

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

响应报文请求

前端 学习之Aja x

1.Aja x 相关 知识 介绍

2.http 相关 知识 介绍

2.1 请求与响应

2.2请求 报文

2.2响应报文

2.3常见响应状态码

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

3.原生Aja x 实践

3.1安装 node.js 环境

3.2 安装express 服务端的框架

3.3各类请求的实践

3.4 安装 no demon

3.5jQue ry发送ajax请求

4.跨域

4.1同源 策略

4.2跨域 解决方案

发表回复取消回复

前端学习之Ajax

1.Ajax相关知识介绍

2.http相关知识介绍

2.1 请求与响应

2.2请求报文

2.2响应报文

2.3常见响应状态码

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

3.原生Ajax实践

3.1安装node.js环境

3.2 安装express服务端的框架

3.3各类请求的实践

3.4 安装 nodemon

3.5jQuery发送ajax请求

4.跨域

4.1同源策略

4.2跨域解决方案

相关文章

发表回复 取消回复

前端学习之Aja x

1.Aja x 相关知识介绍

2.http 相关知识介绍