AJAX：整理3：原生AJAX的相关操作

最新推荐文章于 2024-05-11 10:28:57 发布
最新推荐文章于 2024-05-11 10:28:57 发布
阅读量2.5k 收藏 25
点赞数 46
分类专栏： AJAX 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61495539/article/details/135298453
版权

注意AJAX的步骤 

// 1.创建对象
const xhr = new XMLHttpRequest()

// 2.初始化 设置 请求方法 和 url
xhr.open("GET", "http://localhost:9090/server")

// 3.发送
xhr.send()

// 4.事件绑定 处理服务端返回的结果
// readyState 是xhr对象中的属性，表示状态 0 1 2 3 4  
// 0 表示初始值； 1 表示open()方法调用完毕；2 表示send()方法调用完毕；3 表示服务端返回了部分结果；4 表示服务端返回了所有的结果

// change 改变
xhr.onreadystatechange = function () { 
    // 判断状态码
    if (xhr.readyState === 4) {
        // 判断状态码
        if (xhr.status >= 200 && xhr.status < 300) {
          // 获取服务端返回的结果 (行 头 空行 响应体)
            console.log(xhr.status) // 响应行里面的响应状态码  200
            console.log(xhr.statusText) // 状态字符串  OK
            console.log(xhr.getAllResponseHeaders()) // 所有响应头

            console.log(xhr.response)  // 响应体
            const result = xhr.response 
         }
    }
 }

1. GET 请求

需求：向服务端发送get请求，拿到服务端返回的结果，并显示在div盒子中

（1）server.js

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

// 2. 创建服务器
const app = express()

// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response)  => {
    // 设置响应头  设置允许跨域  !!!
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应体
    response.send('HELLO AJAX GET')
})


// 4. 监听端口
app.listen(9090, () => {
    console.log("服务已启动， 9090端口监听中...")
})

（2）前端页面并渲染服务端返回的结果

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

    </div>

    <script>
        // 获取button元素
        const btn = document.querySelector("#btn")
        // 绑定事件
        btn.addEventListener("click", function () {
            // console.log("test")
            // 1.创建对象
            const xhr = new XMLHttpRequest()
            // 2.初始化 设置请求方法和url
            xhr.open("GET", "http://localhost:9090/server?a=100&b=30") // 携带参数
            // 3.发送
            xhr.send()
            // 4.事件绑定 处理服务端返回的结果
            // readyState 是xhr对象中的属性，表示状态 0 1 2 3 4
            // change 改变
            xhr.onreadystatechange = function () { 
                // 判断状态码
                if (xhr.readyState === 4) {
                    // 判断状态码
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 获取服务端返回的结果 (行 头 空行 响应体)
                        console.log(xhr.status) // 响应行里面的响应状态码 200
                        console.log(xhr.statusText) // 状态字符串  OK
                        console.log(xhr.getAllResponseHeaders()) // 所有响应头

                        console.log(xhr.response)
                        const result = xhr.response // 响应体


                        // 把结果放到div中
                        document.querySelector("#result").innerHTML = result
                    }
                }
            }
        })
    </script>
</body>
</html>

 

2. GET请求携带参数

3. POST请求 

当鼠标放在div盒子上时，向服务端发送post请求，将响应的结果在div中呈现

 （1）server.js

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

// 2. 创建服务器
const app = express()

// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.post('/server', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')

    // 设置响应体
    response.send('HELLO AJAX POST')
})

// 4. 监听端口
app.listen(9090, () => {
    console.log("服务已启动， 9090端口监听中...")
})

（2）前端页面并渲染数据到盒子中

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

    </div>

    <script>
        // 获取元素对象
        const result = document.querySelector('#result')

        // 绑定事件
        result.addEventListener('mouseover', function (){
            // console.log('鼠标移动')
            // 1. 创建对象
            const xhr = new XMLHttpRequest()
            // 2. 初始化 设置类型与URL
            xhr.open('POST', 'http://localhost:9090/server')

            // 3. 发送
            xhr.send()

            // 4. 事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 获取服务器响应的数据
                        const data = xhr.responseText

                        // 把数据渲染到页面
                        result.innerHTML = data
                        
                    }
                }
            }
        })
    </script>
