Ajax学习笔记——Ajax基础总结

最新推荐文章于 2022-10-21 17:12:38 发布
最新推荐文章于 2022-10-21 17:12:38 发布
阅读量200 收藏 1
点赞数
分类专栏： 前端 文章标签： ajax js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hoshizola/article/details/119740828
版权

1. AJAX 简介

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

2. AJAX特点

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

3.使用

3.1 XMLHttpRequest

有关Ajax的所有操作都是通过XMLHttpRequest来操作的。

3.2 服务端的准备

在使用Ajax之前，因为需要对服务端发送请求，因此这里使用express框架，创建server.js文件搭建一个服务器。由于Ajax默认是服从同源策略，因此在服务器中设置Access-Control-Allow-Origin响应头在解决跨域问题（CORS跨域）。

// server.js
const express = require('express')
// 创建应用对象
const app = express()
// 创建路由规则
app.get('/index', (request, response) => {
  // 设置允许跨域的响应头
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 设置响应体
  response.send('hello ajax')
})
app.post('/index', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*')
  response.send('post ajax')
})

// 监听端口，启动服务
app.listen(8282, () => {
  console.log('服务器启动，8000端口监听中...');
})

在测试过程中，要保证服务端处于开启状态，开启命令：node server.js

3.3 ajax发送get请求

准备一个html文档，点击按钮向接口http://127.0.0.1:8282/index发送请求，请求的数据显示在div中

<!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{
      border: 1px solid black;
      width: 250px;
      height: 150px;
    }
  </style>
  
</head>
<body>
  <button>发送请求</button>
  <br>
  <br>
  <div class="result"></div>

  <script>
    let button = document.getElementsByTagName('button')[0]
    let divObj = document.getElementsByClassName('result')[0]
    button.addEventListener('click', function(){
      // 创建对象
      const xhr = new XMLHttpRequest()
      // 设置请求方法和url
      xhr.open('GET', 'http://127.0.0.1:8282/index')
      // 发送请求
      xhr.send()
      // 处理服务端返回的结果
      xhr.onreadystatechange = function() {
        /* 
          readyState属性值：
            0 - 对象未初始化
            1 - open方法执行
            2 - send方法执行
            3 - 服务端返回部分结果
            4 - 服务端返回全部结果
        */
        if(xhr.readyState === 4) {
          // 判断响应状态码  2xx成功
          if(xhr.status >= 200 && xhr.status < 300) {
            // 响应行
            // console.log(xhr.status)
            // console.log(xhr.statusText) // 状态描述
            // // 响应头
            // console.log(xhr.getAllResponseHeaders())
            // // 响应体
            // console.log(xhr.response)
            divObj.innerHTML = xhr.response
          }
        }
      }
    })
  </script>
</body>
</html>

结果：
在这里插入图片描述
若需要在发送get请求时携带参数，则url应写为：

xhr.open('GET', 'http://127.0.0.1:8282/index?a=100&b=200&c=300')
3.4 发送post请求

将原来代码中xhr.open()第一个参数右GET改为POST：

xhr.open('POST','http://127.0.0.1:8282/index')

在这里插入图片描述
使用post方法发送请求体时，要将请求体内容放在send方法中，格式不固定，只要服务端能够处理即可：

// 形式一
xhr.send('a=100&b=200&c=300')
// 形式二
xhr.send('a:100&b:200&c:300')
// ...
3.5 设置请求头信息
// Content-Type  请求体类型
// application/x-www-form-urlencoded 查询字符串类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

自定义请求头

xhr.setRequestHeader('Name', 'Alice')

此时服务端需要设置Access-Control-Allow-Headers字段，表示可以接收处理的请求头，否则会报错：

app.post('/index', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*')
  response.setHeader('Access-Control-Allow-Headers', '*')
  response.send('post ajax')
})

一般可以在请求头中存放服务端要校验的信息。

3.6 服务端响应 json数据时

服务端若需要将json对象的数据返回给客户端，需要将其转为JSON字符串再发送，server.js添加代码如下：

// all()表示可以匹配所有请求的方法
app.all('/json-data', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*')
  response.setHeader('Access-Control-Allow-Headers', '*')
  // 响应json数据，需要将json对象转为字符串格式
  const data = {
    'name': 'Alice',
    'age': 34
  }
  response.send(JSON.stringify(data))
})

客户端处理结果时，需要将json字符串转为json对象：

button.addEventListener('click',function() {
  let xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://127.0.0.1:8282/json-data')
  xhr.send()
  xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
      if(xhr.status >= 200 && xhr.status < 300) {
        // 将服务端返回的json数据转为json对象
        let data = JSON.parse(xhr.response)
        console.log(data)
      }
    }
  }
})

