它依赖的是现有的CSS/HTML/Javascript，ajax依靠浏览器提供的XMLHttpRequest对象让浏览器发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互...2、依靠对象 XMLHttpRequest对象 fetch对象 （兼容性较弱） 二、采用同步的方式通过ajax获取数据（简单版） 1、代码 我在当前html文件下伪造了一个hello.json的文档，作为服务器资源...4、举个例子 var xhr= new XMLHttpRequest() xhr.timeout=13 // 注意timeout时间要根据收到json文件响应时间来设置，小于这个时间会输出timeout...status是请求链接到服务器，服务器响应错误后服务器返回浏览器的状态码。...，都会触发事件，输出readystate ?
一、什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识） ajax全称Asynchronous JavaScript and XML（异步的javascript和XML）,为什么会有这么一种技术的出现呢...AJAX缺点： ajax不支持浏览器back按钮。 安全问题 AJAX暴露了与服务器交互的细节。 对搜索引擎的支持比较弱。 破坏了程序的异常机制。 不容易调试。...Ajax发送相同的请求时，注意，这里相同的请求指的是URL完全相同，包括参数，浏览器就不会与服务器交互，而是直接从缓存中把数据取出来，这是为了提高页面的响应速度和用户体验。...（服务端也会收到请求响应304） 浏览器会自作主张的把所有异步请求来的文件缓存，当下一次请求的URL和之前的一样，那么浏览器将不会发送这个请求，而是直接把缓存的内容当做xhr.responseText。...+ timestamp,function(err,data){ alert(data); }); 总的来说，原理就是通过将 get 请求的 url 做成每次都不一样，这样就不会被浏览器缓存了。
大家好，又见面了，我是你们的朋友全栈君。 1:什么是ajax？ajax作用是什么？ 异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。...ajax用来与后台交互 2:原生js ajax请求有几个步骤？...== 4 && (obj.status == 200 || obj.status == 304)) { } }; 3:json字符串转换集json对象、json对象转换json字符串...3:404 (未找到) 服务器找不到请求的网页。 四: 5开头状态码 5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。...例如，服务器无法识别请求方法时可能会返回此代码。 502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。 503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。
大家好，又见面了，我是你们的朋友全栈君。 JS原生Ajax Ajax=异步Javascript+XML； ajax是一种数据请求的方式，不需要刷新整个页面。...GET请求方式是通过URL参数将数据提交到服务器的，POST则是通过将数据作为send的参数提交到服务器； POST请求中，在发送数据之前，要设置表单提交的内容类型； 提交到服务器的参数必须经过encodeURIComponent...每次请求的时候都会在参数列表中拼入一个“v=xx”的随机字符串，这样是为了拒绝缓存，每次都直接请求到服务器上。...在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取，上面的代码在每次请求的时候都加入了随机数...ajax请求是不能跨域的！ JSONP JSONP(JSON with Padding) 是一种跨域请求方式。
当 301、302、303 响应状态码返回时，几乎所有的浏览器都会把 POST 改成 GET，并删除请求报文内的主体，之后请求会自动再次发送 301、302 标准是禁止将 POST 方法改变成 GET...方法的，但实际使用时大家都会这么做400 bad request，请求报文存在语法错误。...// res.status(200).json(data) }) 这里虽然设置了协商缓存，但是因为每次返回的数据都不一样（每次请求的时间戳都不一样），因此每次请求都不会取缓存里的数据。...node每次都会返回200状态码并且从请求响应里读取数据。...协商缓存既然都要发起请求了，为什么还要判断资源有没有更新，直接将请求返回的数据进行读取不就完事了吗？当然不是。
不同点： response返回的是数据的主体部分，可以为任何类型(数组，json，XML，字符串等)； responseText返回从服务器接收到的字符串。该属性为只读。...对象 data = JSON.parse(data); responseXML返回从服务器接收到的Document对象，该属性为只读。...： get请求时：接口名+请求参数（键值对形式）；post请求时：只需要接口名（需要传递的参数写在send方法里）； 第三个参数：一个布尔值，指定是否异步（true为异步，false为同步，通常为true...) { //与后端约定好，传输的数据类型为JSON字符串，JSON.parse()用来把JSON字符串解析为原生JavaScript值 var results...image.png 每次点击加载更多按钮都会发送一条AJAX请求，数据没回来之前，重复点击会被忽略，数据到来后会渲染到页面上出现5条新闻。
本地环境简单搭建 为什么要环境搭建 因为Ajax是基于服务器来运行的，需要配置服务器环境来实现对本地资源的访问。...请求的文件时，直接点击该图标运行 本环境自动以打开的本文件夹作为服务器的根目录，端口可以自行改变 jQuery中的Ajax GET请求和POST请求的异同 相同点: 都是将数据提交到远程服务器 不同点...提交数据大小限制不同 GET请求对数据有大小限制 POST请求对数据没有大小限制 js原生Ajax <!...-- 1.什么是Ajax? AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。...("接收到服务器返回的数据"); }else{ console.log("没有接收到服务器返回的数据
下述内存主要讲述了《JavaScript高级程序设计（第3版）》第21章关于“Ajax与Comet”。...(xhr.responseText); } 说明： （1）有的浏览器会错误的报告成功状态码为204 （2）无论内容类型是什么，响应主体的内容都会保存到responseText属性中；而对于XML...readyState属性的值发生变化，都会触发readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。...error：在请求发生错误时触发。 abort：在因为调用abort()方法而终止时触发。 load：在接收到完整的响应数据时触发。...回到函数的名字一般是在请求中指定的。而数据是传入回调函数中的JSON数据。
| "json"| response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON解析得到的。...六、jQuery对Ajax的封装 在很长一段时间里，人们使用 jQuery提供的 ajax封装进行网络请求，包括 $.ajax、$.get、$.post等，这几个方法放到现在，我依然觉得很实用。...注意：源码里对错误的判定： isSuccess = status >= 200 && status < 300 || status === 304; 返回值除了这几个状态码都会进 error回调。...注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）"json": 返回 JSON 数据 。"...十二、跨域总结 谈到网络请求，就不得不提跨域。 浏览器的同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
2、缺点 不支持浏览器back按钮 安全问题，Ajax 暴露了与服务器交互的细节 对搜索引擎的支持比较弱 三、Ajax 的使用 -- 实现步骤 1、创建 XMLHttpRequest 对象，即创建一个异步调用对象...，并指定该 HTTP 请求的方法、URL 及验证信息 XHR.open(method,url,async); // method：请求类型，GET 或 POST---------可选 // url：文件在服务器上的位置...request.send(); 5、获取异步调用返回的数据 （JSON） 6、使用 JavaScript 和 DOM 实现局部刷新 四、Ajax中的一些处理总结 1、服务器响应处理 responseText...比较常见的有： 200：“OK”（当 readyState 等于 4 且状态为 200 时，表示响应已就绪） 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意...） 403：（禁止） 服务器拒绝请求 404：（未找到） 服务器找不到请求的网页 408：（请求超时） 服务器等候请求时发生超时 500：（服务器内部错误） 服务器遇到错误，无法完成请求
3.3 设置请求头 xhr.setRequestHeader('Header','Value') 每个 HTTP 请求和响应都会带有相应的头部信息，包含一些与数据、收发者网络环境与状态等相关信息。...有以下6个进度事件： loadstart：在接受到响应数据的第一个字节时触发 progress：在接受响应期间持续不断地触发 error：在请求错误时触发 abort：在因为调用 abort() 方法而终止连接时触发...load：在接收到完整的响应数据时触发 loadend：在通信完成或触发 error、abort、load 事件后触发 每个请求都从触发 loadstart 事件开始，接下来是一或多个 progress...请求 为什么同源策略要禁止不同源之间进行这些操作呢？...那么假定用户访问了我在A源中用 iframe 引入的B源网页，他的所有操作都会在我们的掌握之中，因为我们可以在A源操作B源的 DOM 元素； A 源可以自由发送 AJAX 请求给B源。
以下是我认为对Ajax较为准确的解释：（摘自what is Ajax） AJAX stands for Asynchronous JavaScript and XML....接下来我将站在使用者的角度，以问题的形式介绍xhr的基本使用。 我对每一个问题涉及到的知识点都会进行比较细致地介绍，有些知识点可能是你平时忽略关注的。...每次xhr.readyState的值发生变化时，都会触发xhr.onreadystatechange事件，我们可以在这个事件中进行相关状态判断。...事件触发顺序 当请求一切正常时，相关的事件触发顺序如下： 触发xhr.onreadystatechange(之后每次readyState变化时，都会触发一次) 触发xhr.onloadstart /...我倾向于 xhr.onload事件，因为xhr.onreadystatechange是每次xhr.readyState变化时都会触发，而不是xhr.readyState=4时才触发。
Ajax 技术也就是允许浏览器与服务器通信而无需刷新当前页面，数据在客户端和服务端独立传输，而不是以前客户端向服务端发送一个请求，服务器返回整个页面，如此反复。...OnReadystateChange -- -- 每个状态改变都会触发这个时间处理器，通常是 JS 函数（改事件由服务器触发） 1.2.1 Ajax 执行过程中，服务器会通知客户端当前的通信状态...，依靠 readyState 属性实现，改变 readryState 属性是服务器对客户端连接操作的一种方式，每次 readyState 属性改变都会触发 onReadyStateChange 事件...当浏览器接收到较长的 XML 文档时 DOM 解析可能会很复杂 3. JSON 的语法严谨，代码不宜读 2.5.3 适用场景 1....>YS Page 35 36 37 38 以上这些就是我所知道有关 Ajax
Ajax开始讲起，然后最后会尽可能得模仿JQuery对其进行封装，让我刚才提到的两类人能对Ajax有进一步的了解。...含义 100 ~ 199 连接继续 200 ~ 299 各种成功的请求 300 ~ 399 重定向 400 ~ 499 客户端错误 500 ~ 599 服务端错误 （2）xhr的基本使用 在使用xhr...上面也讲解了Ajax请求的简单应用，同时也是拿 get 请求来举得例子，因此这里我就不多做说明，唯一要讲的就是，get请求所携带的数据是明文的，大小只有4k左右，而且它是写在URL的 ?...query=4&em=0，所以若是我们要在发送get请求时携带数据，只需要在调用 open() 方法时，将数据写在第二个参数的URL的 ?...CORS（跨域资源共享）要求我们在发送请求时自定义一个HTTP头部与服务器进行沟通，我们只需要设置一个名为 Origin 的头部，值为当前页面的源信息（协议、域名、端口），例如Origin : http
Ajax开始讲起，然后最后会尽可能得模仿JQuery对其进行封装，让我刚才提到的两类人能对Ajax有进一步的了解。...含义 100 ~ 199 连接继续 200 ~ 299 各种成功的请求 300 ~ 399 重定向 400 ~ 499 客户端错误 500 ~ 599 服务端错误 （2）xhr的基本使用 在使用xhr...上面也讲解了Ajax请求的简单应用，同时也是拿 get 请求来举得例子，因此这里我就不多做说明，唯一要讲的就是，get请求所携带的数据是明文的，大小只有4k左右，而且它是写在URL的 ?...query=4&em=0，所以若是我们要在发送get请求时携带数据，只需要在调用 open() 方法时，将数据写在第二个参数的URL的 ?...CORS（跨域资源共享）要求我们在发送请求时自定义一个HTTP头部与服务器进行沟通，我们只需要设置一个名为 Origin 的头部，值为当前页面的源信息（协议、域名、端口），例如 Origin : http
看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。”...---- 接下来我将站在使用者的角度，以问题的形式介绍xhr的基本使用。 我对每一个问题涉及到的知识点都会进行比较细致地介绍，有些知识点可能是你平时忽略关注的。...每次xhr.readyState的值发生变化时，都会触发xhr.onreadystatechange事件，我们可以在这个事件中进行相关状态判断。...事件触发顺序 当请求一切正常时，相关的事件触发顺序如下： 触发xhr.onreadystatechange(之后每次readyState变化时，都会触发一次) 触发xhr.onloadstart /...我倾向于 xhr.onload事件，因为xhr.onreadystatechange是每次xhr.readyState变化时都会触发，而不是xhr.readyState=4时才触发。
时间后 未修改，返回 200 被修改，返回 412 Precondition failed 预处理错误 主要用于断点续传，肯定要保证文件没有修改 7.If-Match, If-None-Match 主要也是为了判断资源是否更新过...2、服务器收到请求，拿 If-Modified-Since 和 服务器资源的 Last-Modified 比较，如果相同，命中协商缓存，返回304 304 到底有什么用？？...当客户端缓存了目标资源，但是不确定是否是最近的版本，会发一个条件请求，附带上 条件首部 服务器拿到首部，判断出客户端的资源是否是最新的 如果是最新的，返回304，但是没有响应体，客户端收到304...用户手动刷新，不包括强刷 缓存资源类型 1、文件可以缓存，比如 js、css、json 2、post 无法缓存，get 请求可以缓存 3、还有其他的我不知道..........下面是 ajax 引入reset.css ? 而 ajax 请求接口的数据，也是放在 disk ?
HTML5学堂：AJAX主要是两个兼容问题，其一是AJAX请求的创建，其二是加载状态的检测。本文主要讲解AJAX兼容的方法的搭建。...AJAX请求的创建 大部分使用AJAX的人都会使用new XMLHttpRequest()的方法进行AJAX的创建。...0 表示未初始化，没有调用open方法 1 表示请求已经准备好，可以发送 open()结束 未send 2 表示已经发出send方法，但是并没有接收到服务器的响应 3 表示数据下载到请求对象 但是响应数据还没有准备好...服务器端错误 此处使用了大于200，小于300，表示的就是请求成功。...而304需要特殊注意，304表示的是请求的资源并没有发生更改，可以直接使用本地浏览器的缓存版本，也意味着响应是有效的。 关于onload方法，有些同学可能会觉得，为何不可以用这个呢？
d. 3: 后台服务器解析请求，分析请求中需要的数据 e. 4: 后台服务器将数据响应给前端 2）如果通信状态码为 4，证明响应完成，我们就可以在前端获取响应数据了 ajax.onreadystatechange...) } } } ajax 请求方式之 get 与 post get 方式 使用 get 请求方式时，我们可以将要提交的数据放置于url地址后面进行提交。...('data.txt','get','',function(res){ console.log(res) }) Ajax 操作数组和json数据 操作数组 目录文件夹 ajax.js...18 } Json 文件 { "name": "Alian", "age": 18 } ajax.js 插件 let ajax = function (url, method, data...json 数据可以使用 JSON.parse(json数据) 方法将json数据转换为js的对象和数组。 ajax('.
四、常用请求类型介绍 multipart/form-data类型主要是上传文件时用到； application/x-www-form-urlencoded类型主要是提交k-v时用到，当然这种方法也可以将...json设置在v中提交json数据； application/json类型主要是传递json数据用到，层次比较深的数据； 五、常见响应状态码介绍 100：客户必须继续发出请求 101：客户要求服务器根据请求转换...HTTP协议版本 200：请求成功 201：提示知道新文件的URL 202：接受和处理、但处理未完成 203：返回信息不确定或不完整 204：请求收到，但返回信息为空 205：服务器完成了请求，用户代理必须复位当前已经浏览过的文件...206：服务器已经完成了部分用户的GET请求 300：请求的资源可在多处得到 301：删除请求数据 302：在其他地址发现了请求数据 303：建议客户访问其他URL或访问方式 304：客户端已经执行了...GET，但文件未变化 305：请求的资源必须从服务器指定的地址得到 306：前一版本HTTP中使用的代码，现行版本中不再使用 307：申明请求的资源临时性删除 400：错误请求，如语法错误 401：请求授权失败
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
