04_前后端交互技术之Ajax异步请求

2024-01-27 10:20
文章标签 请求 异步 04 ajax 交互技术

本文主要是介绍04_前后端交互技术之Ajax异步请求，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本课目标

  • 理解什么是同步请求和异步请求
  • 理解Ajax的请求原理
  • 掌握Ajax的基本用法
  • 掌握课堂案例

1. 同步请求与异步请求的区别

1.1 什么是同步请求

  • 同步请求：发送请求后需要等待服务端响应，同步请求阻止代码的执行，这会导致屏幕上出现“冻结”和无响应的用户体验。

1.2 什么是异步请求

  • 异步请求：当请求的响应数据完全收到之时，会执行一个指定的回调函数，而在执行异步请求的同时，浏览器会正常地执行其他事务的处理。

2. Ajax的基本介绍与XMLHttpRequest对象

  • 官方介绍：从服务器获取数据 - 学习 Web 开发 | MDN

  • AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

  • AJAX 最主要的两个特性做下列事：

    • 在不重新加载页面的情况下发送请求给服务器。

    • 接受并使用从服务器发来的数据。

  • XMLHttpRequest：XMLHttpRequest是Ajax的核心，XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

2.1 Ajax提交Get请求

  • 课堂案例：01.Ajax提交get请求.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 基于Ajax发送一个get请求1.查看xmlHttpRequest的构造函数，如何创建xmlHttpReqyest2.XMLHttpRequest.open()方法初始化一个新创建的请求，或重新初始化一个请求。xhrReq.open(method, url, async, user, password);3.XMLHttpRequest.send() 方法用于发送 HTTP 请求在 XHR 请求中要发送的数据体。可以是：比如说是POST请求，就需要把POST请求的参数传入，如果是GET请求，就不需要传入参数4.处理服务端的响应内容*///1.创建XMLHttpRequest对象const request = new XMLHttpRequest();//2.方法初始化一个新创建的请求，GET请求的参数是在？后面request.open("GET","http://www.你的有效的网站.cn/spboot/userLoginGetRequest?username=admin&password=66666")//3.发送请求request.send();//4.如何接受服务端的响应内容/* 通过onreadystatechange来监听服务端响应的结果只读属性  XMLHttpRequest.status  返回了响应中的数字状态码XMLHttpRequest.responseText 在一个请求被发送后，从服务器端返回文本。onreadystatechange      当 readyState 的值改变的时候，callback 函数会被调用*/request.onreadystatechange = function(){console.log(request.readyState)//响应完成并且响应成功的话，就获取服务端响应的内容if(request.readyState==4&&request.status==200){//  console.log(request.status)console.log(request.responseText)}}</script>
</body>
</html>

2.2 Ajax提交Post请求

  • 课堂案例：02.Ajax提交post请求.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 请求接口  http://www.有效的网站为什么浏览器会报错？是因为该接口只能够接受POST请求，通过浏览器访问是属于GET请求There was an unexpected error (type=Method Not Allowed, status=405).错误信息：需要在请求的时候，加上头部信息*/const request = new XMLHttpRequest();//2.创建一个与服务器的链接request.open("POST","http://www.有效的网站")//如果是post请求，要加上头部信息request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//XMLHttpRequest.timeout 是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数request.timeout = 1000;        //如果时间内没法发出请求，就失败//3.调用send方法，发送请求request.send("username=admin&password=66666")//4.通过 onreadystatechange 绑定一个回调函数request.onreadystatechange = function(){if(request.readyState==4&&request.status==200){console.log("post异步请求完成")console.log(request.responseText)}}</script>
</body>
</html>

2.3 中文编码的方式

  • 课堂案例：03.中文字符编码方式.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 场景：当请求参数提交到服务端的时候，如果有特殊字符存在，需要进行编码，服务端会自己解码一个中文会被编码成3个字组成encodeURIComponent 和 encodeURI的区别？encodeURIComponent支持的字符更多*/const str = "比屋  教-育"//%E6%AF%94%E5%B1%8B%20%20%E6%95%99-%E8%82%B2const result = encodeURI(str)console.log(str)console.log(result)//服务端解码：  %E6%AF%94const decodeStr = decodeURI("%E6%AF%94")console.log(decodeStr)console.log("------------")/* 对URL进行编码http://www.biwuit.cn/spboot/userLoginGetRequest?username=admin&password=66666*/const url = "http://www.biwuit.cn/spboot/userLoginGetRequest?username=张三&password=66666";console.log(encodeURI(url))console.log(encodeURIComponent(url))</script>
</body>
</html>