控制台：
在这里插入图片描述
或者可以直接在xhr对象上设置响应体类型为json，就不用执行转换步骤：

button.addEventListener('click',function() {
  let xhr = new XMLHttpRequest()
  xhr.responseType = 'json'
  xhr.open('GET', 'http://127.0.0.1:8282/json-data')
  xhr.send()
  xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
      if(xhr.status >= 200 && xhr.status < 300) {
        let data = xhr.response
        console.log(data)
      }
    }
  }
})

控制台：
在这里插入图片描述

3.7 解决IE缓存问题

在IE浏览器中，发送Ajax请求回来的数据会被缓存，导致在某些时效性比较强的场景下会得到错误的数据。因此需要在url中携带一个表示时间戳的参数，使得IE浏览器认为每次都在发送不同的请求：

 xhr.open('get', 'http://127.0.0.1:8282/json-data?t='+Date.now())
3.8 请求超时和网络异常处理

可以在xhr对象上设置超时时间，若在这个时间之内没有获取到响应结果，则会自动取消。例如，在服务端设置3秒后返回结果：

// 延迟响应
app.get('/delay', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*')
  setTimeout(() => {
    response.send('延迟响应')
  }, 3000)
})

客户端设置超时时间为2s

<script>
  let button = document.getElementsByTagName('button')[0]
  let divObj = document.getElementsByTagName('div')[0]
  button.addEventListener('click', function() {
    let xhr = new XMLHttpRequest()
    // 设置超时2s取消请求
    xhr.timeout = 2000
    // 超时回调
    xhr.ontimeout = function() {
      alert('网络较慢，请稍后重试！')
    }
    xhr.open('GET', 'http://127.0.0.1:8282/delay')
    xhr.send()
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        if(xhr.status >= 200 && xhr.status < 300) {
          divObj.innerHTML = xhr.response
        }
      }
    }
  })
</script>

控制台：
在这里插入图片描述
也可以设置网络异常时的回调：

xhr.onerror = function() {
  alert('网络异常！')
}

在浏览器中，将网络状态设为offline，模拟没有网络的情况
在这里插入图片描述

3.9 取消请求

xhr对象上的abort()可以用于取消请求：

xhr.abort()
3.10 重复发送请求问题

当我们多次点击按钮发送请求时，会对服务器造成一定压力，且多次请求的操作并不是必要的，解决这个重复请求问题，需要当再次发送请求时，把上一次没完成的请求取消掉。

<body>
  <button>发送请求</button>
  <script>
    let button = document.getElementsByTagName('button')[0]
    // 是否正在处理ajax请求的标识
    let isSending = false  
    let xhr
    button.addEventListener('click', function() {
      // 如果上一次请求还在，取消，重新发起请求
      if(isSending) {
        xhr.abort()
      }
      xhr = new XMLHttpRequest()
      isSending = true
      xhr.open('GET', 'http://127.0.0.1:8282/delay')
      xhr.send()
      xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
          // 请求处理完，无论状态码是什么，都是为false
          isSending = false
        }
      }
    })
  </script>
