AJAX 学习笔记

已于 2022-11-01 18:30:08 修改
阅读量197 收藏
点赞数
分类专栏： 笔记 文章标签： javascript ajax
于 2022-11-01 18:27:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SUZEHUI9636/article/details/127638626
版权

一、AJAX

1.1 特点

1.1.1 优点

  • 可以无需刷新页面与服务器端进行通信

  • 允许你根据用户时间来更新部分页面内容

1.1.2 缺点

  • 没有浏览历史，不能回退

  • 存在跨域问题（同源）

  • SEO 不友好

1.2 HTTP 超文本传输协议

1.2.1 请求报文

  • 行

    请求方式(POST) / URL / 版本(HTTP/1.1)

  • 头

    Host: atguigu.com

    Cookie: name=zehui

    Content-type: application/x-www-form-urlencoded

    User-Agent: chrome 83

  • 空行

  • 请求体

1.2.2 响应报文

  • 行

    HTTP/1.1 200 OK

  • 头

    Content-type: text/html;charset=utf-8

    Content-length: 2048

    Content-encoding: gzip

  • 空行

  • 响应体

1.3 express的使用

npm init --yes
​
npm i express
// 引入express
const { response } = require('express')
const express = require('express')
    // 创建应用对象
const app = express()
    // 创建路由规划
app.get('/', (request, response) => {
        response.send('hello express')
    })
    // 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已启动，8000端口监听中...');
})

127.0.0.1:8000查看请求

1.4 ajax 的基本操作

1.4.1 GET

const btn = document.querySelector('button')
const result_box = document.querySelector('.result__box')
btn.onclick = () => {
    // 创建对象
    const xhr = new XMLHttpRequest()
    // 初始化 设置请求方法和url
    xhr.open('GET', 'http://127.0.0.1:8000/server')
    // 发送
    xhr.send()
    // 事件绑定 处理服务端返回的结果
    // readyState 是xhr对象的属性 状态值: 0 1 2 3 4
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) { // 服务端返回了所有结果
            // 判断状态码
            if (xhr.status >= 200 && xhr.status < 300) {
                result_box.innerHTML = xhr.response
            } else {
                console.log('error');
            }
        }
    }
​
}
app.get('/server', (request, response) => {
    // 允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.send('hello ajax')
})

1.4.2 POST

const result_box = document.querySelector('.result__box')
result_box.addEventListener('mouseover', function() {
    const xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://127.0.0.1:8000/server')
    // 设置请求头信息
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.setRequestHeader('name', 'szh')
    // 设置post方式的请求体
    xhr.send('a=1&b=2')
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                result_box.innerHTML = xhr.response
            }
        }
    }
})
const express = require('express')
const app = express()
app.post('/server', (req, res) => {
    // 设置响应头
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Header', '*')
    res.send('it is post')
})
app.listen(8000, () => {
    console.log('123');
})

1.4.3 服务端响应JSON数据

const box = document.querySelector('.box')
window.addEventListener('keypress', () => {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'json' // 设置响应体类型
    xhr.open('POST', 'http://127.0.0.1:8000/json-server')
    xhr.send()
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                box.innerHTML += xhr.response.name
            }
        }
    }
})
app.all('/json-server', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Header', '*')
    const obj = {
        name: 'szh',
        age: '22'
    }
    res.send(obj)
})

1.5 nodemon 自动重启工具安装

nodemon - npm

1.6 IE浏览器缓存问题

解决方法：在请求后面加上一个时间戳

xhr.open('http://127.0.0.1:8000/ie?t=' + Date.now())

1.7 超时请求与异常

客户端发送请求

window.addEventListener('keypress', () => {
    const xhr = new XMLHttpRequest()
​
    /***********************************************/
    xhr.timeout = 2000 // 超时设置
    xhr.ontimeout = () => {
        // 超时回调
        console.log('请求超时或失败，重新发送请求...')
    }
    xhr.onerror = () => {
        // 网络异常回调
        console.log('网络异常，请检查网络后重新发送请求!')
    }
​
    xhr.open('POST', 'http://127.0.0.1:8000/timeout')
    xhr.send()
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                result_box.innerHTML = xhr.response
            }
        }
    }
})

服务端设置延时模拟超时、浏览器设置offline模拟断网状态

// 请求超时与异常
// 延时响应
app.post('/timeout', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    setTimeout(() => {
        res.send('请求时间为3s')
    }, 3000)
})

1.8 取消请求（手动）

 xhr.abort() //取消发送

1.9 请求发送重复问题

思路：添加一个全局变量进行判断发送的状态，false时才进行发送。

const submit = document.querySelector('.submit')
let xhr = null
let isSending = null // 判断是否在发送请求
submit.addEventListener('click', () => {
    if (!isSending) {
        xhr = new XMLHttpRequest()
        isSending = true
        xhr.open('GET', 'http://127.0.0.1:8000/repeat')
        xhr.send()
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                isSending = false
            }
        }
    } else {
        console.log('请求正在发送中...');
    }
})

二、JQuery中的Ajax

.get() ​.post() .ajax()

btn[0].onclick = function() {
    /*
         ** 三个参数 url 携带参数 回调函数(响应体)
         */
    let jqxhr = $.get('http://127.0.0.1:7000/getAjax', {
        a: 1,
        b: 2
    }, function(res) {
        console.log(res);
    }).done(() => {
        console.log('success')
    }).always(() => {
        console.log('complete')
    })
    }
