js的AJAX请求有关知识总结
什么是AJAX?AJAX作用是什么?
async javascript and xml(异步的javascript和xml)
作用:实现局部刷新
- async:我们真实项目中一般使用AJAX从服务器端获取数据都采用异步(当然也可以使用同步)
- xml:可扩展标记语言,我们一般都会在一个XML文件中,自己扩展一些有特殊含义的标签,通过标签的结构来存储一些数据;一般项目中服务器端返回给客户端的数据都是JSON格式的字符串,但是有一些时候服务器端也会给客户端返回XML格式的字符串,诞生的意义就是用自己定义的标记来存储数据结构的,数据结构比较清晰
AJAX是一门技术,我们在客户端的浏览器中,可以通过AJAX技术向服务器端发送一个请求(根据URL地址发送请求),服务器端根据请求把数据返回,我们使用AJAX中提供的方法或者属性可以获取到服务器端返回的内容
Request Method (HTTP请求的方式:客户端发送请求的时候设置)
不管用哪一种请求方式,客户端除了发送请求以外也可以给服务器端传递数据,服务器端也可以给客户端返回数据
- GET 获取,给服务器的少,从服务器拿取的多
- POST 推送,给服务器的多,从服务器获取的少
- PUT 增加,在服务器上增加一些资源文件
- DELETE 删除,在服务器上删除某一个资源文件
- HEAD 头部,只获取服务器的响应头信息,响应主体内容不获取 ...
GET vs POST
GET请求传递给服务器数据一般都是通过URL地址栏问号传参的方式传递给服务器的
POST请求传递给服务器数据一般都是把传递的数据放在请求
[大小限制]
- GET请求,传递给服务器端的内容存在大小的限制, 因为GET请求传递给服务器的内容都是在URL后面拼接的,如果传递给服务器的内容多,URL就会变的很长,每一个浏览器对于URL的长度都会存在大小的限制(谷歌8KB 火狐7KB IE2KB),超过长度限制的部分会被浏览器截掉
- POST请求传递给服务器的数据是放在请求主体中的,理论上传递多少内容都可以,没有大小的限制,但是实际工作中,我们一般都会给其做限制,因为如果传递的内容过多,AJAX整体的请求时间会变的很长(一般都在2MB以内最好)
[缓存问题]
- GET请求经常会出现浏览器和服务器之间做一些默认的缓存(这个缓存不是我们所谓的304,304是我们用有特殊的技术去实现出来的,这里的缓存只是浏览器自己的默认一些机制,我们工作中是不需要这个缓存的)
- POST请求浏览器不会默认为其设置缓存
如果想要清除浏览器默认的缓存,我们需要在URL的末尾追加一个随机数
[安全问题]
- 由于GET传递给服务器的内容都在URL上,这样话,只要别人把URL劫持了,就可以拦截到你传递给服务器的数据,这样信息就不安全了
- POST请求是放在请求主体中的,主体中内容是很难被劫持的
ASYNC

AJAX默认是异步请求的,也就是第三个参数默认是TRUE,如果想使用同步请求,把第三个参数改写为FALSE
创建一个AJAX对象
打开一个URL请求地址(发送请求前的一些配置)
[请求方式]:
GET系列:GET/DELETE/HEAD
POST系列:POST/PUT
[请求地址]:
我们通过这个地址向服务器发送数据请求,请求的地址一般都是后台提供的 (API接口文档)
[设置同步异步]:
默认是TRUE异步,设置为FALSE为同步
[USER NAME]
[USER PASS]:
用户名和密码,某些时候服务器为了保证安全,只允许部分用户能够通过服务器的请求(我们现在一般都是匿名访问),此时需要我们提供安全的秘钥