</body>
Hoshizola
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax超详细学习笔记
康康要加油的博客
02-23 991
文章目录一、Ajax简介二、Ajax的使用1、XMLHttpRequest 对象2、Ajax的使用步骤2.1、创建XMLHttpRequest对象2.2、 给定请求方式以及请求地址2.3、 发送请求2.4、 获取服务器端给客户端的响应数据3、Ajax的运行原理三、 JSON详解1、JSON简介2、为什么要使用JSON3、JSON的语法规则4、JSON的6种数据类型5、Jackson的使用5.1、Jackson简介5.2、在响应中通过 JSON 格式传递5.3、通过 JSON 格式在响应中传递单个对象5.4、
web学习笔记 —— javascript基础
05-25
这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界，理解其基本概念和常用语法。 JavaScript语法基础： 1. 变量：在JavaScript中，变量用于存储数据。声明变量使用`var`关键字，例如`var myVar = ...
AJAX的三种实现方式以及JS的原生实现方式
qq_35417353的博客
06-27 335
AJAX的基本使用AJAX的基本认识什么是AJAX原生js实现AJAXJQuery的GET方式实现AJAXjQuery 的 POST 方式实现 AJAXjQuery 的通用方式实现 AJAX(重要)AJAX 小结 AJAX的基本认识 什么是AJAX AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。 一般的网页如果需要更新内容，必需重新加载个页面。 而 AJAX 通过浏览
AJAX笔记（完结版）
sokoooo的博客
01-10 1271
一、XML 1. XML（可扩展标记语言）：被设计用来传输和存储数据； 2. XML：支持自定义标签，无预定义标签。 3. HTML和XML的区别 1）HTML：超文本标记语言，用于显示数据，不区分大小写； XML：可扩展标记语言，用于传输数据，区分大小写； 2）HTML：预定义标记； XML：自定义标记。 二、AJAX特点 1. 优点： 1）可以直接与服务器端进行通信，而不需要刷新页面； 2）允许根据用户事件来更新部分内容页面； 2. 缺点： 1）没有...
Ajax学习笔记
青春华航
05-06 495
<br />2011-05-06<br />//Ajax学习笔记<br />ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术<br />ajax 异步javascript和xml (asynchronous javascript and xml)<br />XMLHttpRequest是ajax的基础，它用于在后台与服务器交换数据<br />创建XMLHttpRequest对象<br /> 所有现代浏览器(ie7+、firefox、chrome、safari、opera)均内建XMLHt
Ajax基础笔记（以理解为主）
最新发布
weixin_62120659的博客
10-21 245
一、Ajax介绍1、它就是一个方法，不是语言2、它的功能：在页面不跳转的情况下，向后端获取数据，在页面上表现出来二、一些技术的介绍1.xml：网络中的传输的数据格式（和html类似）。2、css、js为基础不做介绍三、ajax的核心就是下面四个步骤完成的1）创建异步对象2）给异步对象绑定事件。3）初始化异步请求对象4）使用异步对象发送请求
AngularJS学习笔记——通过Ajax获取JSON数据T
07-16
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例，现在把模型中的数据单独写成一个JSON文件，再通过发起Ajax请求的方式获取JSON数据。这样，清单列表中的数据项就都是通过JSON数据来获取的了。
js学习笔记——（15）jQuery选择器、样式操作、效果
01-20
在JavaScript的世界里，jQuery是一个非常流行和强大的库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本文将深入探讨jQuery的选择器、样式操作和效果，帮助你更好地理解和应用jQuery。 ### 1. jQuery...
jqGrid 学习笔记整理——进阶篇(一 )
11-23
此外，jqGrid 还支持多种数据源（如 JSON、XML、AJAX 等），可以通过更改 `datatype` 值来切换。对于远程数据，通常需要设置 `url` 参数来指定数据获取的地址，并可能需要配置 `mtype`（请求类型，通常是 GET 或 ...
7、使用JSON向服务器发送数据——ajax基础笔记
05-26
在“使用JSON向服务器发送数据——ajax基础笔记”这个主题中，我们首先会了解如何创建一个XMLHttpRequest对象。在JavaScript中，你可以通过`new XMLHttpRequest()`来实例化一个对象，然后利用它的方法如`open()`、`...
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
AJAX笔记
03-22
NULL 博文链接：https://carlos335-163-com.iteye.com/blog/973139
《Ajax笔记》
02-27
就业班时，就业老师整理的关于 Ajax的面试笔记，里边含有javaScript基础加强， Ajax编程入门，jQuery框架等一些核心资料。 核心内容概述 1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。 3.jQuery框架，九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星)
AJAX知识点大全 最全笔记 知识点合集
liuzizhoufaith的博客
04-20 1489
第一章 绪论 第一讲.AJAX简介 不刷新的情况下向服务端发送请求,获得响应 AJAX全称是Asynchronous JavaScript And XML 异步的JS和XML 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势是无刷新获取数据 AJAX不是新的编程语言,而是一种将现有标准组合在一起使用的新方式 如: 百度在搜索内容时,会出现关键词的相关词提醒,就是用的AJAX 当注册网站时输入用户名,如果用户名用过了,会提示用户名不可用,也是AJAX 网站的二级菜单,一般都是鼠标放上去了
Ajax 完整学习笔记
刘伟佳的博客
02-19 3255
Ajax 一、什么是Ajax AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。 AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应...
【Ajax】——学习后的小结
Reka's blog ^_^
01-15 1995
背景：牛腩中接触过CSS，当时对这个CSS情有独钟，因为它可以美化界面，而我就喜欢和界面这种看得见效果的东西打交道，现在又重新学习，而且内容还那么多，超级开心，废话少说，动手吧！ 一、CSS滤镜     CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。     CSS滤镜的标识符是“filter”
Ajax 的全面总结
油墨香^-^的博客
05-14 1794
Ajax在前端开发中有着举足轻重的地位，关于Ajax的使用和注意事项一直是一个重要的话题，借此机会，本文希望对Ajax做一个全面的总结，彻底揭开Ajax的神秘面纱。 一.什么是Ajax Ajax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求。通俗的理解的话就是，如果没有Ajax技术，改变网页的一小部分（哪怕是一行文字、一张图片）都需要重新加载一次整个页面，而有了Ajax之后，就可以实现在网页不跳转不刷新的情况下，在网页后台提交数据，部分
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值