btn[1].onclick = function() {
    let jqxhr = $.post('http://127.0.0.1:7000/postAjax', {
        a: 1,
        b: 2
    }, function(res) {
        console.log(res);
    }).done(() => {
        console.log('success')
    }).always(() => {
        console.log('complete')
    })
    }
btn[2].onclick = function() {
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:7000/postAjax',
        data: {
            k: 1,
        },
        dataType: 'json',
        success: data => {
            console.log(data)
        },
        headers: {
            t: 123
        },
    })
}
/*
 ** JQuery-Ajax
 */
app.get('/getAjax', (req, res) => {
    res.setHeaders('Access-Control-Allow-Origin', '*')
    res.send('jquery-get')
})
app.all('/postAjax', (req, res) => {
    res.setHeaders('Access-Control-Allow-Origin', '*')
    res.setHeaders('Access-Control-Allow-Headerss', '*')
    const obj = {
        name: 'szh'
    }
    res.send(JSON.stringify(obj))
})

fetch()

fetch 规范与 jQuery.ajax() 主要有以下的不同：

  • 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false），仅当网络故障时或请求被阻止时，才会标记为 reject。

  • fetch 不会发送跨域 cookie，除非你使用了 credentials 的初始化选项。

基本语法

// fetch请求
async function fetchData(url = '', data = {}) {
    const response = await fetch(url, {
        method: 'POST',
        mode: "cors",
        cache: "no-cache",
        credentials: "same-origin",
        headers: {
            'Content-Type': 'application/json',
            szh: 123
        },
        redirect: "follow",
        referrerPolicy: "no-referrer",
        body: JSON.stringify(data)
    })
    return response.json()
}
window.addEventListener('keypress', () => {
    fetchData('http://127.0.0.1:7000/fetch', {
        name: 'szh'
    }).then(data => {
        console.log(data.ok)
        console.log(data)
    }).catch(e => {
        console.log(e)
    })
})
// fetch
app.all('/fetch', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Headers', '*')
    const obj = {
        name: 'szh'
    }
    res.send(JSON.stringify(obj))
})

三、跨域问题

3.1 同源策略

同源策略是浏览器的一种安全策略，所谓的同源指：协议、域名、端口号 必须完全相同

违背同源策略即为跨域

3.2 解决跨域问题

3.2.1 JSONP

  1. 是什么？

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

  2. 怎么工作的？

    网页有一些标签具有跨域能力，比如：img、link、iframe、script

    JSONP 就是利用script标签的跨域能力来发送请求的。

  3. 如何使用？

    function handle(obj) {
    console.log(obj);
    if (obj.exit === 1) {
        $('input')[0].style.color = 'red'
    }
}
​
$('input').blur(() => {
    let uname = $(this).val
    // 1-动态创建script标签
    const script = document.createElement('script')
    // 2-设置src
    script.src = 'http://127.0.0.1:7000/jsonp'
    // 3-添加节点
    document.body.appendChild(script)
})
    // 跨域问题
app.all('/jsonp', (req, res) => {
    const data = {
        exit: 1,
        msg: '账号已存在'
    }
    let obj = JSON.stringify(data)
    res.end(`handle(${obj})`)
})

3.2.2 CORS

  1. 是什么？

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

    跨源资源共享（CORS） - HTTP | MDN

  2. 怎么工作的？

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

  3. 如何使用？

    res.setHeader('Access-Control-Allow-Headers', '*')
    // 第二个参数是允许跨域的请求

Max hui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
Ajax学习笔记
xiyi's Blog
03-17 995
Ajax学习笔记一、关于Ajax什么是Ajax？什么是XML？优缺点二、HTTP协议HTTP协议报文 一、关于Ajax 什么是Ajax？ Ajax全称为Asynchronous JavaScript And XML ,就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无需刷新页面获取数据。 AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 什么是XML？ XML是可扩展标记语言。被设计用来传输和存储数据。 XML和HTML相似。不同的是HTML用来呈现
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 7885
史上最强Ajax学习笔记
AJAX学习笔记
weixin_44497507的博客
11-10 494
【代码】AJAX学习笔记。
Ajax 学习笔记
爱学习的小强
10-18 3011
文章目录get请求带参数的get请求json字符串和json格式get请求的封装基于promise的get请求的封装post请求post请求的封装utils.js封装get和post请求get和post方法封装成两个get和post方法封装成一个ajax例子-段子请求fetch方法基于fetch的get请求基于fetch的post请求原因分析浏览器的同源策略定义为什么要使用同源策略举例src属性开放性原则例子1例子1(动态函数名)例子(百度动态搜索框)三次握手和四次挥手初步理解常见状态码 get请求 ge
Ajax学习笔记(3)
2301_82244607的博客
04-28 905
XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。//比如说我有一个学生数据：//name = “孙悟空”;age = 18;gender = “男”;//用XML 表示：孙悟空18男现在已经被JSON 取代了。{“name”:“孙悟空”,“age”:18,“gender”:“男”}
10.16ajax学习笔记
qq_66195472的博客
10-16 75
ajax笔记
Ajax学习笔记第4天
m0_62003092的博客
10-30 8833
Ajax---模仿招聘页面 Ajax的单独分页 【】—本地只有十条数据
Ajax学习笔记01
m0_46529566的博客
02-28 743
翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 536
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 375
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1371
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1253
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 798
Vue在表单校验中trigger属性指定何时触发校验规则
vue3 防止按钮的连续点击（连点）
最新发布
MtangEr的博客
06-13 269
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
Ajax学习笔记pink老师
07-29
以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值