一、ajax介绍 ajax 是前后端交互的重要手段或桥梁。它不是一个技术,是一组技术的组合。 ajax :a:异步;j:js;a:和;x:服务端的数据。...ajax的组成: 异步的 js 事件 其他 js (处理解析数据) XMLHttpRequest 对象 数据(txt、json、xml、html) 通过后台与服务器进行少量数据交换,ajax可以使网页实现异步更新...传统的网页不使用ajax,如果需要更新内容,必须重新加载整个页面。...ajax请求原理:创建一个网络请求对象 -> 发送连接请求 -> 发送请求数据 -> 检查网络请求对象的状态 -> 如果响应成功了 -> 浏览器接收返回数据并更新网页。...、请求接口、是否异步处理。
文章目录 前后端交互工具 ---- Ajax 的使用 1. 在前端的页面里引入jQuery 第三方库 2.基于jQuery里面的ajax进行使用 回调函数 Ajax 的跨域问题 怎么解决跨域问题呢?...前后端交互工具 ---- Ajax 的使用 1....http请求的方法 (2) url 发送的服务器资源地址,从哪个具体地址返回响应 (3) success 是一个回调函数,通过这个回调函数,拿到响应的相关信息。 ...回调函数是在请求发送成功之后调用这个函数进行接收响应的响应。 Ajax 的跨域问题 ajax为了保证安全性,要求发起ajax请求的页面,和接收ajax请求的服务器,应在同一个域名下/地址下。 ...如果发起请求的页面 对应的域名(域名1) 和 接收ajax请求的服务器(域名2),如果域名1 和域名2 不相同,那么就认为是一次跨域请求 ajax 默认情况下,不允许跨域 怎么解决跨域问题呢?
当我们通过提交表单向服务器提交内容,或者进行一些其他操作,均涉及到了与浏览器之间的交互,传统的方式与AJAX方式的处理方法是不同的 传统方式:用户触发一个HTTP请求到 Web服务器,服务器接收并处理传来的数据...AJAX(Asynchronous JavaScript and XML) 异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术 第一种读法:AJAX —— ['eidʒæks...AJAX 所代表的的是 JavaScript和XML。AJAX是一种新技术,它通过利用 XML,HTML,CSS 和 JavaScript 来创建更好,更快,更具有交互性的Web应用程序。...type:请求方式 date:请求参数,想对应于原生JS实现的,data: "username=admin&age=20" success:响应成功后的回调函数 error:果请求响应出现错误,会执行的回调函数...,但是 AJAX 的一些应用场景,以及AJAX 如何搭配 常见的 如 JSON 等数据格式,实现前后端的交互,并没有提到,我们就放到后面说,将全部的内容挤到一起,无论是从篇幅或者说内容的针对性都是不够强的
有很多框架已经将 ajax 封装,需要的时候只需要调用就好,比如 jquery 是最常用的。我们为什么还需要学习 ajax 的封装呢?...首先加强我们对ajax的认识,其次如果只是因为ajax请求需要引入框架,我们可以自己封装一个,这样就不需要引入多余的框架了。...一、封装的注意点 封装是为了把相同的部分都实现公用,节省资源,提高代码复用性,工作效率也高,所以需要把不同的参数事件类型等通过调用的时候传入,需要注意点有: 1.1、传参 发送 ajax 请求时,主要参数有...: 请求url 请求类型 请求参数 成功回调 失败回调 超时时间 以上六个参数必须设置成动态传入的,便于控制任意 ajax 请求。...使用语法如下: xhr.onerror = function(){ console.log("网络异常,请检查网络") } 二、封装 ajax 代码 根据ajax的请求流程,封装代码如下:便于以后使用
fetch 是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpRequest...options:发送请求参数, body - http请求参数 mode - 指定请求模式。...method - 请求方法,默认GET signal - 用于取消 fetch headers - http请求头设置 keepalive - 用于页面卸载时,告诉浏览器在后台保持连接,继续发送数据。...二、请求时 POST 和 GET 分别处理 请求方式不同,传值方式也不同。xhr 会分别处理 get 和 post 数据传输,还有请求头设置,同样 fetch 也需要分别处理。...,需要设置请求头、请求数据等。
前后端分离之后,网络请求是前端的必备技能。网络请求中浏览器工作流程,你了解多少? 一、什么是HTTP协议?...我们在浏览器中输入网址(URL),然后浏览器给服务器发送一个请求,服务器收到我们的请求之后进行处理后,生成响应,携带浏览器需要的html、css、js等超文本信息,通过HTTP协议返回给浏览器,浏览器再通过解析返回的...html、css、js等文件,这样我们就可以看的一个完美的网页了。...三次握手:连接请求,接受请求,发送请求 四次分手:连接请求,接受请求,发送请求,返回数据 四、HTTP请求--Request 客户端包括浏览器给服务器发送请求时,包含四部分: 请求行:设置请求类型,要访问的资源以及使用的...空行:请求头后面所必须的。 请求体:请求数据也叫请求体,可以添加任意其他数据。传输内容较多,可小于等于1G。
(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); }); js...原生ajax请求fetch https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
一、知识要点 1、如何封装一个ajax请求 2、如何处理成功失败回调 二、源码参考 image.png 封装ajax请求 window.onload = function () { var oBtn = document.getElementById...var div1 = document.getElementById('div1'); oBtn.onclick = function () { ajax...IE6浏览器 } // 2.连接服务器 // open(方法, 文件名, 异步传输) oAjax.open('GET', url, true); // 3.发送请求
请求配置项 下面是创建请求时可用的配置选项,注意只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。...(0 表示无超时时间) // 如果请求花费了超过 `timeout` 的时间,请求将被中断 timeout: 1000, // `withCredentials` 表示跨域请求时是否需要使用凭证...{ return status >= 200 && status < 300; // 默认的 }, // `maxRedirects` 定义在 node.js...的最大重定向数目 // 如果设置为0,将不会 follow 任何重定向 maxRedirects: 5, // 默认的 // `httpAgent` 和 `httpsAgent` 分别在 node.js...这个顺序是:在 lib/defaults.js 找到的库的默认值,然后是实例的 defaults 属性,最后是请求的 config 参数。后者将优先于前者。
前言 这几天在恶(xue)补(xi)node.js,其中老师讲到了ajax,以前学习js都是东一点、西一点。不系统,当然,原因也很多。...当时一些js基础知识也欠缺(虽然现在也不咋的),想要自己封装,难度也很大。 今天也终于自己封装一个简易 的ajax。...= function () { if (ajax.readyState === 4) { if (ajax.status === 200 ||...viewport" content="width=device-width, initial-scale=1.0"> Title <script src="<em>ajax</em>.<em>js</em>...也可以是对象{} success: function (res) { console.log(res); }, dataType: 'json' }) 压缩文件下载:<em>ajax</em>.min.<em>js</em>
08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios...axios({ url: `http://127.0.0.1:8000/course/detail/${id}/`, // 后台接口 method: 'get', // 请求方式...}).then(response => { // 请求成功 console.log('请求成功'); console.log(response.data);...this.course_ctx = response.data; // 将后台数据赋值给前台变量完成页面渲染 }).catch(error => { // 请求失败...console.log('请求失败'); console.log(error); }) } 与ajax提交不同的一些设置 ajax 中的tyle这里是method ajax中的success
Ajax请求时,这里的block同样会变得很臃肿。...最近遇到的问题: 并且最近在进行Ajax的POST请求时候,遇到Illegal invocation这个错误。...查了下,大概就是传递了个对象导致的,但是从自己代码上看,好像没有,因此找了下,发现在进行AJax提交时,默认会将数据转换成对象,并且会进行序列化处理,特别是在使用AJax进行文件上传时候。...Django中,开启CSRF的防护时,在进行POST提交时必须附带csrf_token,但是将JS分离后,独立的JS文件中是无法获取到 {{ csrf_token }}的,因此我只能采用传参的方式来解决...下面以复选框批量删除操作来说明上面的问题 多个复选框 复用代码,分离请求 分离JS代码,抽离功能 这里重点在Ajax请求时的两个参数: processData: false, contentType:
领取专属 10元无门槛券
手把手带您无忧上云