一、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安全如果按CS结构来划分的话&#xff0c;主要涉及客户端本身数据安全&#xff0c;Client到Server网络传输的安全&#xff0c;客户端本身安全又包括代码安全和数据存储安全。所以当我们谈论App安全问题的时候一般来说在以下三类范畴当中。 App代码安全&#xff0c;包括…

二、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 问题

问题来源 这是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设置垂直滚动后&#xff0c;表头(th)错位问题 问题描述&#xff1a; 我在datatable里设置&#xff1a;”scrollY”: ‘300px’,垂直滚动属性后&#xff0c;表头的宽度就会错位&#xff0c;代码如下&#xff1a; <!-- HTML代码 --> <table id"dem…

三、解决ie缓存问题

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

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

问题描述 图片资源放在Assets.xcassets中&#xff0c;分别用UIImage的类方法imageNamed和imageWithContentsOfFile获取图片对象&#xff0c;但发生奇怪的情况&#xff0c;前者获取到图片对象&#xff0c;后者结果为nil。代码如下&#xff1a; 1.通过UIImage的类方法imageNamed:…

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

问题来源 题目来源链接见下方&#xff1a; https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown/description/ 问题简述&#xff1a; 假如有一个 i 个元素的数组&#xff0c;数组的每个元素表示了第 i 天某只股票的价格&#xff0c;设计一种算法来…

五、手动取消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命令详解

ps命令用于监测进程的工作情况。进程是正在运行的程序&#xff0c;一直处于动态变化中&#xff0c;而ps命令所显示的进程工作状态时瞬间的。 使用方式&#xff1a;ps[options][-help] 常用参数&#xff1a; -A &#xff1a;显示所有进程 -a&#xff1a;显示一个终端的所有进程。…

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

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

六、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…

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

编程语言&#xff08;programming language&#xff09;&#xff0c;来自百度百科的解释为&#xff1a;编程语言是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧&#xff0c;用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据&a…

三门问题(Monty Hall problem)背后的贝叶斯理论

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

一、在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;无法添加注释…

二、在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…

Android 中如何计算 App 的启动时间?

&#xff08;转载&#xff09; 已知的两种方法貌似可以获取&#xff0c;但是感觉结果不准确&#xff1a;一种是&#xff0c;adb shell am start -w packagename/activity,这个可以得到两个值&#xff0c;ThisTime和TotalTime&#xff0c;不知道两个有什么区别&#xff0c;而且与…

项目实战:Express实现学生管理系统(CRUD)

一、起步 初始化 npm init -y 生成package.json文件 模板处理 cnpm install express --save cnpm install bootstrap --savenpm install --save art-template npm install --save express-art-template//两个一起安装 npm i --save art-template express-art-template文件目录…

2016年度 JavaScript 展望(下)

【编者按】本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能&#xff0c;是《jQuery UI 实践》 一书的作者。 本文系 OneAPM 工程师编译呈现&#xff0c;以下为正文的第二部分。点此阅读第一部分。 本地移动 apps 在2015年&#xff0c;出现了一种新的基…

Python模块之MyQR——制作个性化动态二维码(超详细)

一、首先安装MyQR 第一种方式&#xff1a;cmd 命令行输入 pip install MyQR 第二种方式&#xff1a;pyCharm中手动选择进行安装 二、 myqr.run() 函数里面的参数 三、编写代码 # encodingutf-8 from MyQR import myqrmyqr.run(words"https://blog.csdn.net/weixin_448…