首页
学习
活动
专区
圈层
工具
发布

AJAX-前后端交互的艺术

为什么要用AJAX?...:调用send()之后 readyState=3 求正在处理中:浏览器与服务器建立通信之后,但服务器未完成响应之前 readyState=4 求已完成:请求完成后,并且已从服务器完全接收到响应数据 状态码...解释 200 请求成功 302 请求重定向 304 请求资源没有改变 404 请求资源补不存在,属性客户端错误 500 服务器内部错误 编写一个简单的 AJAX 程序(原生方式)我们简单的模拟一个表单校验的程序...,并且我们对 AJAX 有了一定的认识,但是 AJAX 的一些应用场景,以及AJAX 如何搭配 常见的 如 JSON 等数据格式,实现前后端的交互,并没有提到,我们就放到后面说,将全部的内容挤到一起,无论是从篇幅或者说内容的针对性都是不够强的...,我感觉对我个人帮助还是很大的。

2.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    AJAX基础知识与简单的操作示例

    首先,该功能需要检查请求的状态。如果状态的值为XMLHttpRequest.DONE(对应于4),则表示已收到完整的服务器响应,可以继续处理它。...XMLHTTPRequest.readyState中,如下所示: 0(未初始化)或(请求未初始化) 1(正在加载)或(已建立服务器连接) 2(已加载)或(已收到请求) 3(交互式)或(处理请求) 4(完成...)或(请求已完成,响应已准备就绪) 接下来,检查HTTP响应的HTTP响应状态代码 。...我们的JavaScript将请求一个HTML文档,test.html其中包含文本“我是测试”。然后,我们将alert()响应的内容。请注意,此示例使用原始JavaScript-不涉及jQuery。...但是,假设服务器将返回计算的字符串和原始用户数据。

    1.9K20

    【网络原理】从零开始深入理解HTTP的报文格式(二)

    抓包抓到的大部分结果都是 200 ② 404 Not Found 表示没有找到资源. 浏览器输入一个 URL, 目的就是为了访问对方服务器上的一个资源....但是如果输入错误, 比如 www.sogou.com/inde.html , 就会看到 404 这样的响应. ③ 403 Forbidden 表示用户没有权限访问....比如我本来的手机号是 1314, 后来换了个新号码 520, 那么不需要让我的朋友知道新号码,只要我去办理一个呼叫转移业务, 其他人拨打 1314 , 就会自动转移到 520 上....码云的登陆页面: 码云页面登陆 抓包看到的响应结果: ⑥ 301 Moved Permanently 永久重定向 当浏览器收到这种响应时, 后续的请求都会被自动改成新的地址. 301 也是通过...特点是可以不需要 刷新页面/页面跳转 就能进行数据传输. Ⅰ 利用 ajax 发送 GET 请求 浏览器原生提供了 ajax 的 api 特别难用, 但好在有一些第三方库封装了 ajax.

    28200

    【javascript】ajax 基础

    http 请求 首先需要了解 http 请求的方法(GET 和 POST)。 GET 用于获取数据。GET 是在 URL 中传递数据,它的安全性低,容量低。 POST 用于上传数据。...当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。...readyState:请求状态,返回的是整数(0-4)。 0(未初始化):还没有调用 open() 方法。 1(载入):已调用 send() 方法,正在发送请求。...2(载入完成):send() 方法完成,已收到全部响应内容。 3(解析):正在解析响应内容。 4(完成):响应内容解析完成,可以在客户端调用。 status:请求结果,返回 200 或者 404。...404 => 失败。 responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。

    41810

    科普系列——如何解释什么是 AJAX?

    其实简单概括下,AJAX就是一种利用 JavaScript 向服务端发起请求,并获得服务端响应的技术。它的特点是异步请求,局部刷新。...通过该接口,浏览器可以向服务器发送请求并取回所需的数据,并在客户端采用 JavaScript 处理来自服务器的回应。这就是 AJAX 的前身。...在上述例子中,核心是班长(也就是HXR对象),班主任可以通过他传递消息(客户端构建XHR对象发送请求)然后收到响应。在班长去通知小明的过程中,班主任仍然可以继续手头的工作,这就是一个异步的过程。...发送请求 request.send(); 说实话,虽然只有4步,但是通过这种原生的方法发送请求还是觉得有些复杂,那有没有什么简单的方法呢?...503 表示服务器暂时处于超负载或正在进行停机维护,现在无法处理请求。 获取网页中的XHR请求 这时就有人可能会问了,有没有什么办法可以获取一个网页中的XHR请求呢?

    1K20

    AJAX

    服务器响应:如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。    ...并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。    2 - (载入完成/数据接收)    此阶段接收服务器端的响应数据。...3 - (交互/解析数据)正在解析响应内容    此阶段解析接收到的服务器端响应数据。...值为3表示正在解析数据。    4 - (后台处理完成)响应内容解析完成,可以在客户端调用了    此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。...—保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405——用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖,请求资源不可访问

    77840

    前端-Ajax的全面总结

    2.实现流程 创建 XMLHttpRequest对象——>打开请求地址,初始化数据——>发送请求数据——>监听回调函数状态——>收到服务器返回的应答结果。...True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。 ?...等能根据不同需要进行调用,写法更加简洁,但是为了兼顾各个方法在这里我以一个通用的方法 $.ajax为例做一个简单的解析,按照下面的模式写好各个参数,就能成功进行Ajax的请求了,可能在实际中使用 $.post...所以,为了解决这一问题,实现跨域访问,有很多种方式,上述提到的jsonp就是一种流行的方式,还有其他一些方式,我在这里就不展开说了,只是想说明ajax的使用也是有条件的,任何技术的实现都不会是没有限制的...http请求中的一个重要关注点就是请求头和响应头的内容,从这两个头文件中可以看出很多东西,当我们用发送一个ajax请求的时候,如果没有达到预期的效果,那么就需要打开浏览器的调试工具,从NetWork中找到相应的

    2.6K30

    AJAX的基本原理及实例解析。

    对象状态值有以下几个:   0 - (未初始化)还没有调用send()方法   1 - (载入)已调用send()方法,正在发送请求   2 - (载入完成)send()方法执行完成   3 - (交互...)正在解析响应内容   4 - (完成)响应内容解析完成,可以在客户端调用了   对于readyState的状态值,其中“0”状态是在定义后自动具有的状态值,而对于成功访问的状态(得到信息)我们大多数采用...Ajax的核心就是是JavaScript对象XmlHttpRequest,这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。...open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送。   只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错。   ...status Text——伴随状态码的字符串信息。   在收到响应后第一步是检查响应状态,确保响应是否成功返回(状态为200)。

    1.1K30

    前端Ajax技术原理

    已经调用open()方法,但尚未调用send()方法 2:发送。已经调用send()方法,但尚未接收到响应 3:接收。已经接收到部分响应数据 4: 完成。已经接收到全部响应数据。...在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准...(尚未调用open方法) 1 (初始化) 对象已建立,尚未调用send方法 2 (发送数据) send方法已调用,但是当前的状态及http头未知 3 (数据传送中) 已接收部分数据,因为响应及http头不全...下面所阐述的ajax的缺陷都是它先天所产生的。 1、ajax干掉了back按钮,即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。...至少从目前看来,像ajax.dll,ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题,我曾经在开发过程中遇到过,但是查了一下网上几乎没有相关的介绍。

    84500

    【面试题】HTTP知识点整理(附答案)

    由于没有流的概念,在使用并行传输(多路复用)传递数据时,接收端在接收到响应后,并不能区分多个响应分别对应的请求,所以无法将多个响应的结果重新进行组装,也就实现不了多路复用。...四次挥手 第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack...第四次挥手:主动关闭方收到 FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。 挥手为什么是四次?...但是关闭连接时,当服务端收到FIN报文时,很可能并不会立即关闭SOCKET,所以只能先回复一个ACK报文,告诉客户端,“你发的FIN报文我收到了”。...(火狐浏览器除外,它的 POST 请求只发一个 TCP 包) HTTP状态码 1xx (信息性状态码) 接受的请求正在处理 2xx 成功 请求正常处理完毕 200 OK 客户端发来的请求在服务器端被正常处理了

    1.5K30

    从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手

    而传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。 还有为什么叫异步呢? 因为在加载的时候,页面的其他部分还是可以自由操作的,没有出现卡死的状态,所以是异步。...如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新...用JavaScript写一个完整的AJAX代码并不复杂,但是需要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应。...status:服务器返回的状态码 this.status == 200:表示响应成功;404 表示没有找到请求的资源;500 表示服务器端错误。...console.log(this.responseText); break; case 3: // => 3 // 正在下载响应报文的响应体

    1.4K30

    全面分析前端的网络请求方式

    九、fetch polyfill源码分析 由于 fetch是一个非常底层的 API,所以我们无法进一步的探究它的底层,但是我们可以借助它的 polyfill探究它的基本原理,并找出其中的坑点。...可以发现,调用 reject有三种可能: 1.请求超时 2.请求失败 注意:当和服务器建立简介,并收到服务器的异常状态码如 404、500等并不能触发 onerror。...然后我发现这里polyfill的实现和MDN-使用Fetch以及很多资料是不一致的: mdn: 默认情况下,fetch 不会从服务端发送或接收任何 cookies 于是我分别实验了下使用 polyfill...由于 fetch是一个非常底层的 API,它并没有被进行很多封装,还有许多问题需要处理: 不能直接传递 JavaScript对象作为参数 需要自己判断返回值类型,并执行响应获取返回值的方法 获取返回值方法只能调用一次...HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。

    2.2K40

    ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤(详细代码)

    大家好,又见面了,我是你们的朋友全栈君。 在前端工作中,经常会用到ajax,其实很多人只知道ajax是异步请求,不知道应该如何用它,它的基本步骤有哪些,ajax请求过程是怎样的?...”,”application/x-www-form-urlencoded”) 4.向服务器端发送数据xmlHttp.send(null); 如果是POST方式就不为空 5.在回调函数中针对不同的响应状态进行处理...2:发送。已经调用 send()方法,但尚未接收到响应。 3:接收。已经接收到部分响应数据。 4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。...只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。...404:访问的资源不存在 总结:以上介绍了Ajax请求的五个步骤以及详细代码 ,没有接触过得朋友可能看起来比较困难,没关系,看了以后,多去动手敲敲,慢慢就懂了,希望可以帮助到你!

    1.9K40

    Ajax笔记

    它依赖的是现有的CSS/HTML/Javascript,ajax依靠浏览器提供的XMLHttpRequest对象让浏览器发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互...TRACE:消息正文包含服务器收到的请求消息 3.2)404 Not Found 请求失败,被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。...onerror是定义一个事件,当ajax连接失败(浏览器发送ajax请求根本没有连接到服务器)浏览器自己输出error。...timeout是指响应时间,开始请求到接收到响应(开始处理)的时间,单位为ms。 比如我设置timeout时间为5ms ? 结果请求超时,返回的是timeout ?...(但尚未调用 open() 方法) 1 载入,XMLHttpRequest对象开始发送请求 2 载入完成,XMLHttpRequest对象的请求发送完成 3 下载解析中,XMLHttpRequest对象开始读取服务器的响应

    1.2K60

    HTTP状态码以及 ajax状态

    当你在网页上进行请求(比如点击链接、提交表单或者通过 JavaScript 发送请求),服务器会返回一个状态码来表示请求的结果。这些状态码是标准的 HTTP 协议的一部分。...Request Timeout 请求超时500 Internal Server Error  未知服务器错误502 Bad Gateway作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应...503 Service Unavailable  超负荷505 HTTP Version Not Supported  HTTP版本不支持AJAX 是一种通过 JavaScript 发送异步请求的技术,...在 AJAX 中,通常会处理类似于上述的 HTTP 状态码,但是在 JavaScript 中,开发者可以更精细地处理这些状态码。...响应主体信息正在处理4 DONE 响应主体信息已经返回我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

    52350

    ajax发送异步请求四个步骤,AJAX的异步请求的四个步骤

    大家好,又见面了,我是你们的朋友全栈君。 ajax异步请求详解ajax ajax定义:异步的JavaScript和xml浏览器 一、建立对象,XMLHttpRrquest的出现才有了异步处理。...将请求发送到服务器 3.浏览器与服务器创建链接 4.服务器响应 readyState 属性表示Ajax请求的当前状态。...它的值用数字表明。 0 表明未初始化。 尚未调用 open 方法 1 表明正在加载。 open 方法已被调用,但 send 方法尚未被调用 2 表明已加载完毕。send 已被调用。...服务器正在发送响应 4 表明完成。...响应发送完毕 经常使用状态码及其含义: 404 没找到页面(not found) 403 禁止访问(forbidden) 500 内部服务器出错(internal service error) 200

    1.5K10

    前端数据获取之Ajax与Fetch (一)

    Ajax,读作”阿贾克斯“,这个是每一个web开发者必掌握的一门技术,现在咱们打开一个网页,页面上数据多多少少都会有它的一些参与,来获取数据,但也并不是所有的数据都是通过它来取到的。 ?...你可以想象这个的过程,javascript的执行线程一直被占用着,网络请求回来之前,用户只要涉及到javascript脚本操作势必没有任何响应。...XML也有自己的规范,和HTML很像,两个标签中间携带数据。为什么要用它来数据传输呢?我觉得可以理解为不同界域直接的解耦,它是跨平台,跨操作系统,跨语言的一种数据传输的统一标准实现。...new window.XMLHttpRequest(); 但是有一部分IE中没有XMLHttpRequest,提供了另一个API做相同的事情。...发送的请求被接受后,xhr引擎触发onreadystatechange,readyState为2;发送的请求被处理,xhr引擎触发onreadystatechange,readyState为3;发送的请求处理完成返回

    2.1K20

    三分钟让你了解什么是Web开发?

    CSS 层叠样式表(Cascading Style Sheets, CSS)是一种样式表语言,用于描述用标记语言编写的文档的表示。基本的格式和样式可以通过HTML来完成,但是最好是使用CSS。...如果你点击收件箱或收件箱中的一封邮件,整个页面就会焕然一新。大约在2004年,Gmail有一个重要的特性:Ajax。使用Ajax时,整个页面并没有刷新—只是需要更改的部分。...使用Ajax,您将一个GET请求发送到服务器,服务器将其响应作为输出发送,而不阻塞当前的web页面,这意味着用户可以继续做任何他们正在做的事情,而不会被打断。输出被追加或添加到当前网页。...Web服务器和浏览器 浏览器是网络的解释器。浏览器请求来自web服务器的数据,web服务器处理该请求并将响应发送到HTML(包括CSS、JS、图像等),然后显示出来。...得到:http://google.com 谷歌web服务器将处理其主/索引文件,并将响应发送回客户机。它通常会发送HTML内容和CSS文件,以及其他任何媒体文件。

    7.8K30

    Ajax工作原理及概述

    它可以使用JSON,XML,HTML和文本等多种格式发送和接收。AJAX最吸引人的就是它的“异步”特性,也就是说他可以在不重新刷新页面的情况下与服务器通信,交换数据,更新页面。...更实际的例子,请看本篇文章下方简单例子。 发送一个请求后,你会收到响应。...) or (已建立服务器链接) 2 (加载成功) or (请求已接受) 3 (交互) or (正在处理请求) 4 (完成) or (请求已完成并且响应已准备好) 接下来,判断HTTP响应的 response...如果你你发起的是同步请求则不必使用函数,但是非常不推荐这样子做,它的用户体验很不好。 简单的例子 让我们把所有的知识都集中起来做一个简单的HTTP请求。...处理数据 最后,我们发送一个数据给服务器并收到响应。

    1.1K20
    领券