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来跨域。而这就是本文将要讲述的内容。