![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Ajax
Always--Learning
选择远远大于努力
展开
-
Ajax-21:设置CORS响应头实现跨域
CORS是什么?CORS(跨域资源共享),是官方的跨域解决方案,它的特点是是不需要再客户端做任何特殊的操作,完全在服务器中进行处理,支持GET和POST请求。跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。设置允许跨域的相应头response.setHeader('Access-Control-Allow-Origin', '*')...原创 2021-03-14 15:25:50 · 512 阅读 · 0 评论 -
Ajax-20:Jquery发送jsonp请求
客户端$('button').eq(0).click(function() { $.getJSON('http://localhost:9000/jquery-jsonp?callback=?',function(data) { $('.result').html(` 编号: ${data.id}<br> 消息: ${data.msg} `) })});服务器端// 测试jquery的jso原创 2021-03-14 14:43:38 · 233 阅读 · 0 评论 -
Ajax-19:如何解决跨域问题
什么是JSONP?jsonp是一个非官方的跨域解决方案,只支持GET请求。JSONP是如何工作的?网页中有一些原本就具有跨域能力的标签,比如img,link,iframe,script,jsonp就是利用script标签的跨域能力进行发送请求的。以script标签为例,jsonp接受的不能是普通的字符串,而应当是js代码原生jsonp跨域案例当用户的焦点离开输入框时,发送jsonp请求,然后返回该用户名已存在,同时将输入框的边框颜色变成红色。客户端:// 获取input和p标签c原创 2021-03-14 11:07:13 · 166 阅读 · 0 评论 -
Ajax-18:同源策略
什么是同源策略?同源策略是浏览器的一种安全策略。同源指的是协议、域名、端口号必须完全相同,违背同源策略就是跨域。同源下访问URL可以简写const btn = document.querySelector('button');btn.onclick = function() { const xhr = new XMLHttpRequest(); // 因为满足同源策略,所以url路径可以简写 xhr.open('GET','/data'); xhr.send();原创 2021-03-14 10:19:08 · 236 阅读 · 0 评论 -
Ajax-17:使用fetch函数发送ajax请求
基础用法btn.onclick = function() { fetch('http://localhost:8000/fetch',{ // 请求方法 method: 'POST', // 请求头 headers: { name: 'justin' }, // 请求体 body: { username: 'jusitn',原创 2021-03-13 17:56:20 · 546 阅读 · 0 评论 -
Ajax-16:Axios发送Ajax请求
axios的CDN引入链接<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>axios的GET请求const btns = document.querySelectorAll('button');// 配置baseURLaxios.defaults.baseURL = 'http://localhost:8000';btns[0].onclick = function(原创 2021-03-13 17:44:52 · 142 阅读 · 0 评论 -
Ajax-15:Jquery中的Ajax
注意事项:在使用Jquery之前一定要先引入相关库。<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>使用Jquery发送GET请求$('button').eq(0).click(function() { $.get('http://localhost:8000/jquery-server',{a:20,b:30},function(data) { .原创 2021-03-13 15:18:13 · 171 阅读 · 0 评论 -
Ajax-14:请求重复发送问题
目标:当点击最新请求的时候,将上一次未完成的请求取消掉通过定义变量来存储表示是否正在发送请求的布尔值当用户点击发送请求的时候,开始判断这个变量是否为true,如果为true,则取消请求然后将变量置为true,直到检测到返回状态码为4将变量置为false代码let isSending = false;btn[0].onclick = function() { // 在此处判断是否正在发送,如果正在发送则取消 if(isSending) xhr.abort(); isSe原创 2021-03-13 14:32:50 · 179 阅读 · 0 评论 -
Ajax-13:取消请求
通过Ajax的abort方法取消请求实现效果原创 2021-03-13 09:45:08 · 222 阅读 · 0 评论 -
Ajax-12:请求超时与异常处理
设置多久之后请求不到即取消请求超时回调上面的两个语句要结合使用。浏览器断网开关断网提示原创 2021-03-13 09:31:37 · 208 阅读 · 0 评论 -
Ajax-11:解决IE缓存问题
什么是IE缓存问题答:IE缓存问题指的是IE浏览器遇到同样的Ajax请求的时候,会缓存返回结果,当返回结果发生变化的时候,浏览器显示的还是为变化的内容。解决办法在请求的URL上加上?t= Date.now();...原创 2021-03-13 09:11:44 · 169 阅读 · 0 评论 -
Ajax-10:服务端保存即自动重启工具包nodemon安装
安装代码npm install -g nodemon使用方式nodemon xxx.js实现效果在未使用该工具之前,如果对服务器端的代码做了修改,需要暂停服务器端,重新node以下才可以实现刷新,但是通过nodemon可以无需暂停,保存即实现刷新。...原创 2021-03-13 08:14:15 · 180 阅读 · 0 评论 -
Ajax-09:服务端响应JSON数据
服务端响应的数据应是字符串格式将对象通过JSON.stringify(data)转化为字符串客户端通过设置响应体格式或者通过JSON.parse获取搭配json实现效果原创 2021-03-12 21:53:54 · 190 阅读 · 0 评论 -
Ajax-08:Ajax设置请求头信息
固定情况xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");自定义请求头添加自定义请求头服务器路由设置为all,并且添加自定义响应头原创 2021-03-12 19:10:32 · 172 阅读 · 0 评论 -
Ajax-07:Ajax发送POST请求
需求描述当鼠标移动到div上的时候,向服务器发送请求,然后把服务器返回的结果显示到div上客户端网页客户端代码<h2>需求:当鼠标移动到div上的时候,向服务器发送请求,然后把服务器返回的结果显示到div上</h2><div class="result"></div><script> const result = document.querySelector('.result'); result.addEventLis原创 2021-03-12 15:42:36 · 137 阅读 · 0 评论 -
Ajax-06:Ajax设置请求参数
请求参数中的a,b,c通过添加?a=10&b=20&c=30实现效果原创 2021-03-12 14:44:51 · 172 阅读 · 0 评论 -
Ajax-05:Ajax请求的基本步骤
XHR请求即Ajax请求1:创建对象const xhr = new XMLHttpRequest();2:设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server');3:发送xhr.send();4:事件绑定on 当…的时候readystate 是xhr对象的属性,表示状态0 1 2 3 40 表示未初始化1 表示open方法已经调用完毕2 表示send方法已经调用完毕3 表示服务端返回了部分结果4 表示服务端返回了原创 2021-03-11 21:48:28 · 174 阅读 · 0 评论 -
Ajax-04:使用Ajax前的准备工作
客户端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-03-11 17:53:14 · 268 阅读 · 0 评论 -
Ajax-03:Express基本使用
express的安装步骤npm init --yesnpm i expressexpress监听端口的步骤// 1. 引入expressconst express = require('express');// 2. 创建应用对象const app = express();// 3. 创建路由规则// request是对请求报文的封装,response是对请求报文的一个封装app.get('/',(request,response) => { // 设置相应原创 2021-03-11 15:54:13 · 171 阅读 · 0 评论 -
Ajax-02:Chrome网络控制台查看通信报文
1. 在network中查看网络请求2. 在Headers中的Request Headers中查看请求头3. 查看Response Headers4. 查看响应体原创 2021-03-11 15:30:12 · 318 阅读 · 0 评论 -
Ajax-01:Ajax概述
什么是Ajax?答:它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站的体验。Ajax发送的请求是什么请求?答:HTTP请求。Ajax的优缺点优点:可以无需刷新页面即与服务器端进行通信。允许你根据用户事件来更新部分页面内容。缺点:没有浏览历史,不能后退。存在跨域问题。SEO不友好。HTTP协议的请求报文行:GET/POST等请求方式、 URL相关参数、HTTP协议的版本。头:Host,Cookie,Content-Type、User-Agent空行原创 2021-03-11 15:06:17 · 178 阅读 · 0 评论