- xhr.response:获取响应主体内容(一般不用)
- xhr.responseText:获取响应主体内容是文本格式(字符串)的
- xhr.responseXML:获取响应主体内容,而且获取的内容是XML格式(XML文档)的
- xhr.getResponseHeader([key]):获取响应头信息,例
- xhr.getResponseHeader("data")就是在获取响应信息中获取服务器的时间
- xhr.timeout:设置AJAX请求的超时时间,如果当前请求超过这个时间,代表超时,AJAX请求结束,并且会触发ontimeout事件
- xhr.abort:中断当前的AJAX请求,就是当请求被中断触发的事件
- xhr.setRequestHeader([key],[value]):设置请求头信息
- xhr.send(null):发送AJAX请求,AJAX请求这件事从执行send后才开始(之前都是在做准备),当readyState===4的时候这件事情结束
- send方法中写的内容就是客户端通过请求主体传递给服务器的内容,不想通过请求主体传递内容则写null
AJAX的状态
xhr.readyState
0 unsent 请求还没有发送(AJAX对象刚刚创建完成)
1 opened 已经把XHR.OPEN执行完成了,打开,已经完成第二步。
2 headers_received 响应头信息已经接收,但是主体的内容还没有响应回来
3 loading 服务器返回的响应主体的内容正在处理加载
4 done 响应主体内容已经获取成功,被客户端接收到
xhr.status:HTTP状态码(/网络状态码)
通过状态码可以知道当前HTTP事物是否成功,以及失败的原
[2开头]:
成功 200-> OK
[3开头]:
也代表成功,但是经过了一些特殊处理。
Status Code
(HTTP响应状态码:服务器端响应内容的时候设置)
xhr.status
200
-> OK 正常发送也正常返回,中间没有任何的特殊操作(以2开头的状态码都可以算作成功)
301
-> Moved Permanently 新版本HTTP协议中,代表 永久转移;之前的版本中代表 永久重定向
(一般只应用于域名的跳转)
例如:我们访问http://www.360buy.com/都会重新定向到http://www.jd.com/这 个就是永久转移
302
-> Move temporarily 新版本的HTTP协议中代表,临时转移了;之前的版本中代表 临时重定向,新版中307代表临时重定向
(一般应用于图片的加载等)
例如:服务器的负载均衡,对于很多大公司的项目,网站中的资源图片很多都是采 用的302做的临时转移,以此解决主服务器的压力
304
Not Modified 读取的是缓存数据(重要,网站优化的一些特别重要的手段我们一般 会把静态资源文件css/js/img做304缓存)
例如:对于不经常更新的JS/CSS/IMG等,第一次请求完成后我们做一个缓存,以后 在请求我们直接读取缓存中的内容,这个技巧也是前端开发中常规的优化手段
400
Bad Request
401
Unauthorized 传递给服务器的参数出现错误
403
Forbidden 无权限访问,接收到请求了,但是没有返回正常的结果,但是就是 不告诉你错误原因,有些时候会返回404
404
Not Found 找不到,请求的URL地址是错误的
413
Request Entity Too Large 客户端传递给服务器的内容超过了服务器愿意 接收的范围
500
Internal Server Error 未知的服务器错误,服务器可能宕机了也可能是其它的 原因,总之是服务器的错误
503
Service Unavailable 服务器压力过大超负荷,比如一台服务器只能同时处理1000 个访问,那么从第1001个开始都是503,一般遇到503多刷新几次可能就好了
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域。而这就是本文将要讲述的内容。
js的AJAX请求有关知识总结的更多相关文章
- Vue.js之Ajax请求
Vue.js同React.Angular,可以说号称前端三巨头. 前段时间,有个哥们说,Vue.js现在出2.0版本了.可是我现在还是在用1.0的. Vue.js一直都没有好好系统的学习,包括目前公司 ...
- leyou_04_vue.js的ajax请求方式
1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- js 中ajax请求时设置 http请求头中的x-requestd-with= ajax
今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...
- 用JS实现Ajax请求
AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成的. ...
- js的ajax请求
1 js原生get请求 <script> window.onload = function(){ var oBtn = document.getElementById('btn'); oB ...
- 了解HTML/CSS/JS/JQuery/ajax等前端知识
什么是HTML 超文本标记语言 浏览器通过识别相应的标签来加载页面 通过HTTP协议传输,不是编程语言 HTML常用标签 title script style link meta link body ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- js原生ajax请求get post笔记
开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...
随机推荐
- C++中父类的虚函数必需要实现吗?
一.情景 C++中父类的虚函数必需要实现吗? class Vir{ public: virtual void tryVirtual(); }; class CVir:public Vir{ publi ...
- eXtremeDB相关问题解答(3)
> 1. Could our database support multi-database under one single instance? > > 2. ...
- UNIX多线程编程
一个程序至少有一个进程.一个进程至少有一个线程.进程拥有自己独立的存储空间,而线程能够看作是轻量级的进程,共享进程内的全部资源.能够把进程看作一个工厂.线程看作工厂内的各个车间,每一个车间共享整个工厂 ...
- myeclipse中断点调试
在代码最左端,也就是行号位置处双击.会出现一个实心小圆点.即增加的断点.debug启动程序,就会运行到断点处: 按F5是进去方法里面. 按F6是一步一步走, 按F7是跳出方法里面(按F5后再按F7就跳 ...
- 自己定义控件-DownSlidingDrawer
一.描写叙述 能够下拉的 SlidingDrawer 二.效果图 图片是网上找到,可是效果是一样的 三.源代码 https://github.com/mentor811/Demo_MySlidingD ...
- RvmTranslator6.1 - Attribute List
RvmTranslator6.1 - Attribute List eryar@163.com 1. Introduction RvmTranslator can translate the RVM ...
- Sparse Autoencoder(一)
Neural Networks We will use the following diagram to denote a single neuron: This "neuron" ...
- LuoguP1251 餐巾计划问题(费用流)
题目描述 一个餐厅在相继的 NN 天里,每天需用的餐巾数不尽相同.假设第 ii 天需要 r_iri块餐巾( i=1,2,...,N).餐厅可以购买新的餐巾,每块餐巾的费用为 pp 分;或者把旧餐巾送 ...
- 【CS Round #39 (Div. 2 only) A】Removed Pages
[Link]: [Description] [Solution] 每读入一个x; 把a[(x-1)/2]置为1即可; 统计1的个数 [NumberOf WA] [Reviw] [Code] /* */ ...
- js配合My97datepicker给日期添加天数
<input name="ctl00$ContentPlaceHolder1$txtTimeStart" type="text" value=" ...