</body>
</html>

4. POST请求中设置参数

 

 5.  AJAX设置请求头信息

 

但是如果自定义一个请求头呢，浏览器会有安全机制，不让发送

如果我们非要发的话，可以用以下的方法 

6. 服务端响应JSON数据

需求：当点击键盘时，会向服务端发送请求，服务端响应结果会在div盒子中呈现

<!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: 1px solid pink;
        }
    </style>

</head>
<body>
    <div id="result">

    </div>
    <script>
        // 获取元素对象
        const result = document.querySelector('#result')

        window.onkeydown = function(e){
            // console.log(e.key, e.keyCode)
            // 1. 发送请求
            const xhr = new XMLHttpRequest()
            // 设置响应体类型
            // xhr.responseType = 'json'  // 可以自动转换

            // 2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://localhost:9090/server_json')

            // 3. 发送
            xhr.send()

            // 4.事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 获取服务器响应的数据
                        const data = xhr.response

                        result.innerHTML = data
                        console.log(data)
                    }
                }
            }


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

 

 1. 手动转换

2.自动转换

7. AJAX解决IE缓存问题

IE浏览器会对请求结果作一个缓存，这样就会导致一个问题，就是下一次再发送请求时，走的就是本地的缓存，而并不是服务器返回的最新数据

/* 针对IE缓存问题 */
app.all('/ie', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    // 设置响应体
    response.send("hello IE")
})
<!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: 1px solid pink;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result">

    </div>

    <script>
        // 获取元素
        const btn = document.getElementsByTagName('button')[0]
        const result = document.getElementById('result')
        btn.addEventListener("click", function() {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', 'http://localhost:9090/ie?t='+Date.now())  // 加个参数解决IE缓存问题
            xhr.send();
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

 

8. AJAX请求超时以及网络异常处理

1.请求超时

<!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: 1px solid pink;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result">

    </div>

    <script>
        // 获取元素
        const btn = document.getElementsByTagName('button')[0]
        const result = document.getElementById('result')

        btn.addEventListener("click", function() {
            const xhr = new XMLHttpRequest()

            // 超时设置
            xhr.timeout = 2000
            // 超时回调
            xhr.ontimeout = function() {
                alert('网络异常，请稍后重试！')
            }

            xhr.open('GET', 'http://localhost:9090/delay')
            xhr.send()
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

 

 

 

 2. 网络异常

 

9. AJAX取消请求

 

 

10. AJAX解决请求重复发送问题

当请求响应比较慢的时候，用户就会疯狂地点击，这时候服务器就会接收到大量的相同请求，服务器压力比较大

所以我们需要保证始终只有一个请求在发送，这样服务器的压力就会小一些 

 

 

11. jQuery发送AJAX请求

首先需要引入jQuery资源

11.1 发送GET请求

app.get('/jquery', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    response.send("hello jQuery AJAX")
})

 

$("#btn1").click(function() {
   // 第一个参数是url, 第二个参数是发送的参数（对象的形式）, 第三个参数是回调函数
   $.get("http://localhost:9090/jquery", {a:100, b:200}, function(data, status) {
           console.log(data)
   })
})

 

 

11.2 发送POST请求

app.post('/jquery', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    response.send("hello jQuery AJAX POST")
})
$("#btn2").click(function() {
     $.post("http://localhost:9090/jquery", {a:100, b:200}, function(data, status) {
           console.log(data)
     })
})

POST请求携带的参数不会跟在url后面 

11.3  设置响应体的数据类型

/* jQuery服务 */
app.all('/jquery', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受
    const data = {name: "xiexu", age: 20}

    response.send(JSON.stringify(data))
})

服务端发送json格式的数据

 

 

11.4 jQuery通用方法发送AJAX请求

 

 

12. Axios发送AJAX请求

首先需要引入axios工具包 

 12.1 发送GET请求

app.get('/axios', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    response.send("hello Axios AJAX")
})

