js-数据交互--AJAX
一:介绍
今天跟下大家简单的介绍一下,在前端开发中,前后端数据交互的一种手段,我们都知道,在前端往后端传送数据的话,利用get,post方法即可向后端发送数据,后端将数据接受,链接到数据库,进行数据库操作,再将数据库的数据返回到前端,那么这时候前端如何去接受后端传过来的数据呢?这个就是今天跟大家分享的重点,前端接受数据的方式-ajax.
那么ajax到底是什么呢?是一门编程语言吗?不,其实ajax它是一种技术的集合,通过多方面的技术总结出来的一种手段,作为前后端数据交互的重要手段。
ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验。
二:技术结合
ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术,是一串技术的集合,主要有:
1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为
2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求;
3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据;
4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其呈现到页面上.
三:工作流程
上面已经提到了ajax所用的一连串的技术,那么下面一步步说一下,这些技术的意义以及用法(ajax的工作流程)
1:创造介质(对象)
var x = new XMLHttpRequest();
2:发送的方法
x.open("get","url",true);
三个参数:发送方法,地址,布尔值(默认为true,异步)
第一个参数:POST||GET
POST和GET的区别:
.POST主要用来发送数据,GET主要用来接受数据;
.PSOT发送数据的安全性较好,而GET较差;
.POST发送数据不限制大小,而GET大小受限2~100k。
什么时候用GET和POST:在数据获取时用GET方式,在操作数据时应使用POST方式。 第二个参数:要请求的url 第三个参数:接受一个布尔值,决定请求的方式
为true时,服务器请求是异步进行的,也就是脚本执行send() 方法后不等待服务器的执行结果,而是继续执行脚本代码;
为false时,服务器请求是同步进行的,也就是脚本执行send() 方法后等待服务器的执行结果的返回,若在等待过程中超时,则不再等待,继续执行后面的脚本代码!
3:监听ajax和http的状态
x.onreadystatechange = function(){
if(x.readyState == 4 && x.status == 200){
//ajax的状态为4并且http的状态为200即表示数据正常
}
}
4:发送信息
x.send();
四:ajax的状态码和http的状态码表
1:ajax.readyState:
-(未初始化)还没有调用send()方法
-(载入)已调用send()方法,正在发送请求
-(载入完成)send()方法执行完成,已经接收到全部响应内容
-(交互)正在解析响应内容
-(完成)响应内容解析完成,可以在客户端调用了
2:HTTP状态码ajax.status:监听服务器的状态
**:请求收到,继续处理
**:操作成功收到,分析、接受
**:完成此请求必须进一步处理
**:请求包含一个错误语法或不能完成
**:服务器执行一个完全有效请求失败 ——客户必须继续发出请求
——客户要求服务器根据请求转换HTTP协议版本 ——交易成功
——提示知道新文件的URL
——接受和处理、但处理未完成
——返回信息不确定或不完整
——请求收到,但返回信息为空
——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
——服务器已经完成了部分用户的GET请求 ——请求的资源可在多处得到
——删除请求数据
——在其他地址发现了请求数据
——建议客户访问其他URL或访问方式
——客户端已经执行了GET,但文件未变化
——请求的资源必须从服务器指定的地址得到
——前一版本HTTP中使用的代码,现行版本中不再使用
——申明请求的资源临时性删除 ——错误请求,如语法错误
——请求授权失败
——保留有效ChargeTo头响应
——请求不允许
——没有发现文件、查询或URl
——用户在Request-Line字段定义的方法不允许
——根据用户发送的Accept拖,请求资源不可访问
——类似401,用户必须首先在代理服务器上得到授权
——客户端没有在用户指定的饿时间内完成请求
——对当前资源状态,请求不能完成
——服务器上不再有此资源且无进一步的参考地址
——服务器拒绝用户定义的Content-Length属性请求
——一个或多个请求头字段在当前请求中错误
——请求的资源大于服务器允许的大小
——请求的资源URL长于服务器允许的长度
——请求资源不支持请求项目格式
——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求 ——服务器产生内部错误
——服务器不支持请求的函数
——服务器暂时不可用,有时是为了防止发生系统过载
——服务器过载或暂停维修
——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
——服务器不支持或拒绝支请求头中指定的HTTP版本
五:解决get方法一个bug
我们都知道,每次浏览器请求相同地址,会优先查找缓存,通过缓存打开的页面速度也快,但是如果当服务器种的数据进行更新了,页面请求任然走的是缓存的话,就会导致页面获取不到最新的数据,这个是很严重的问题,那么如何解决这个bug呢?如果说每次访问的都是都不一样,但是拿到的数据都是一样的,那么这个问题也就迎刃而解了,一个随时都在变化的且不需要去操控的东西,相信大家都能想到一个东西叫做时间戳,没错,我们可以将时间戳拼接在url的后面,这样就能保证我们每次拿到的都是不同的地址,以此来欺骗浏览器。
六:ajax的优缺点:
1:优点
无刷新加载技术,不需要刷新页面就能拿到最新的数据
初始加载页面,提升速度
节省性能,提高用户体验
2:缺点:
ajax破坏了浏览器的前进后退功能
破坏了SEO
ajax的兼容:IE5之前不兼容
js-数据交互--AJAX的更多相关文章
- 数据交互 ajax代码整理
请求列表通用 /** **加载对应的试卷套题 ** */ function loadQuestions(){ var businessSubClass = { pageNo:pageNo, pageS ...
- echarts同一页面四个图表切换的js数据交互
需求:点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 其余的就不多说,直接上js代码了 $(function() { $("#heart").o ...
- 前后数据交互(ajax) -- 初始化页面表格
// 初始化员工信息列表 function loadpage ( pageNum ) { var keywords = $("#keywords").val(); $(" ...
- js数据交互——fetch
什么是fetch? Fetch被称为下一代Ajax技术,采用Promise方式来处理数据. 是一种简洁明了的API,比XMLHttpRequest更加简单易用.fetch是原生的(无需引入任何库和框架 ...
- 数据交互 ajax 初始化省
1 //初始化省 2 function initProvince() { 3 if( areaLvel == 0 ) { 4 return; 5 } 6 // 清空option 7 $("# ...
- JS数据交互:动态从数据库中获取数据填充Select
JavaScript代码: $(document).ready(function () { getIntype(); });function getIntype(){ $.ajax({ type:&q ...
- 前端与后端数据交互的方式之ajax
前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 弹出层和ajax数据交互
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...
随机推荐
- Hive 系列(七)—— Hive 常用 DML 操作
一.加载文件数据到表 1.1 语法 LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (p ...
- MinorGC和FullGC的触发条件
前言 无论是日常工作,还是企业面试,我们都会经常接触到GC.我们都知道GC是java中的垃圾回收策略.GC帮我们省去了很多事.在GC中,我经常听到的就属于MinorGC和FullGC了.那么在什么情况 ...
- Codeforces 396D
题意略. 思路: 很经典的逆序对计数问题. https://blog.csdn.net/v5zsq/article/details/79006684 这篇博客讲得很好. 当循环到n的时候,我们需要特殊 ...
- 前端H5与安卓和ios之间通信
在一些app场景中,经常看到app里面嵌套H5页面, 安卓和ios提供一个空壳子,方法两者互相调用.上一周就是写H5页面让安卓和ios调用使用,中间传参,接受参数.通过 window.wx 对象调用一 ...
- 云原生生态周报 Vol. 17 | Helm 3 发布首个 beta 版本
本周作者 | 墨封.衷源.元毅.有济.心水 业界要闻 1. Helm 3 首个 beta 版本 v3.0.0-beta.1 发布 该版本的重点是完成最后的修改和重构,以及移植其他 Helm 2 特性. ...
- Java8 日期 API 业务使用
最近在做账单结算业务,需要根据客户选择的结算方式来推算下一次结算日期以及该次结算日期段. 推算日期这样的业务直男君以前就写过,只不过使用的是熟悉的 java.util.date 和 java.util ...
- HDU 1045 Fire Net 二分图建图
HDU 1045 题意: 在一个n*n地图中,有许多可以挡住子弹的墙,问最多可以放几个炮台,使得炮台不会相互损害.炮台会向四面发射子弹. 思路: 把行列分开做,先处理行,把同一行中相互联通的点缩成一个 ...
- HDOJ 4253 Two Famous Companies 二分+MST
题目意思:给出n个点,m条边,边分为两种,一种是A公司的,一种是B公司的.边上有权值, 问用n-1条边把n个点连起来的最小费用是多少,其中A公司的边刚好有k条.题目保证有解. 题解:题目意思很简单就是 ...
- 【牛客多校】Han Xin and His Troops
题目: His majesty chatted with Han Xin about the capabilities of the generals. Each had their shortcom ...
- DataReader转换
public static partial class Extension { private static ConcurrentDictionary<Type, ConcurrentDicti ...