数据做图网站有哪些,wordpress关站,环保网站 中企动力建设,网站开发的形式有多种方式本课目标
理解什么是同步请求和异步请求理解Ajax的请求原理掌握Ajax的基本用法掌握课堂案例
1. 同步请求与异步请求的区别
1.1 什么是同步请求 同步请求#xff1a;发送请求后需要等待服务端响应#xff0c;同步请求阻止代码的执行#xff0c;这会导致屏幕上出现“冻结”…本课目标
理解什么是同步请求和异步请求理解Ajax的请求原理掌握Ajax的基本用法掌握课堂案例
1. 同步请求与异步请求的区别
1.1 什么是同步请求 同步请求发送请求后需要等待服务端响应同步请求阻止代码的执行这会导致屏幕上出现“冻结”和无响应的用户体验。
1.2 什么是异步请求 异步请求当请求的响应数据完全收到之时会执行一个指定的回调函数而在执行异步请求的同时浏览器会正常地执行其他事务的处理。
2. Ajax的基本介绍与XMLHttpRequest对象 官方介绍从服务器获取数据 - 学习 Web 开发 | MDN AJAX 是异步的 JavaScript 和 XMLAsynchronous JavaScript And XML。简单点说就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSONXMLHTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性也就是说它可以在不重新刷新页面的情况下与服务器通信交换数据或更新页面。 AJAX 最主要的两个特性做下列事 在不重新加载页面的情况下发送请求给服务器。 接受并使用从服务器发来的数据。 XMLHttpRequestXMLHttpRequest是Ajax的核心XMLHttpRequestXHR对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定URL获取数据。这允许网页在不影响用户操作的情况下更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
2.1 Ajax提交Get请求 课堂案例01.Ajax提交get请求.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
bodyscript/* 基于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?usernameadminpassword66666)//3.发送请求request.send();//4.如何接受服务端的响应内容/* 通过onreadystatechange来监听服务端响应的结果只读属性 XMLHttpRequest.status 返回了响应中的数字状态码XMLHttpRequest.responseText 在一个请求被发送后从服务器端返回文本。onreadystatechange 当 readyState 的值改变的时候callback 函数会被调用*/request.onreadystatechange function(){console.log(request.readyState)//响应完成并且响应成功的话就获取服务端响应的内容if(request.readyState4request.status200){// console.log(request.status)console.log(request.responseText)}}/script
/body
/html
2.2 Ajax提交Post请求 课堂案例02.Ajax提交post请求.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
bodyscript/* 请求接口 http://www.有效的网站为什么浏览器会报错是因为该接口只能够接受POST请求通过浏览器访问是属于GET请求There was an unexpected error (typeMethod Not Allowed, status405).错误信息需要在请求的时候加上头部信息*/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(usernameadminpassword66666)//4.通过 onreadystatechange 绑定一个回调函数request.onreadystatechange function(){if(request.readyState4request.status200){console.log(post异步请求完成)console.log(request.responseText)}}/script
/body
/html
2.3 中文编码的方式 课堂案例03.中文字符编码方式.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
bodyscript/* 场景当请求参数提交到服务端的时候如果有特殊字符存在需要进行编码服务端会自己解码一个中文会被编码成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?usernameadminpassword66666*/const url http://www.biwuit.cn/spboot/userLoginGetRequest?username张三password66666;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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
bodyscript/* JSON:是一种数据格式非常容易理解用途 客户端与服务端之间进行数据传递客户端可以发送json格式的数据到服务端服务端也可以响应给客户端json格式的数据首先是一个大括号在大括号里面就是键值对组成的{key:valuekey:valuekey:valuekey:value}{username:zhangsanage:22gender:男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对象的使用 FormDataFormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去本接口和此方法都相当简单直接。如果送出时的编码类型被设为 multipart/form-data它会使用和表单一样的格式。 课堂案例05.FormData对象的基本使用.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbodyform actionhttp://www.有效的网站 idform1用户名input typetext nameusernamebr密码input typepassword namepasswordbrinput typesubmit value提交/formscript/* 问题如果表单的输入项很多的话需要手动的获取表单输入项的值比较繁琐有没有简单的方式可以使用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 usernameusernameValuepasswordpasswordValue;//使用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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
bodyform actionhttp://www.有效的网站 idform1用户名input typetext nameusernamebr密码input typepassword namepasswordbrinput typesubmit value提交/formscript/* 需求服务端接受的参数格式需要json的数据格式我们掌握的参数格式usernameadminpassword123提交参数个格式必须为{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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
body!-- 需求将图片上传到服务器--input typefile idfile1brbutton上传图片/buttonbr!-- 显示上传的图片src填写服务器的地址--img src alt height700px width600pxscript/* 通过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.length0){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
