ajax 了解一哈第一章

json{shen:"jing"}

已于 2022-08-13 01:22:04 修改

阅读量132

点赞数

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

于 2022-08-09 00:25:01 首次发布

本文链接：https://blog.csdn.net/weixin_53415999/article/details/126232959

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

ajax

3 篇文章 0 订阅

订阅专栏

1.http协议：通俗来讲就是一种约定，一种规则。其里规范了两种内容：

一.请求(发送内容叫做请求报文)：浏览器browser给服务器server发的东西就是请求

行：GET / s?ie=utf-8 HTTP/1.1
头 : Host:baidu.com cookies content-type user-Agent
空行
体 : username=admin&password=admin

二.响应(返回结果叫做响应报文)：服务器给客户端/浏览器返回的东西叫做响应

行： HTTP/1.1 200/404/403(禁止)/401(未授权)/500(内部错误)/303(跳转) OK
头:Content-type:text/html;charset=utf-8
- Content-length:2048
- Content-encoding:gzip
体：<html>...</html>
空行

F12里面的分析：

headers

预览分析

请求头:requests headers;(请求行，请求头位置)

Query String Parameters:查询字符串参数，用于调整参数

响应头:response Headers

response:响应体

Express框架：

1.npm init --yes(在目标文件夹下) ——>装package.json文件

2.npm install/i express

3.node .js文件运行文件命令

案例一：

 <button>send request</button>
    <div style="width: 200px;height:100px;border:2px solid #f40" id="ID"></div>
    点击发送请求之后，服务器返回一个响应，响应内容在div内部完成渲染

    1.创建对象
    2.初始化
    3.发送
    4.事件绑定
        on...when:当...时候
        readystate是xhr对象中的属性,表示状态0 1 2 3 4
        如果是4，表明服务端返回了所有的结果
        判断响应状态码 2XX表示成功
        处理结果：行() 头 空行(getAllResponseHeader()) 体(response) 



    <script>
        const btn = document.getElementsByTagName('button')[0];
        const ID  =document.getElementById('ID');
        btn.onclick = function(){
            console.log('first')
            const md = new XMLHttpRequest();
            md.open('GET','http://127.0.0.1:8000/server');
            md.send();

            md.onreadystatechange = function(){
                if(md.readyState === 4)
                {
                    if(md.status >= 200 && md.status < 300)
                    {
                        console.log(md.status)
                        console.log(md.statusText)
                        console.log(md.getAllResponseHeaders())
                        console.log(md.response)
                        ID.innerHTML = md.response;

                    }
                }
            }
        }
    </script>

server.js

//设置响应头 使得ajax可以跨域
// response.setHeader('acess-Control-Allow-Origin','*')；
// response.send('Hello Ajax')

const express = require("express");
const app = express();
app.get('/server',(request,response) =>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('Hello Ajax')
});
app.listen(8000,()=>{
    console.log('start server...,port:8000')
})

地址栏传参：

https://www.baidu.com/s?wd=%E7%BE%8E%E5%A5%B3

Ajax传参数：

http://127.0.0.1:8000/server?a=100&b=200

鼠标划过事件:mouseover

ajax之POST请求，前面的是GET请求

这里就是要注意：server.js需要再写一个POST方法，否则不符合规范，不能实现对应的功能

server.js


const express = require("express");
const app = express();
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('你看到了这段话就是猪')
});

app.listen(8000,()=>{
    console.log('start server...,port:8000')
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax的post请求</title>
</head>
<body>
    <div style="width: 200px;height:100px;border:2px solid #f40" id="ID"></div>
    <script>
        const ID = document.getElementById('ID')
        ID.addEventListener('mouseover',function(){
            const md = new XMLHttpRequest();
            md.open('POST','http://127.0.0.1:8000/server');
            md.send();
            md.onreadystatechange = function(){
                if(md.readyState === 4)
                {
                    if(md.status >= 200 && md.status < 300)
                    {
                        ID.innerHTML = md.response;

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