AJAX的使用

朱雀 2024-04-19 12:27 73阅读 0赞

## AJAX ##

### 1.AJAX是什么 ###

> Ajax的全称是Asynchronous JavaScript and XML,中文定义为”异步JavaScript和XML”，Web2.0技术的核心。由多种技术组合而成。使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高网页加载速度，从而缩短用户等待时间，改善用户体验。

###### 个人的感觉AJAX就是一个用来的交换获取/传输数据的JS代码。之前没有AJAX的时候，获取到数据之后往往需要重新加载整个页面才能把新数据加载进来，但是有了AJAX之后，由于AJAX本身就是JS，所以数据可以通过JS直接加载到页面中，极大的节省了加载页面所需要耗费的时间和流量。(即不需要再次加载H5页面中重复和无用的代码，只需要加载包含数据的代码和CSS框架)极大的提高了用户的使用体验，特别是在移动端中。 ######

### 2.使用AJAX所需要用到的技术 ###

JavaScript；
    异步数据获取技术（也就是ajax的核心：XMLHttpRequest）;
    数据交换和操作技术XML；
    动态显示和交互技术DOM；
    及其标准的表现技术XHTML和CSS。

### 3.AJAX的优缺点 ###

#### 3.1 优点： ####

1.  由于AJAX本身就是JS，所以能和Html无缝对接。
2.  AJAX极大的极高了用户体验，并节省了大量的时间和流量。
3.  无需额外的插件

#### 3.2缺点 ####

1.  由于AJAX是JavaScript的一个API，所以一旦没有JavaScript或者用户禁掉JavaScript，AJAX就无法使用。
2.  AJAX会影响浏览器的默认行为，即后退，收藏夹等。
3.  由于AJAX的进程是在后台，所以用户是不知道AJAX的进程是到了什么进度，所以我们要考虑到如何让用户知道进程的进度。(例如显示进度百分比或者是监测state的进度并及时给出反馈)。

### AJAX的代码步骤 ###

1.  创建ajax函数
2.  创建request变量
3.  设置发送的方式，url，异步还是同步post(‘get’,‘url’,true)
4.  判断服务器是否成功收到请求并返回数据(readystate == 4 && state == 200)
5.  定义发送成功/失败后要执行的操作(success()与error())
6.  发送请求(send())  
    即:
    
        var xmlHttp = null;
         function readyStateChangeHandle() {
         if (xmlHttp.readyState == 4) {
             if (xmlHttp.status == 200) {
                 do somethings...
             	}
         	}
         }
         function ajaxRequest() {
             if (window.XMLHttpRequest) {
                 xmlHttp = new XMLHttpRequest();
             }
             else if (window.ActiveXObject) {
                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
             }
             xmlHttp.onreadystatechange = readyStateChangeHandle;
             xmlHttp.open("GET", "ajax.xml", true);
             xmlHttp.send(null);
         }

下面是对代码的解释:

以上的代码是在JS中的，在Jquery中用以下ajax代码：

具体的代码大同小异，由于jquery已经进行了一些预处理，所以代码少了很多重复的地方，只要填写一些必须的参数即可。

### AJAX中的GET与POST的区别 ###

#### GET ####

##### GET的优点 #####

> 1.  get的传输速度要比post快，一般来说get传输数据花费的时间是post的一半左右。
> 2.  get的使用要比post快，代码量少。

##### GET的缺点 #####

> 1.由于GET传输数据时是把数据放到url后用？数据1&数据2的方式来传输的。而浏览器中url的长度是有限制的(通常是1024字节)，所以get能传输的数据量少。
> 
> > 举个例子，我现在想用get方法来传输用户输入的用户名和密码到后台。用户名和密码分别是xiaoMing和123456，那么传输的时候get方法会自动把数据放到url后，即ajax.php?name=xiaoMing&password=123456。由于数据都要放到url中，由于浏览器会限制url的长度，所以get方法传输的数据是有限的，即一般为1024字节。同时由于数据是放在url中的，数据是可见的，因此当需要传输的是比较重要的数据时不要用get方法来传输。
> 
> 2、get方法有可能会导致缓存问题。原因是当浏览器检测到两次输入的url相同时，会自动把缓存过的数据优先输出，所以当我们想避免出现缓存问题时可以在get的url后加一个随机数或者是时间戳。例如ajax.phpname=xiaoMing&password=123456+"&"+“new Date().getTime()”  
> 3.同时get方法还有可能导致乱码问题的出现。  
> 4.gt方法只能传输ASCII的数据

#### POST ####

##### POST的优点 #####

> 1.POST可以传输的数据量大，可以达到2M左右  
> 2.POST没有缓存问题  
> 3.POST不会在url显示数据信息，避免了信息泄露。  
> 4.POST无需编码。  
> 5.POST能发送更多的数据类型

##### POST的缺点 #####

> 1.POST的速度比GET慢  
> 2.POST请求必须发送头文件  
> 3.POST在使用send()方法的时候必须设置参数，而GET可以不用。

#### 两者的使用场景 ####

> 顾名思义，GET适用于获取数据的情况下，常用于向数据库获取数据。同时在后台有需求的情况下，可以将请求参数添加到url后面(这个请求参数具体干嘛是由后台决定的，例如可以拿来当筛选条件，也可以当一个验证信息，或者后台也能拿到数据库中存起来，反正后台有需要前端把信息传进去就好)。  
> 而POST适合向后台传输大量的数据时，或者是传输一些比较私密的信息。因为GET方法所能传输的数据量有限，同时信息会暴露出来。

#### GET和POST的几个误区 ####

###### 1.为什么GET比POST快 ######

> 第一点是因为POST比GET在请求的时候多了一个头文件，即描述数据的信息。  
> 第二点也是最重要的是POST的请求过程和GET的请求过程是不一样的。
> 
> > post请求的过程：
> > 
> > > （1）浏览器请求tcp连接（第一次握手）  
> > > （2）服务器答应进行tcp连接（第二次握手）  
> > > （3）浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）  
> > > （4）服务器返回100 Continue响应  
> > > （5）浏览器发送数据  
> > > （6）服务器返回200 OK响应  
> > > get请求的过程：  
> > > （1）浏览器请求tcp连接（第一次握手）  
> > > （2）服务器答应进行tcp连接（第二次握手）  
> > > （3）浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）  
> > > （4）服务器返回200 OK响应

> 也就是说POST会比GET多一次请求过程。

##### 2.get传参最大长度的理解误区 #####

> 1.HTTP协议没有限制get和post的长度  
> 2.get的长度限制是因为浏览器和web服务器限制了URL的长度  
> 3.不同的浏览器和web服务器，限制的长度不一样

##### 3.目前是POST用的多还是GET用的多 #####

GET用的多，因为效率高。速度是王道。