AJAX的使用

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);
    } 
   

下面是对代码的解释:

	var xmlHttp = null;   (定义一个xmlHttp变量) 
    function readyStateChangeHandle() {   (定义一个readyStateChangeHandle函数，用来判断服务器是否接受到请求并返回了数据。)
        if (xmlHttp.readyState == 4) {   (判断服务器是否接收到了请求)
            if (xmlHttp.status == 200) {  (判断是否成功返回了数据)
                do somethings...   (在这里写成功后要怎么做)
            }
        }
    }
    function ajaxRequest() {   
        if (window.XMLHttpRequest) {   (尝试用标准方法建立XMLHttpRequest对象)  
            xmlHttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {   (如果不行尝试用ie6及以上的方法建立XMLHttpRequest对象)
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange = readyStateChangeHandle;   (调用readyStateChangeHandle函数)
        xmlHttp.open("GET", "ajax.xml", true);   (填写发送的方式，发送的地址，是否使用异步发送)
        xmlHttp.send(null);   (发送)
    }

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

function AJAXS() {
        $.ajax({
            async : false,    //表示请求是否异步处理
            type : "post",    //请求类型
            url : "/getDepts",//请求的 URL地址
            dataType : "json",//返回的数据类型
            success: function (data) {//请求成功之后要做的事
                alert('在这里写返回成功后要执行的代码');
            },
            error:function (data) {
                alert('在这里写返回失败后要执行的代码');
            }
        });

具体的代码大同小异，由于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用的多，因为效率高。速度是王道。