2.4 JSON对象与字符串互相转换

  • JSON.parse() 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换 (操作)。

  • JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

  • 课堂案例：04.JSON对象与字符串互相转换.html

    • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* JSON:是一种数据格式，非常容易理解，用途 客户端与服务端之间进行数据传递，客户端可以发送json格式的数据到服务端，服务端也可以响应给客户端json格式的数据首先是一个大括号，在大括号里面就是键值对组成的{key:valuekey:valuekey:valuekey:value}{"username":"zhangsan""age":"22""gender":"男""hobby":"篮球，足球"}总结：jason的数据格式是javascript内置的，可以和jsvascript的对象互相转换，注意的是json格式的数据的key是需要加双引号的*///1.创建一个json格式的字符串const jsonStr = '{"username":"张三","age":"22"}'//2.创建以恶搞js对象const obj = {username:"张三",age:20,gender:"男",hobby:"足球，篮球"}//3.可以把js对象转换成json格式的字符串吗？console.log(obj)console.log(obj.username)const ObjStr = JSON.stringify(obj)console.log(ObjStr)console.log(ObjStr.username)       //只有对象才能通过 . 取值console.log("-------------")//4.可以把json格式的字符串转换成js对象吗？console.log(jsonStr)const jsonObj = JSON.parse(jsonStr)console.log(jsonObj.username)console.log(jsonObj)</script>
</body>
</html>

      总结：json的数据格式是javascript内置的，可以和javascirpt的对象互相转换。需要注意的是json格式的数据的key是需要加双引号的。

    • 用途：主要是用于客户端与服务端之间的数据传递。

