一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）

第 1 章：原生 AJAX

1.1 AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求，
最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2 XML 简介

XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据.

比如说我有一个学生数据： name = "孙悟空" ; age = 18 ; gender = "男" ; 用 XML 表示： 
<student> <name>孙悟空</name> <age>18</age> <gender>男</gender> 
</student>

现在已经被 JSON 取代了。

1.3 AJAX 的特点

1.3.1 AJAX 的优点
  1. 可以无需刷新页面而与服务器端进行通信。
  2. 允许你根据用户事件来更新部分页面内容。
1.3.2 AJAX 的缺点
  1. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)
  3. SEO 不友好

1.4 AJAX 的使用

1.4.1 核心对象

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

1.4.2 使用步骤
  1. 创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest();
  2. 设置请求信息 xhr.open(method, url); //可以设置请求头，一般不设置
    xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
  3. 发送请求 xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
  4. 接收响应 //xhr.responseXML 接收 xml 格式的响应数据 //xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.status == 200){ var text = xhr.responseText; console.log(text); } 
}
1.4.3 解决 IE 缓存问题

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

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

  xhr.open("get","/testAJAX?t="+Date.now());
1.4.4 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了

代码演示：

1. ajax发送GET请求

get.html:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>AJAX GET 请求</title><style type="text/css">#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head><body><button>点击发送请求</button><div id="result"></div><script>// 获取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');// 绑定事件btn.onclick = function() {// 1.创建对象const xhr = new XMLHttpRequest();// 2.初始化 设置请求方法 和 urlxhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');// 3.发送xhr.send();// 4.事件绑定，处理服务端返回的结果xhr.onreadystatechange = function() {// 判断 (服务端返回了所有的结果)if (xhr.readyState === 4) {// 判断响应状态码 200 404 403 500if (xhr.status >= 200 && xhr.status < 300) {// 处理服务端响应结果 行 头 空行 体// 1.响应行console.log(xhr.status); // 状态码console.log(xhr.statusText); // 状态状态字符串console.log(xhr.getAllResponseHeaders()); // 所有的响应头信息console.log(xhr.response); // 响应体信息	// 设置result的文本	result.innerHTML = xhr.response;} else {}}}}</script></body>
</html>

server.js:

// 1. 引入express
const express = require('express')// 2. 创建应用对象
const app = express()// 3. 创建路由规则
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// response.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');// 设置响应体response.send('hello ajax')
})// 4. 监听端口 启动服务
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中...')
})

在这里插入图片描述

2. ajax发送POST请求

server.js :

// 1. 引入express
const express = require('express')// 2. 创建应用对象
const app = express()// 3. 创建路由规则
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// response.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');// 设置响应体response.send('hello ajax')
})app.post('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// response.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');// 设置响应体response.send('hello ajax post')
})// 4. 监听端口 启动服务
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中...')
})

post.html:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>AJAX POST 请求</title><style type="text/css">#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head><body><p>当鼠标悬浮在div上时发送请求</p><div id="result"></div><script>const result = document.getElementById('result');// 绑定事件result.addEventListener('mouseover', function() {// console.log('test')// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置请求类型 和 urlxhr.open('POST', 'http://127.0.0.1:8000/server')// 3. 发送xhr.send('aaa=100&bbb=200')// 4. 事件绑定xhr.onreadystatechange = function() {// 判断if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {// 处理服务器返回的结果result.innerHTML = xhr.response} else {}}}}) </script></body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

ajax服务端响应json数据

json.html:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JSON</title><style type="text/css">#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head><body><p>当按下键盘时发送请求</p><div id="result"></div><script>const result = document.getElementById('result');// 绑定键盘按下事件window.onkeydown = function () {// console.log('test')// 发送请求const xhr = new XMLHttpRequest();// 设置响应体数据类型xhr.responseType = 'json'// 初始化xhr.open('GET', 'http://127.0.0.1:8000/json-server')// 发送xhr.send()// 事件绑定xhr.onreadystatechange = function () {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status<300) {// 处理服务端返回结果// console.log(xhr.response)// result.innerHTML = xhr.response// 手动对服务器返回的数据进行转化/* let data = JSON.parse(xhr.response)console.log(data)result.innerHTML = data.name */// 自动转换 ，通过设置响应体数据类型xhr.responseType = 'json'console.log(xhr.response)result.innerHTML = xhr.response.name}}}}</script></body>
</html>

server.js:

