ajax基础知识,JavaScript中AJAX基础知识汇总

AJAX

Asynchronous Javascript And XML ：异步的JS和XML

AJAX作用

客户端可以使用AJAX技术从服务器端获取到需要的数据，然后绑定在页面中显示，在前后端分离项目中，AJAX/JSONP是最主要的一种技术之一

AJAX的语法

第一步：创建AJAX对象

var xhr=new XMLHttpRequest();

在IE6及以下版本的浏览器中不兼容，我们需要使用ActiveXObject来处理

第二步：打开一个请求的连接地址

xhr.open([method],[request url],[async],[username],[userpass]);

1、method设置请求的方式

GET系列

get 获取

delete 删除

head 只获取服务器响应头信息

POST系列

post 推送

put 放

……

GET系列和POST系列的区别:

GET主要应用于给服务器的少，从服务器获取的多，例如：获取服务器上的数据进行展示和数据绑定…

POST主要应用于给服务器的多，从服务器获取的少，例如：用户注册…

在真实项目中，我们使用GET请求，会把传递给服务器的内容“通过问号传参的方式”传递给服务器；而POST请求是把内容放在“请求主体”中传递给服务器的；

1)GET请求专递给服务器的内容有大小限制

xhr.open(‘get’,’/temp?name=zf&age=8…’);

每一个浏览器对于URL的长度是有限制的(谷歌8KB、火狐7KB、IE2KB)，如果传递的内容比较的多，URL会很长，超出的部分，浏览器会截取。

POST理论上没有大小的限制，真实项目中为了节约网络消耗和提高性能，我们自己会做最大的限制

2)GET请求不安全,POST相对安全

GET是通过问号传参传递信息的，很容易被url劫持，导致信息的泄露或者恶意修改等

3)GET请求容易出现缓存(并且这个缓存不被我们控制)

还是因为GET是通过问号传参传给服务器的

xhr.open(‘get’,’/temp?id=12’); 只要我们两次及以上请求相同的地址传递相同的内容，浏览器很容易就把第一次的结果作为缓存

我们可以使用在URL末尾追加随机数的方式清除缓存：xhr.open(‘get’,’/temp?id=12&_=’+Math.random())

2、request url 请求的URL地址(真实项目中的这个地址是服务器告诉我们的)

3、设置同步异步，默认是true，代表异步，传递的是false，代表同步

4、设置用户名和密码(基本上不用)

第三步：监听AJAX状态的改变

xhr.onreadystatechange=function(){

//->js code

}

AJAX的各种状态

xhr.readyState

0 UNSEND 未发送，创建一个AJAX对象，默认的状态就是零

1 OPENED 已打开，也就是把xhr.open(…)执行了

2 HEADERS_RECEIVED 已经获取到服务器的响应头信息了

3 LOADING 响应主体内容正在加载

4 DONE 响应主体内容加载完成

服务器响应状态码(HTTP网络状态码):

200 成功

301 永久重定向(永久转移)

302 临时重定向(临时转移) 服务器负载均衡

304 读取缓存数据(对于不经常改变的CSS/JS等文件,我们可以做304缓存)

400 传递参数有误

401 没权限

404 找不到

500 未知的服务器错误

503 服务器超负载

获取服务器响应主体的内容：

xhr.responseText 获取的一般都是JSON格式的字符串数据或者是纯文本数据再或者二进制文本数据

xhr.responseXML 获取的是XML格式的数据

第四步：SEND发送请求

xhr.send([requestBodyContent]); 只有POST系列请求，才会把传递给服务器的内容，通过请求主体传递给服务器，GET系列下，我们直接传递null即可;

AJAX实战开发

案例一：客户端获取服务器端的时间

在限时抢购或者倒计时的案例中，我们不能用客户端本地的时间做为参考依据，需要从服务器上获取服务器时间来处理…

以上是AJAX的基础知识，在后面的文章中，我们还会继续介绍AJAX库的编写以及实战开发技巧，敬请关注…