Ajax学习笔记

于 2024-04-28 04:05:42 发布
阅读量829 收藏 25
点赞数 28
分类专栏： 程序员 文章标签： ajax 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_82244607/article/details/138264041
版权

if(xhr.readyState === 4){

//判断响应状态码 200 404 403 401 500

if(xhr.status >= 200 && xhr.status < 300){

// 处理结果 行 头 空行 体

// 响应

console.log(‘状态码’, xhr.status); // 状态码

console.log(‘状态字符串’, xhr.statusText); // 状态字符串

console.log(‘所有响应头’, xhr.getAllResponseHeaders()); // 所有响应头

console.log(‘响应体’, xhr.response); // 响应体

//设置 result 的文本

result.innerHTML=xhr.response;

}else{

}

}

}

}

  1. 服务端准备

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.get(‘/server’, (request, response) => {

// 设置响应头 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应体

response.send(“Hello Ajax”);

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

3.4 AJAX GET 请求设置请求参数

xhr.open(‘GET’, ‘http://127.0.0.1:8000/server?a=100&b=200&c=300’);

image-20220123112715583

3.5 AJAX post案例

  1. 前端页面
Ajax POST 请求
  1. 服务器代码(修改为需要重启服务器)

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

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(“Hello Ajax”);

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

请求体

xhr.send('a=100&b=200&c=300');post设置请求体 request payload

3.6 AJAX设置请求头信息

// 设置请求体内容的类型

xhr.setRequestHeader(‘Content-Type’,‘application/x-www-from-urlencoded’);

// 自定义头信息

xhr.setRequestHeader(‘name’, ‘lightofD’);

server.js中设置响应头允许自定义请求头 post改成all

服务器代码：

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.get(‘/server’, (request, response) => {

// 设置响应头 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应体

response.send(“Hello Ajax”);

});

app.all(‘/server’, (request, response) => {

// 设置响应头 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应头, 设置允许自定义头信息

response.setHeader(‘Access-Control-Allow-Headers’,‘*’);

// 设置响应体

response.send(“Hello Ajax”);

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

3.7 服务端响应JSON数据

  1. 服务器代码

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.all(‘/server’, (request, response) => {

// 设置响应头, 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应头, 设置允许自定义头信息

response.setHeader(‘Access-Control-Allow-Headers’, ‘*’);

// 响应一个数据

const data = {

name: ‘atguigu’

};

// 对 对象 进行 字符串 转换 ；转换为JSON格式

let str = JSON.stringify(data)

// 设置响应体

response.send(str);

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

  1. 我们的页面会接受到一个字符串

//设置响应体数据的类型(自动转换)

xhr.responseType = ‘json’;

//设置之前 我们xhr.response接收到的是服务器的json格式字符串

//设置只后 xhr.response自动根据这个字符串转换为对象

//当然我们也可以手动转换

// 1. 手动对数据转化 (字符串再转换成json)

let data = JSON.parse(xhr.response); //转换成json

//这个data 就是字符串对应的对象了

//调用其中数据格式 data.name

  1. html示例（键盘随意输入发送post请求）
JSON

3.8 nodemon自动重启工具

之前我们每次更改服务器端的代码都需要重启服务器，非常麻烦

有了这个工具，只要启动一次，我们修改服务端代码，保存后自动重启服务器。

但是启动代码的方式从 node 文件名 改为nodemon 文件名

  1. 安装

npm install -g nodemon

  1. 启动

nodemon .\server.js

  1. 启动失败怎么办，运行下条命令，一定要注意运行所在路径！！！一定注意路径！！！cd命令修改到server.js所在目录

npx nodemon .\server.js

3.9 解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

xhr.open(‘GET’, ‘http://127.0.0.1:8000/server?t=’+Date.now());

3.10 请求网络超时与网络异常

// 超时设置 （2秒）

xhr.timeout = 2000;

// 超时回调

xhr.ontimeout = function(){

alert(‘网络超时，请稍后重试’)

}

// 网络异常回调

xhr.onerror = function(){

alert(‘网络异常，请稍后重试’)

}

服务器模拟延迟效果

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.all(‘/server’, (request, response) => {

// 设置响应头, 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应头, 设置允许自定义头信息

response.setHeader(‘Access-Control-Allow-Headers’, ‘*’);

// 响应一个数据

setTimeout(()=>{

// 设置响应体

response.send(‘str’);

},3000)

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

浏览器模拟断网

image-20220123180425444

3.11 取消请求

// 手动取消

xhr.abort()

3.12 重复请求问题

相当于一个小的算法

JSON

发送

3.13 总结

  • XMLHttpRequest()：创建 XHR 对象的构造函数

  • status：响应状态码值，如 200、404

  • statusText：响应状态文本，如 ’ok‘、‘not found’

  • readyState：标识请求状态的只读属性 0-1-2-3-4

  • onreadystatechange：绑定 readyState 改变的监听

  • responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应

  • response：响应体数据，类型取决于 responseType 的指定

  • timeout：指定请求超时时间，默认为 0 代表没有限制

  • ontimeout：绑定超时的监听

  • onerror：绑定请求网络错误的监听

  • open()：初始化一个请求，参数为：(method, url[, async])

  • send(data)：发送请求

  • abort()：中断请求 （发出到返回之间）

  • getResponseHeader(name)：获取指定名称的响应头值

  • getAllResponseHeaders()：获取所有响应头组成的字符串

  • setRequestHeader(name, value)：设置请求头

4. jQuery 中的AJAX

4.1 get 请求

$.get(url, [data], [callback], [type])

  • url:请求的URL 地址

  • data:请求携带的参数

  • callback:载入成功时回调函数

  • type:设置返回内容格式，xml, html, script, json, text, _default

4.2 post请求

$.post(url, [data], [callback], [type])

  • url:请求的URL 地址

  • data:请求携带的参数

  • callback:载入成功时回调函数

  • type:设置返回内容格式，xml, html, script, json, text, _default

4.3通用方法

$.ajax({

// url

url: ‘http://127.0.0.1:8000/jquery-server’,

// 参数

data: {a:100, b:200},

// 请求类型

type: ‘GET’,

// 响应体结果

dataType: ‘json’,

// 成功的回调

success: function(data){console.log(data);},

// 超时时间

timeout: 2000,

// 失败的回调

error: function(){console.log(‘出错拉~’);},

// 头信息

headers: {

c: 300,

d: 400

}

})

5.Axios 发送 Ajax 请求

5.1 get 请求

axios.get(‘http://localhost:8000/axios-server’, {

//url参数

params:{

id:1000,

vip:12

},

//请求头信息

headers:{

name:‘hanser’,

age:‘2’

}

}).then(value=>{

console.log(value)

})

5.2 post请求

axios.post(‘http://localhost:8000/axios-server’, {

username:‘admin’,

password:‘123’

},{

//url参数

params:{

id:1,

vip:123

},

//请求头参数

headers:{

name:‘yousa’,

age:‘23’

},

//请求体

})

5.3通用方法

axios({

method:‘POST’,

url:‘http://localhost:8000/axios-server’,

//url参数

params:{

vip:10,

id:123

},

//头信息

headers:{

a:100,

b:200

},

//请求体参数

data:{

name:‘hanser’,

age:‘7’

}

}).then(response=>{

console.log(response)

})

6.fetch

fetch(‘http://localhost:8000/fetch-server’,{

//请求方法

method:‘POST’,

//请求头

headers:{

name:‘hanser’

},

//请求体

body: ‘name=admin&pd=admin’

}).then(Response=>{

console.log(Response)

return Response.text()

}).then(Response=>{

console.log(Response)

})

7.跨域

7.1 同源策略

  • 同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略

  • 同源： 协议、域名、端口号必须完全相同

  • 跨域： 违背同源策略就是跨域

7.2 如何解决跨域

7.2.1 JSONP
1)JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get 请求。

2)JSONP 怎么工作的？

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

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

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

2301_82244607
关注
  • 28
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 7834
史上最强Ajax学习笔记
AJAX学习笔记
weixin_44497507的博客
11-10 482
【代码】AJAX学习笔记。
Ajax 学习笔记
爱学习的小强
10-18 2997
文章目录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
10.16ajax学习笔记
qq_66195472的博客
10-16 64
ajax笔记
Ajax学习笔记第4天
最新发布
m0_62003092的博客
10-30 8821
Ajax---模仿招聘页面 Ajax的单独分页 【】—本地只有十条数据
Ajax学习笔记01
m0_46529566的博客
02-28 726
翻译成中文就是“异步的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都不用改
jquery中ajax学习笔记4
10-28
本节主要介绍两点：1.缓存问题 2.中文问题
AJAX学习笔记.docx
08-01
AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许网页与服务器进行异步通信，实现页面内容的动态更新，而无需刷新整个页面。
AJax 学习笔记一(XMLHTTPRequest对象)
10-29
今天学习了点关于XMLHttpRequest对象的一些方法和属性，有点体会，在这里也想记录起来。
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
16ajax学习笔记1
08-08
16ajax学习笔记1
那些年，我还在学习Ajax 学习笔记
10-28
Ajax不用说，每个做web开发的同志都知道，因为它是学习web开发必经之路，不管你是做asp.net，还是javaWeb，还是PHP
Ajax学习笔记pink老师
07-29
您好！对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器进行数据交换，实现在不刷新整个页面的情况下更新部分页面内容。 2. Ajax的优点： - 异步处理：可以在后台发送和接收数据，而无需刷新整个页面。 - 提高用户体验：通过部分更新页面内容，可以提供更快的响应时间和更流畅的用户体验。 - 减轻服务器负担：只更新需要的部分内容，减少了不必要的数据传输和服务器负载。 3. Ajax的基本原理： - 使用XMLHttpRequest对象向服务器发送请求，并接收响应。 - 通过JavaScript在前端处理响应数据。 - 更新页面内容，以显示最新的数据。 4. Ajax的核心技术： - XMLHttpRequest对象：用于与服务器进行数据交换。 - JavaScript：用于处理响应数据和更新页面内容。 - XML或JSON：用于传输数据格式。 5. Ajax的使用步骤： - 创建XMLHttpRequest对象。 - 定义请求类型、URL和是否异步。 - 发送请求并接收响应。 - 处理响应数据并更新页面内容。 6. 常见的Ajax框架和库： - jQuery：一个流行的JavaScript库，提供了简化Ajax开发的方法和函数。 - Axios：一个基于Promise的HTTP客户端，用于浏览器和Node.js。 - Fetch API：一种用于发送和接收网络请求的新标准。 这只是Ajax学习的一些基本概念和步骤，您可以进一步深入学习Ajax的相关知识和实践。希望这些笔记对您有所帮助！如有更多问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值