// 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')
})// all 可以接收任意类型的请求
app.all('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 设置响应体response.send('hello ajax post')
})app.all('/json-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name: 'zep'};// 对 对象进行字符串转换let str = JSON.stringify(data)// 设置响应体,send方法只接收字符串类型的参数response.send(str)
})// 4. 监听端口 启动服务
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中...')
})
手动对服务端返回的字符串数据进行转换，把字符串转成对象：

在这里插入图片描述

自动转换，通过设置响应体数据类型xhr.responseType = ‘json’

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/470806.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

App安全之网络传输安全

App安全之网络传输安全

移动端App安全如果按CS结构来划分的话&#xff0c;主要涉及客户端本身数据安全&#xff0c;Client到Server网络传输的安全&#xff0c;客户端本身安全又包括代码安全和数据存储安全。所以当我们谈论App安全问题的时候一般来说在以下三类范畴当中。 App代码安全&#xff0c;包括…
阅读更多...
二、nodemon-Node.js 监控工具

二、nodemon-Node.js 监控工具

nodemon-Node.js 监控工具 https://www.npmjs.com/package/nodemon 这个工具在我们改变了服务端代码时&#xff0c;会自动重启服务器&#xff0c;不需要我们再手动去重启服务器了&#xff0c;方面我们后面调试代码&#xff01; 1. 安装 node &#xff1a;http://nodejs.cn/d…
阅读更多...
利用动态规划（DP）解决 Coin Change 问题

利用动态规划（DP）解决 Coin Change 问题

问题来源 这是Hackerrank上的一个比较有意思的问题&#xff0c;详见下面的链接&#xff1a; https://www.hackerrank.com/challenges/ctci-coin-change 问题简述 给定m个不同面额的硬币&#xff0c;C{c0, c1, c2…cm-1}&#xff0c;找到共有几种不同的组合可以使得数额为n的…
阅读更多...
jquery datatable设置垂直滚动后，表头(th)错位问题

jquery datatable设置垂直滚动后，表头(th)错位问题

jquery datatable设置垂直滚动后&#xff0c;表头(th)错位问题 问题描述&#xff1a; 我在datatable里设置&#xff1a;”scrollY”: ‘300px’,垂直滚动属性后&#xff0c;表头的宽度就会错位&#xff0c;代码如下&#xff1a; <!-- HTML代码 --> <table id"dem…
阅读更多...
三、解决ie缓存问题

三、解决ie缓存问题

解决 IE 缓存问题 问题&#xff1a;在一些浏览器中(IE),由于缓存机制的存在&#xff0c;ajax 只会发送的第一次请求&#xff0c;剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。 在谷歌浏览器中&#xff0c;修改了服务器代码&#xff0c;重新发送请求时&#xff0…
阅读更多...
利用BFS和DFS解决 LeetCode 130: Surrounded Regions

利用BFS和DFS解决 LeetCode 130: Surrounded Regions

问题来源 此题来源于LEETCODE&#xff0c;具体问题详见下面的链接 https://leetcode.com/problems/surrounded-regions/description/ 问题简述 给定一个包含字母 X 和 O 的二维矩阵&#xff0c;找到所有被 X 包围的 O 并将被包围的 O 变成 X。 比如给定如下矩阵&#xff1…
阅读更多...
锁！代码锁

锁！代码锁

一&#xff0c;代码锁 异步 并发&#xff0c;各干各的 (比如&#xff1a;一群人同时上卡车) 同步 步调一致的处理 &#xff08;比如&#xff1a;一群人排队上公交车&#xff09; 多个线程并发读写同一个资源的时候会发生“线程并发安全问题”&#xff0c;如果保证…
阅读更多...
四、ajax请求超时与网络异常处理

四、ajax请求超时与网络异常处理

阅读更多...
imageNamed和imageWithContentsOfFile-无法加载图片的问题

imageNamed和imageWithContentsOfFile-无法加载图片的问题

问题描述 图片资源放在Assets.xcassets中&#xff0c;分别用UIImage的类方法imageNamed和imageWithContentsOfFile获取图片对象&#xff0c;但发生奇怪的情况&#xff0c;前者获取到图片对象&#xff0c;后者结果为nil。代码如下&#xff1a; 1.通过UIImage的类方法imageNamed:…
阅读更多...
LeetCode 309: 一个很清晰的DP解题思路

LeetCode 309: 一个很清晰的DP解题思路