获取的数据是比较完整的

 

12.2 发送POST请求

 

/* axios 服务*/
app.all('/axios', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    response.send("hello Axios AJAX POST")
})

 

12.3 Axios通用方式发送AJAX请求

 

 

13. fetch() 函数发送AJAX请求 

/* fetch */
app.all('/fetch', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受
    const data = {name: "x666", age: 20}

    // response.send("hello jQuery AJAX")
    response.send(JSON.stringify(data))
})

 

 

 

 14. 解决跨域问题

同源策略是最早由Netscape公司提出，是浏览器的一种安全策略

同源：协议、域名、端口号必须相同；  违背同源策略就是跨域

解决跨域的方法：

14.1 JSONP

JSONP是一个非官方的跨域解决方案，只支持get请求

（1）JSONP是怎么工作的？

在网页中，由一些标签天生具有跨域的能力，比如img、link、iframe、script，JSONP就是利用script标签的跨域能力来发送请求的

（2）JSONP实现原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonp解决跨域问题</title>
</head>
<body>
    <script src="http://localhost:9090/jsonp">
        
    </script>
</body>
</html>
app.all('/jsonp', (request, response)  => {
    response.send("hello jsonp")
})

 

 这个原因就是我正儿八经的script标签向你发送请求，你却返回一个字符串的形式，我们应该返回的是函数的调用，也就是js的代码，这样浏览器才能执行里面的内容

 

 

 

14.2 原生JSONP的实现

需求：有一个输入框，在里面输入用户名，输完之后，我会失去焦点，失去焦点的时候，就会向服务端发送请求，对用户名是否存在的检测，因为这边没有数据库，所以服务端直接返回一个已存在，结果回来之后了，我们作一个判断，再把input框的颜色变为红色

 

/* 用户名检测是否存在 */
app.all('/checkUserName', (request, response)  => {
    const data = {
        exists: 1,
        msg: "用户名已存在"
    }
    let str = JSON.stringify(data)

    response.send(`handle(${str})`)
})

 

 

14.3 jQuery发送JSONP请求

需求：点击按钮，向服务端发送请求，响应的结果再div盒子中呈现

 

 

 

14.4 设置CORS响应头实现跨域

（1）CORS是什么？

CORS(Cross-Origin Resource Sharing), 跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

（2）CORS是怎么工作的？

CORS通过设置一个响应头告诉浏览器，请允许跨域，浏览器收到该响应以后就会对响应放行

 

 

修改：添加响应头

 

 成功响应：

