Ajax
文章平均质量分 53
Ajax学习集
昔冰_G
努力的孩子运气不会太差,加油!
展开
-
【将Ajax的异步转为同步,获取Ajax的success内部的返回值】---Promise来助力
封装了个简单的ajax(get或post)---ajaxJar函数想着拿用户登录来测试下,结果一测试就没刹住车......在用户的注册功能中,对用户名的input绑定了onblur事件,当失去焦点时判断是否为空,如果不为空再到数据库中查询这个用户名是否已经被占用了;当最后点击提交按钮的时候再调用检查用户名是否被占用的方法,如果是则不予通过,否则通过并完成注册。/*B函数*/function findUsername(obj){ /*...是否为空的逻辑*/ /*不为空发起查询原创 2022-05-01 00:01:43 · 718 阅读 · 0 评论 -
Ajax:获取服务端XML数据(responseXML、content-type)
XML:用于存储和传输数据,关注的是数据的内容HTML:用于展示数据,关注的是数据的外观平时使用response来获取服务端的响应数据;对于XML数据需要使用responseXML来获取。客户端获取到的responseXML有着和document类似的获取标签元素对象的方法从而可以从存在标签的响应数据中获取到被包裹在内的值<body> <!-- XML:用于存储和传输数据,关注数据的内容 HTML:用于展示数据,关注数据的外观 --> <.原创 2021-10-01 18:44:45 · 1213 阅读 · 0 评论 -
Ajax基础:restful风格api
获取信息:get;删除信息:delete;修改信息:put;1、模拟获取用户信息(get+路由)<body> <script src="js/jquery-3.5.1.min.js"></script> <script> // 获取用户信息 setTimeout(() => { $.ajax({ type: 'get', .原创 2021-10-01 18:04:45 · 199 阅读 · 0 评论 -
Ajax基础:发送jsonp请求(jsonp、jsonCallback)
jsonp走的是get请求方式,也就是ajax的默认请求方式;ajax方法中也涵盖了jsonp请求,可以通过ajax方法来发送jsonp请求;<!--客户端代码--><body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#bt原创 2021-10-01 16:30:20 · 10679 阅读 · 1 评论 -
Ajax基础:jQuery中封装的ajax方法的使用(重点:传递json类型数据-避免ajax方法对请求参数的默认格式转换)
ajax是一种经常用到的技术,而除了自行封装外,jQuery也对ajax进行了封装,所以被jQuery封装的ajax方法首先明确的是源于jQuery,自然要将jQuery的js文件引入<script src="js/jquery-3.5.1.min.js"></script>这里通过点击按钮后触发客户端ajax请求的发送<button id="btn">发送请求</button><script>// 为id为btn的按钮绑定原创 2021-10-01 11:59:06 · 818 阅读 · 0 评论 -
Ajax基础:携带cookie信息实现跨域登录功能(cookie的传递、express-session模块的使用)
注意事项: 1、携带cookie需要客户端的Ajax对象属性withCredentials值为true 2、携带cookie需要服务端配置头信息Access-Control-Allow-Credentials为true 3、携带cookie需要服务端的配置头信息Access-Control-Allow-Origin为具体域名,不是 *服务端3000客户端html代码:<body> <div id="container"...原创 2021-09-24 20:01:39 · 716 阅读 · 0 评论 -
Ajax基础:访问非同源数据(服务器解决方案、request第三方模块)
同源可以限制客户端的Ajax请求,但是不能限制服务器端所以,可以让客户端先向自己所属的服务器发送请求,自己的服务器再向另一个服务器发送请求端口3000的html代码:<body> <button id="btn">提交请求</button> <script src="js/ajax.js"></script> <script> var btn = document.getElemen原创 2021-09-24 11:24:16 · 193 阅读 · 0 评论 -
Ajax基础:CORS跨域
CORS,跨域资源共享,允许浏览器向服务器发送Ajax请求,克服Ajax只能同源使用的限制操作: 服务端配置响应头,客户端继续使用ajax,客户端不需要做出调整 1、允许哪些客户端访问我(*表示所有):res.header('Access-Control-Allow-Origin', '*') 2、允许客户端使用哪些请求方法访问我:res.header('Access-Control-A...原创 2021-09-24 10:25:39 · 429 阅读 · 0 评论 -
jsonp处理非同源
Ajax可以在不刷新页面的情况下向服务器端发送,由于同源限制,不能进行非同源的请求发送什么是非同源:不同的协议、不同的域名、不同的端口,任何一个不同都属于非同源可以使用jsonp来解决非同源的请求发送原理: 将非同源的请求地址写在script标签的src属性中,而src是不受同源限制的作为src的属性,虽然是字符串类型,但是由于写在了script中,还是会被当作脚本去执行继而实现非同源的请求访问举例1:(在3000端口下的静态文件中写入script去访问...原创 2021-09-23 10:27:35 · 88 阅读 · 0 评论 -
FormData()二进制文件上传+进度条(组件结构源于Bootstrap)
注意引用bootstrap组件时除了粘贴结构,还要引入样式css文件、jQuery文件和bootstrap脚本文件因为bootstrap是基于jQuery的,所以注意顺序。客户端 16ajax.html 代码:(外链部分)<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="js/jquery-3.5.1.min.js"></script><scri..原创 2021-09-21 23:51:31 · 324 阅读 · 0 评论 -
Ajax基础:省市区三级联动(Ajax+template-web)
省市区三级联动注意事项:1、【市】要根据【省】的变化而变化,【区】要根据【市】的变化而变化2、select-option的下拉框,借助onchange事件,当改变选中内容时触发3、当选完省市区后,如果重新更改【省】,【市】应重新赋值,【区】应该清空不然就会造成残留的【市】【区】,不匹配【省】信息的数据同框出现的尴尬!客户端 14ajax.html 代码:(结构部分--省去了option选项,是因为option要用在模板中)<div id="container">..原创 2021-09-21 17:57:40 · 418 阅读 · 0 评论 -
Ajax基础:template-web的应用---搜索框自动提示、filter()筛选
利用文本框的oninput事件(当文本框内有内容输入时就会触发)一旦有输入就会触发,而打字速度很快时就可能某个字或某个词还没有打完就已触发也就造成了多次的无意义的触发,为了避免无意义的触发随带的请求,采取定时器对ajax请求采用定时器进行控制(例如下面的案例:事件触发后,没800毫秒发一次请求)页面结构是从bootstrap上找的个简单的结构:一个input文本框+一个span按钮自动提示的内容使用ul>li来存放选用模板:<li></li>模板数据原创 2021-09-21 16:46:04 · 268 阅读 · 0 评论 -
Ajax基础:利用不刷新页面对表单结果进行验证
验证邮箱唯一性当输入邮箱地址后,文本框失去焦点时触发判断(是否符合邮箱规则)和请求的发送利用Ajax可以在不刷新页面的情况下向服务器端发送请求(请求服务器检索邮箱是否已存在)客户端 12ajax.html 代码:(引入封装好的ajax函数文件ajax.js)<body> <div id="container"> <input id="inpEm" type="text" placeholder="请输入邮箱地址"> ..原创 2021-09-21 15:33:26 · 157 阅读 · 0 评论 -
Ajax基础:ajax函数封装(初级封装+升级封装Object.assign()对象覆盖、请求方式判断、post请求参数类型判断、请求参数处理、响应数据/响应头类型判断)
在使用ajax进行请求时,基本上都是四步骤:1、创建ajax对象2、配置ajax对象(以什么方式进行请求,向哪个地址发送请求)3、发送请求4、接收到相应数据后的事件处理为了避免不同的请求需要写同样的代码,造成了代码的冗余。现在对ajax请求进行封装,需要时调用传参即可:初级函数封装<body> <script> //创建ajax函数 function ajax(options) { //原创 2021-09-20 23:05:46 · 313 阅读 · 0 评论 -
Ajax基础:获取http状态码与Ajax缓存问题
Ajax请求状态码:0,1,2,3,4Http状态码:表示请求的处理结果,是服务器端返回的200/304/404/500等 可以使用Ajax对象的status对状态码进行获取我们可以使用onreadystatechange()或onload()来获取服务器端响应的数据当使用onload时,触发条件:对服务器端的响应数据接收完毕如果网络中断,将不能从客户端发送到服务器端,也就不能被触发onload事件但是会触发 onerror 事件,网络中断时触...原创 2021-09-20 19:40:33 · 731 阅读 · 0 评论 -
Ajax基础:获取服务端响应数据的状态码
相应数据的状态码:0,1,2,3,40:已创建了Ajax对象,但是没有对Ajax对象进行配置1:已对Ajax对象进行配置,但是没有发送请求2:已经发送请求,单没有接收到响应的数据3:已接收到服务器端的响应数据,但是没有接收完毕4:服务器端的响应数据接收完毕可以根据状态码来判断当前请求进行到哪一步了,当状态码为4时,表示可以对响应数据进行操作客户端 06ajax.html 代码:<body> <script> // 创建aj..原创 2021-09-20 18:19:04 · 1124 阅读 · 0 评论 -
Ajax基础:向服务器端传递post请求参数(普通类型+json类型)
(普通类型的请求数据)客户端04ajax.html的代码:<body> <p><input type="text" name="" id="username"></p> <p><input type="text" name="" id="age"></p> <p><input type="button" name="" value="提交" id="btn">&l..原创 2021-09-20 17:33:13 · 8784 阅读 · 0 评论 -
Ajax基础:向服务器端传递get请求参数
客户端 03ajax.html 的代码:<body> <p><input type="text" name="" id="username"></p> <p><input type="text" name="" id="age"></p> <p><input type="button" name="" value="提交" id="btn"></p>原创 2021-09-20 16:22:16 · 1117 阅读 · 0 评论 -
Ajax基础:处理服务端返回的json类型数据
客户端 02ajax.html脚本代码:<body> <script> var xhr = new XMLHttpRequest(); xhr.open('get', 'http://localhost:3000/responseData'); xhr.send(); xhr.onload = function() { // 由于获取到responseText这个响应内容的是一个.原创 2021-09-20 16:02:57 · 503 阅读 · 0 评论 -
Ajax基础:入门使用
可以用于客户端的信息请求客户端文件代码:(01ajax.html)1、创建Ajax对象var xhr=new XMLHttpRequest();2、告诉Ajax对象以什么样的方式进行请求,向哪里发送请求xhr.open('get','http://localhost:3000/first');3、发送请求xhr.send();4、获取服务器端响应给客户端的数据(由于请求受多方面影响,例如:网速,所以不是马上就能拿到的响应数据的,当本次请求的响应内容全部获取到后会.原创 2021-09-20 15:23:21 · 154 阅读 · 0 评论