首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Web前端学习 第6章 jQuery Ajax 2 Ajax入门

    一、Ajax概述 在我们之前学习的内容中,向服务器发送请求后,再浏览器中响应的页面都是整页刷新。 在某些项目中,我们只希望获取页面的局部数据,而不必整页刷新,这个时候就需要使用Ajax来实现功能了。...这个概念出现的比较早,那个时候前端和后台的数据交互主要以XML格式为主,例如下面的数据格式: 1 2 apple 3 0.5kg</...ajax的优缺点 优点:按需获取数据,提升系统性能。 缺点:异步获取数据,不利于搜索引擎优化。 二、Ajax原理 考虑一个问题,在之前的学习内容中,我们是如何向服务器发送请求的?..."index") 4 }) 5 router.get("/data", async ctx => { 6 ctx.body = "hello world" 7 }) 8 9 //前端程序...三、封装一个Ajax方法 回调函数 将上面的程序封装到一个myAjax方法,实例代码如下所示,这里需要注意的是,因为Ajax是异步的操作,因此封装的Ajax不能用return获取返回值。

    54110

    【融职培训】Web前端学习 第6章 jQuery Ajax 2 Ajax入门

    一、Ajax概述 在我们之前学习的内容中,向服务器发送请求后,再浏览器中响应的页面都是整页刷新。 在某些项目中,我们只希望获取页面的局部数据,而不必整页刷新,这个时候就需要使用Ajax来实现功能了。...这个概念出现的比较早,那个时候前端和后台的数据交互主要以XML格式为主,例如下面的数据格式: 1 2 apple 3 0.5kg</...ajax的优缺点 优点:按需获取数据,提升系统性能。 缺点:异步获取数据,不利于搜索引擎优化。 二、Ajax原理 考虑一个问题,在之前的学习内容中,我们是如何向服务器发送请求的?..."index") 4 }) 5 router.get("/data", async ctx => { 6 ctx.body = "hello world" 7 }) 8 9 //前端程序...三、封装一个Ajax方法 回调函数 将上面的程序封装到一个myAjax方法,实例代码如下所示,这里需要注意的是,因为Ajax是异步的操作,因此封装的Ajax不能用return获取返回值。

    42920

    Web前端学习 第6章 jQuery Ajax 3 Ajax第三方模块

    一、概述 在上一节的内容中,我们说了如何自己封装一个简易的Ajax方法。 其实在实际项目开发中,我们并不需要自己去封装,已经有很多成熟的Ajax第三方模块了,直接使用即可。...本节就来说说一个常用的Ajax第三方模块-Axios。...二、下载并引入Axios 可以直接使用npm下载Axios,命令如下: npm install axios 因为我们要将Axios引入到前端的页面,所以需要将axios.js文件拷贝到静态文件目录。...五、jQuery中的ajax方法 我们之前使用jQuery主要是用来操作DOM,其实jQuery也封装了Ajax方法,实例代码如下所示: 1 $.ajax({ 2 url:"/fruit", 3...Axios,但是如果项目并没有使用jQuery,那么使用Axios这种轻量级的Ajax库会更方便。

    86430

    Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别

    3. ajax ajax全称Asynchronous JavaScript and XML(异步的JavaScript与XML),是网页无需刷新页面、使用js与服务器进行交互的一种技术。...情况一直延续到ajax的出现。 从ajax的命名中我们就可以看到,数据交换是通过XML格式进行的。在ajax刚出现的时候,绝大多数应用都是采用XML格式,也有少数使用纯文本的。...于是人类就想出了一套新的数据交互方案,即无刷新的异步请求,名字叫 Ajax。通过 Ajax 可以通过 JS 与后端接口进行数据交互,而不会影响当前页面。...Ajax 技术提供了一种新的前后端数据交互方式,不需要刷新页面,而且不阻塞页面执行流程,异步的去请求去获取、交互数据。...一开始只是通过 Ajax 异步发一个请求,数据就是一个简单的用户名称,所以直接按照字符串发过去就好了。后来需要 Ajax 发送的数据越来越多,比如一整张表单。

    2.2K20

    前端基础-Ajax对象

    第2章 Ajax对象 2.1 获取对象 通过上一节我们发现,想要使用 ajax 的一系列功能,我们就必须先得到 ajax 对象 基于 W3C标准 浏览器: var xhr = new XMLHttpRequest...对象的属性、方法 * 火狐开发者文档: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 2.2.1 属性 **readyState...: Ajax状态码 * ** 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法 2:...xhr.getAllResponseHeaders() 获取全部响应头信息 xhr.getResponseHeader(‘key’) 获取指定头信息 send([content]) :发送Ajax...这就是同步处理 但是,如果前台服务员将小明的菜单告诉厨师后,服务员发给小明一个好牌去旁边等待,后面的人继续点餐, 厨师将小明的饭菜做好后,随时呼唤小明就餐;这就是异步处理 服务器的不同做法,就代表着 Ajax

    78210

    前端基础-Ajax简介

    Ajax 技术 作者:陈文龙 ---- 第1章 认识Ajax 1.1 初识 ajax 我们平常上网,不管是注册账号,还是浏览网页,其本质就是通过客户端向服务器发送请求,服务器接到请求后返回处理后的数据给客户端...类似的功能还有 验证短信的发送、百度搜索的关键字推举、无刷新的分页等等…… 想要完成这些类似的功能实现,我们今天所要学习的ajax技术,就是核心技术; ajax 也是技术名词的缩写: Asynchronous...ə'sɪŋkrənəs; eɪ-] :异步的; JavaScript :JavaScript语言 And :和、与 XML :数据传输格式 1998年微软公司(Microsoft)的Outlook Web...Access第一次使用了ajax技术,允许客户端脚本发送HTTP请求,并随后集成在IE4.0中应用(XMLHTTP),到2005年,谷歌(Google)把Ajax成功应用于自家的多款Web系统中(Gmail...邮箱、Google Map、Google 搜索建议), 从此Ajax被越来越多的人所接受… 客户端通过HTTP向服务器发送请求 1.2 快速入门 <form action="1-1

    50720

    Web前端学习 第6章 jQuery Ajax 4 跨域请求

    所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。...这是一个用于隔离潜在恶意文件的重要安全机制 二、jsonp原理 Ajax在默认的情况下是不可以跨域的,但是script标签可以通过src属性获取到跨域的js文件。...这里需要注意的是,jsonp本质上并不是Ajax,但是功能很像,所以经常会把jsonp方法和Ajax放在一起讨论 我们现在模拟一个jsonp的示例: 在本地开启两个服务器,端口分别为8080和3000。...3000端口服务器的前端页面引入8080端口服务器的js文件。 然后使用3000端口服务器的数据。...3 app.use(jsonp()) 4 router.get("/data", ctx => { 5 ctx.body = "hello jsonp" 6 }) 7 8 $.ajax

    53930

    前端Ajax技术原理

    image.png Ajax的工作原理: Ajax工作原理其实就是在一个页面的指定位置可以加载另一个页面中所有的输出内容。这样就实现了一个静态页面获取到数据库中所返回的数据信息了。...根据这样的原理所以Ajax实现了静态页面在不刷新整个页面的情况下与服务器通信,减少了用户的等待时间,增强用户体验的友好程度 image.png Ajax工作流程: Ajax通过XmlHttpRequest...在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准...ajax的缺点 下面我着重讲一讲ajax的缺陷,因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。...下面所阐述的ajax的缺陷都是它先天所产生的。 1、ajax干掉了back按钮,即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。

    65200

    前端-Ajax的全面总结

    Ajax前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Ajax做一个全面的总结,彻底揭开Ajax的神秘面纱。...,广泛用在计算机领域,然而,随着json的发展,json以其明显的优势已经渐渐取代了xml成为现在数据交互格式的标准,所以在这里,想强调的是,json现在是主流的数据交互格式,前后端的交互标准,无论是前端提交给后台的数据...,还是后台返回给前端的数据,都最好统一为json格式,各自接收到数据后再解析数据即可供后续使用。...八.Ajax跨域访问 ajax很好,但不是万能的,ajax的请求与访问同样会受到浏览器同源策略的限制,不能访问不同主域中的地址。...所以学会看http的头文件信息是前端开发中必须掌握的一个技能,下面就来看看具体的头文件信息。 ?

    2.1K30
    领券