3. FormData对象的使用

  • FormData：FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

  • 课堂案例：05.FormData对象的基本使用.html

    • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><form action="http://www.有效的网站" id="form1">用户名：<input type="text" name="username"><br>密码：<input type="password" name="password"><br><input type="submit" value="提交"></form><script>/* 问题：如果表单的输入项很多的话，需要手动的获取表单输入项的值，比较繁琐有没有简单的方式？可以使用FormDate()*/const request = new XMLHttpRequest();const form1Obj = document.querySelector("#form1")const inputs = document.querySelectorAll("input")form1Obj.addEventListener("submit", function (e) {//参数表单对象作为参数,自动完成参数的收集const formDataObj = new FormData(form1Obj)//阻止表单的提交e.preventDefault();//通过Ajax提交request.open("POST", "http://www.有效的网站")//头部信息      如果数据格式是FormData，不需要头部信息// request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//获取数据// const usernameValue = inputs[0].value;// const passwordValue = inputs[1].value;// const args = "username="+usernameValue+"&"+"password="+passwordValue;//使用FormDate获取参数console.log(formDataObj.get("username"))console.log(formDataObj.get("password"))request.send(formDataObj)// request.send(args)request.onreadystatechange = function () {if (request.readyState == 4 && request.status == 200) {console.log(request.responseText)}}})</script>
</body></html>

      FormData 的 get() 方法用于返回 FormData 对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用 getAll() 方法。

4. json格式数据作为参数提交

  • 课堂案例：06.json数据格式提交.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><form action="http://www.有效的网站" id="form1">用户名：<input type="text" name="username"><br>密码：<input type="password" name="password"><br><input type="submit" value="提交"></form><script>/* 需求：服务端接受的参数格式需要json的数据格式我们掌握的参数格式：username=admin&password=123提交参数个格式必须为：{"username":"admin","password":"123"}需要把上面的数据格式转换为json格式如何实现？*/const request = new XMLHttpRequest();const form1Obj = document.querySelector("#form1")form1Obj.addEventListener("submit", function (e) {//阻止表单的提交e.preventDefault();//参数表单对象作为参数,自动完成参数的收集const formDataObj = new FormData(form1Obj)//需要json的数据格式const submitObj = {};formDataObj.forEach(function(value,key){//第一次遍历 username:admin//第二次遍历 passname:123// console.log(value)  // console.log(key)submitObj[key] = value;})//把submitArgs对象转换为json格式字符串const submitArgs = JSON.stringify(submitObj)console.log(submitArgs)request.open("POST", "http://www.有效的网站")request.send(submitArgs)request.onreadystatechange = function () {if (request.readyState == 4 && request.status == 200) {console.log(request.responseText)}}})</script>
</body>
</html>

5. 文件上传的实现

  • 课堂案例：07.文件上传案例实现.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 需求：将图片上传到服务器--><input type="file" id="file1"><br><button>上传图片</button><br><!-- 显示上传的图片src：填写服务器的地址--><img src="" alt="" height="700px" width="600px"><script>/* 通过Ajax上传图片*/const request = new XMLHttpRequest();const fileObj = document.querySelector("#file1")const btnObj = document.querySelector("button")const imgObj = document.querySelector("img")//绑定事件btnObj.addEventListener("click",function(){//2.判断用户是否添加了文件console.dir(fileObj)if(fileObj.files.length<=0){return alert("请上传图片")}//3.将用户添加的文件绑定到formData对象console.log("-----------")const formData = new FormData();console.dir(formData)formData.append('files',fileObj.files[0])//4.发送Ajax请求，需要通过post请求发送request.open("POST","http://www.有效的网站")request.send(formData)request.onreadystatechange = function () {if (request.readyState == 4 && request.status == 200) {//获取服务端响应胡来的内容//{"msg":"文件上传成功","fileName":"f78fc8ba-2553-4b1f-8b02-5fae2f39b3101.jpg","code":200}//服务端在存储文件的时候，因为考虑到文件名会相同覆盖，所以在服务端生成一个随机字符串来代替文件名console.log(request.responseText)//5.把上传到服务端图片显示在当前页面//6.需要判断服务端响应回来的消息是否是文件上传成功，如果是 才显示const responseValue = JSON.parse(request.responseText) if(responseValue.msg=="文件上传成功"){//会显到页面imgObj.src = 'http://www.有效的网站/'+responseValue.fileName;}}}})</script>
</body>
</html>

这篇关于04_前后端交互技术之Ajax异步请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/649943。

相关文章

easyui同时验证账户格式和ajax是否存在

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法（字母开头，允许4-16字节，允许字母数字下划线）';return fal
阅读更多...
取得 Git 仓库 —— Git 学习笔记 04

取得 Git 仓库 —— Git 学习笔记 04

取得 Git 仓库 —— Git 学习笔记 04 我认为， Git 的学习分为两大块：一是工作区、索引、本地版本库之间的交互；二是本地版本库和远程版本库之间的交互。第一块是基础，第二块是难点。 下面，我们就围绕着第一部分内容来学习，先不考虑远程仓库，只考虑本地仓库。 怎样取得项目的 Git 仓库？ 有两种取得 Git 项目仓库的方法。第一种是在本地创建一个新的仓库，第二种是把其他地方的某个
阅读更多...
js异步提交form表单的解决方案

js异步提交form表单的解决方案

1.定义异步提交表单的方法 （通用方法） /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如：URLDecoder.decode(param,"UTF-8")</strong></span>
阅读更多...
javascript实现ajax

javascript实现ajax

什么是 ajax ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），也就是无刷新数据读取。 http 请求 首先需要了解 http 请求的方法（GET 和 POST）。 GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。 POST 用于上传数据。POST 安全性一般，容量几乎无限。 aj
阅读更多...
Java http请求示例

Java http请求示例

使用HttpURLConnection public static String httpGet(String host) {HttpURLConnection connection = null;try {URL url = new URL(host);connection = (HttpURLConnection) url.openConnection();connection.setReq
阅读更多...
浙大数据结构：04-树7 二叉搜索树的操作集

浙大数据结构：04-树7 二叉搜索树的操作集

这道题答案都在PPT上，所以先学会再写的话并不难。 1、BinTree Insert( BinTree BST, ElementType X ) 递归实现，小就进左子树，大就进右子树。 为空就新建结点插入。 BinTree Insert( BinTree BST, ElementType X ){if(!BST){BST=(BinTree)malloc(sizeof(struct TNo
阅读更多...
AsyncTask 异步任务解析

AsyncTask 异步任务解析

1：构建AsyncTask 子类的回调方法： A：doInBackground:   必须重写，所有的耗时操作都在这个里面进行； B: onPreExecute:     用户操作数据前的调用； 例如：显示一个进度条 等 ； C: onPostExecute:    当doInBackground 执行完成后；会自动把数据传给onPostExecute方法；也就是说：这个方法是处理返回的数据的方法
阅读更多...
10 Source-Get-Post-JsonP 网络请求

10 Source-Get-Post-JsonP 网络请求

划重点 使用vue-resource.js库 进行网络请求操作POST : this.$http.post ( … )GET : this.$http.get ( … ) 小鸡炖蘑菇 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-w
阅读更多...
读软件设计的要素04概念的关系

读软件设计的要素04概念的关系

1. 概念的关系 1.1. 概念是独立的，彼此间无须相互依赖 1.1.1. 一个概念是应该独立地被理解、设计和实现的 1.1.2. 独立性是概念的简单性和可重用性的关键 1.2. 软件存在依赖性 1.2.1. 不是说一个概念需要依赖另一个概念才能正确运行 1.2.2. 只有当一个概念存在时，包含另一个概念才有意义 1.3. 概念依赖关系图简要概括了软件的概念和概念存在的理
阅读更多...
jQuery—Ajax使用

jQuery—Ajax使用

AJAX是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新[百度百科]   ** XMLHttpRequest对象 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 常用属性： read
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2