是小蟹呀^
关注
  • 46
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
ajax：ajax设计方案
01-28
原生js的ajax设计方案（引入支持npm安装）npm安装，文档见底部npm i ajax-js / yarn add ajax-js整理ajax设计方案原因如下从资源合理利用的角度以及网站优化角度去想，每次为了那几个功能，去引用一个框架，不划算...
AJAX: 整理2：学习原生的AJAX，这边借助express框架
xiaoxie_life_study
12-29 850
AJAX: 整理2：学习原生的AJAX，这边借助exprss框架
原生AJAX：AJAX原理，附有AJAX代码
Stardust_fantasy的博客
06-10 351
AJAX原理，附有AJAX代码
ajax 原生js操作ajax
热门推荐
fagdg的博客
07-25 1万+
1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；2.用户体验极佳（不刷新页面即可获取可更新的数据）；3.提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）；4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；...
Ajax学习（一）：原生AJAX 的基本使用
激洪的博客
04-10 824
Ajax学习 原生AJAX 的基本使用
初学原生ajax（1）：原生AJAX的简单介绍与使用
lalala_dxf的博客
04-20 1364
ajax 简介 AJAX（Asynchronous Javascript And XML），中文名为异步的Javascript和XML，是一种创建交互式网页应用的网页开发技术，用于浏览器（web）和服务器(后台)之间进行数据交互，并不是一种啥新的语言。 AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不
Ajax原生
m0_62073591的博客
08-15 1241
同步的理解: 同步就是指一个进程在执行某个谓求的时候。若该请求需要一段时间才能返回信贽。那么这个进程将会一直等待下去,直到收到返仓信息才继绫执行下去;同步就相当于是当客户端发送请求给服务岩。在等待服务端喇应的请求时，客户岩不做其他的事情。当服务端做完了才返回到客户缓。这样的话客户端需要一直等待。用户使用起来会有不友好。异步是指进程不需要一直等下去，而是继续执行下面的操怍，不管其他进程的状态。当有海息返回时系统会通知进程进行处理,这样可以提高执行的效率。异步就相当于当客户端发送给服务剃请求时。...
原生Ajax
m0_61843988的博客
08-21 1682
Ajax = Async JavaScript And XML (异步的JavaScript和XML)。就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。是指进程不需要一直等下去。而是继续执行下面的操作，不管其他过程的状态。
原生Ajax请求流程：同步请求、异步请求
m0_51258512的博客
02-16 2398
Ajax 异步无刷新技术 原生Ajax的实现流程 得到XMLHttpRequest对象 - var xhr = new XMLHttpRequest(); 打开请求 - xhr.open(method,url,async); - method:请求方式，通常是GET|POST - url：请求地址 - async：是否异步。如果是true，表示异步，false表示同步 发送请求 - xhr.send(params); - params:请求时需要传递的参数 - 如果是GET请求，设置null(GET请.
03 原生Ajax写法
嗨，朋友你好！我是前端领域的工作者
12-20 590
本文将介绍AJAX的原生写法，以及重点阐述GET与POST的区别
原生JS实现ajax与ajax的跨域请求实例
11-27
一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步：设置状态监听函数 第三步：open一个连接，true是异步请求 第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null 第五步：在监听函数...
ajax:原生的ajax，整合了jsonp跨域功能
04-30
一个小型的ajax库，没有使用jquery，减少加载Jquery库的时间，也不用负担Jquery复杂的逻辑处理带来的性能消耗。其中整合jsonp，方便跨域。示例：ajax({ type:"post", url:"", //添加自己的接口链接 timeOut:5000, ...
Jquery揭秘系列:ajax原生js实现详解(推荐)
10-22
下面小编就为大家带来一篇Jquery揭秘系列:ajax原生js实现详解(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Ajax简单的异步交互及Ajax原生编写
12-12
一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 1.创建ajax核心对象 2.与服务器建立连接 3.向服务器发送请求 4.接收...
PHP的XML格式和AJAX
最新发布
m0_73736495的博客
05-11 500
PHP的XML格式和AJAX
SparkSQL数据源
weixin_62399938的博客
05-08 610
save()方法支持设置保存模式，使用可用于指定将Dataset保存到数据源的预期行为，指定如何处理现有数据（例如，执行时设置类型为Overwrite，则数据将在写出新数据之前被删除。）但需要注意的这些保存模式不使用任何锁定并且不是原子的。SaveModeScala/Java含义（默认）将Dataset保存到数据源时，如果数据已存在，则会引发异常。将Dataset保存到数据源时，如果数据/表已存在，则Dataset的内容应附加到现有数据。覆盖模式意味着在将Dataset。
【Ajax零基础教程】-----第一课 Ajax简介
weixin_45889291的博客
05-07 293
【Ajax零基础教程】-----第一课 Ajax简介
【Ajax零基础教程】-----第四课 简单实现
weixin_45889291的博客
05-10 548
【Ajax零基础教程】-----第四课 简单实现
axios和ajax的区别：
05-30
3. 使用方式不同：Ajax的使用方式相对比较复杂，需要手动设置请求头、序列化请求参数等，而Axios的使用方式非常简洁，只需要调用相应的方法即可，Axios还提供了全局配置和实例配置等方式来进行定制化配置。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是小蟹呀^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值