AJAX以及跨域问题

最新推荐文章于 2022-08-01 10:15:02 发布

freekale

最新推荐文章于 2022-08-01 10:15:02 发布

阅读量111

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/m0_53210865/article/details/125529622

版权

HTTP协议
请求报文
···
请求行
   请求类型GET POST / url / HTTP/1.1版本
请求头
   Host: atguigu.com
   Cookie: name=guigu
   Content-type: application/x-www-form-urlencoded
   User-Agent: chrome 83
空行   必须有的空行

请求体
GET请求请求体没有内容，POST可以又内容username=adm&pw=a

···

响应报文
···
行
   版本HTTP/1.1 / 响应状态码200 / 响应状态字符串 ok
头    对响应体的描述
   Conten-Type: text/html;charset=utf-8 类型是什么
   Content-length: 2048 长度
   content-encoding: gzip   压缩方式
空行
体   返回的内容XML JSON
···

404找不到
403被禁止，没有权限
401未授权
500内部错误

    <style>
        #serve {
            border: 1px solid black;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <button>点我发请求</button>
    <div id="serve"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0]
        btn.onclick = function(){
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化   设置请求方法和url
            xhr.open("GET",'http://127.0.0.1:8000/server')
            // 发送请求
            xhr.send();
            // 事件绑定，处理放回结果
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4)
                {
                    if(xhr.status === 200)
                    {
                        console.log(xhr.status);  //状态码
                        console.log(xhr.statusText);  //状态字符串
                        console.log(xhr.getAllResponseHeaders());   //所有响应头
                        console.log(xhr.response)    //响应体
                    }
                }
            }
        }
    </script>
</body>

后端

// 导入express
const express = require('express')
// 创建应用对象
const app = express();
// 注册路由规则
app.get('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('HELLOW Zhang')
})
app.post('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('HELLOW Zhang POST')
})
// 监听端口
app.listen(8000,()=>{
    console.log("8000启动...");
})

一些原生ajax的方法
xhr.setRequestHeader("","") 设置请求头
xhr.timeout = 2000 设置请求超时时间
xhr.ontimeout = function(){} 请求超时的回调
xhr.responseType="json" 设置响应体类型把json自动转为对象
xhr.abort() 取消请求取消发送请求

对于ie浏览器缓存问题的解决
可以在xhr.open("GET","http://127.0.0.1:8000?t="+Date.now())
加+Date.now()解决

----------------------------------------------------------------------------------
fetch()发送ajax请求
   fetch("http://127.0.0.1:8000?a=10",{   行
       method:"POST",       请求方法
       header:{               头
           name:"asdasd"
       },
       body:"username=admin&a=b"    请求体
   }).then(response=>{           获取响应结果要用text()
       return response.text()
   }).then(response=>{
       log(response)       响应结果
   })
-----------------------------------------------------------------------------
在服务器端CORS设置响应头解决跨域
   response.setHeader('Access-Control-Allow-Origin','*')

jsonp利用script实现跨域请求

    <input type="text">
    <p></p>
    <script>
        // 声明handle函数
        function handle(data) {
            // input边框变红
            input.style.border = '1px solid red'
            // p中放数据
            p.innerHTML = data.name
        }
        const p = document.querySelector("p")
        const input = document.querySelector("input")
        // 失去焦点触发
        input.onblur = function(){
            let username = this.value;
            // 创建script标签
            const script = document.createElement("script")
            // src属性
            script.src = `http://127.0.0.1:8000/jsonp-ajax?username=${username}`
            // 出入标签
            document.body.appendChild(script)
        }

    </script>

服务器返回函数调用

const express = require('express');

const app = express();
app.all('/jsonp-ajax',(request,response)=>{
    const data = {
        name:"用户名已存在"
    }
    const str = JSON.stringify(data);
    response.send(`handle(${str})`)
})
app.listen(8000,()=>{
    console.log("8000端口...");
})