问题来源 题目来源链接见下方&#xff1a; https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown/description/ 问题简述&#xff1a; 假如有一个 i 个元素的数组&#xff0c;数组的每个元素表示了第 i 天某只股票的价格&#xff0c;设计一种算法来…
阅读更多...
五、手动取消ajax请求 解决重复发送请求问题

五、手动取消ajax请求 解决重复发送请求问题

server.js: // 1. 引入express const express require(express)// 2. 创建应用对象 const app express()// 3. 创建路由规则 app.get(/server, (request, response) > {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *)// 设置响应体respo…
阅读更多...
linux ps命令详解

linux ps命令详解

ps命令用于监测进程的工作情况。进程是正在运行的程序&#xff0c;一直处于动态变化中&#xff0c;而ps命令所显示的进程工作状态时瞬间的。 使用方式&#xff1a;ps[options][-help] 常用参数&#xff1a; -A &#xff1a;显示所有进程 -a&#xff1a;显示一个终端的所有进程。…
阅读更多...
用多元线性回归预测网页访问量(R语言)

用多元线性回归预测网页访问量(R语言)

前言 该问题来源于《机器学习:实用案例解析》中的第5章。在书中&#xff0c;已经对该问题给出了一种解决方案&#xff0c;但是我觉得写的还是太简略了一些&#xff0c;没有把考虑问题的整个思路给写出来&#xff0c;所以&#xff0c;在这里给出我的一些想法。 问题简述 我们…
阅读更多...
六、jQuery 中的 AJAX 跨域问题

六、jQuery 中的 AJAX 跨域问题

第 2 章&#xff1a;jQuery 中的 AJAX 官方中文文档&#xff1a;https://jquery.cuishifeng.cn/jQuery.Ajax.html 2.1 get 请求 $.get(url, [data], [callback], [type]) url:请求的 URL 地址。data:请求携带的参数。callback:载入成功时回调函数。type:设置返回内容格式&a…
阅读更多...
LeetCode 474. Ones and Zeroes 动态规划解法+拓展

LeetCode 474. Ones and Zeroes 动态规划解法+拓展

问题来源 此题来源于LeetCode 474. Ones and Zeroes 在写这篇之前&#xff0c;我百度了一下这道题&#xff0c;发现已经有很多人写过这个问题了&#xff0c;然而大多数只是为了答题而答题&#xff0c;给出了代码&#xff0c;很少有文字解释的&#xff0c;也很少有深入拓展的。…
阅读更多...
常用的几种编程语言的介绍

常用的几种编程语言的介绍

编程语言&#xff08;programming language&#xff09;&#xff0c;来自百度百科的解释为&#xff1a;编程语言是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧&#xff0c;用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据&a…
阅读更多...
三门问题（Monty Hall problem）背后的贝叶斯理论

三门问题（Monty Hall problem）背后的贝叶斯理论

文章目录1 前言2 问题简介3 直观的解释4 贝叶斯理论的解释1 前言 三门问题可以说有着各种版本的解释&#xff0c;但我看了几个版本&#xff0c;觉得没有把其中的条件说清楚&#xff0c;所以还是决定按照自己的理解记录一下这个特别有意思的问题。 2 问题简介 三门问题&#…
阅读更多...
一、在vue项目中使用mock.js（详解）

一、在vue项目中使用mock.js（详解）

步骤1.搭建测试项目 步骤1.1创建项目 命令&#xff1a; vue create mock-demo 步骤1.2安装依赖 命令&#xff1a; #使用axios发送ajax cnpm install axios--save #使用mockjs产生随机数据 cnpm install mockjs--save-dev #使用json5解决ison文件&#xff0c;无法添加注释…
阅读更多...
matlab如何建立一个空矩阵，然后往里面赋值

matlab如何建立一个空矩阵，然后往里面赋值

1 x1:0.1:10; 2 y[]; 3 for i1:length(x) 4 % y[y;x(i)];%把每一个x都放到Y里&#xff0c;成为一列 5 y[y,x(i)];%把每一个x都放到Y里&#xff0c;成为一行 6 end 转载于:https://www.cnblogs.com/sddai/p/5410821.html
阅读更多...
二、在jQuery中使用mockjs

二、在jQuery中使用mockjs

在jQuery项目中使用mock.js 步骤1.搭建项目 步骤1.1创建项目 新建文件夹jquery-mock-demo 步骤1.2新建index.html&#xff0c;引入jquery.js文件和mock.js <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title&g…
阅读更多...
最新文章

Copyright @ 2022~2023