AJAX是什么、怎么用

是前端请求发送的方式之一，是最重要的前后端***数据***交互手段

（async javascript and XML）

ajax是技术的集合：（按顺序）

1. js事件，捕获用户的交互行为
2. XMLHttpRequest 对象，在不中断浏览器任务的情况下，向服务器发送请求
3. 传输数据（HTML，JSON，XML）
4. 解析服务器返回的数据

---

AJAX用法：

//创建请求对象
var AJAX = new XMLHttpRequest();
//设置请求参数
AJAX.open("get",URL,true);
//发送请求
AJAX.send();




//*********************
//post提交键值对
AJAX.setRequestHeader("Content-type","application/x-www-form-urlencoded");
AJAX.send("name=东方&age=18");

open方法的参数：

1. 第一个参数：请求的类型（两种，get,post）

   区别：

   1. 速度：get请求本身比post请求快。3get请求有缓存，二次加载速度快。
   2. 大小：get请求有大小限制（因为浏览器限制了URL长度，ie2K，chrome8k），post请求无大小限制
   3. 安全性：get请求会被浏览器缓存，且发送的数据会显示在URL中，有安全隐患

   get请求的优点：

   1. get请求可以被缓存，减少服务器负担，加快页面二次载入速度（举例）

      get请求的过程： （1）浏览器请求链接（第一次握手） （2）服务器答应连接（第二次握手） （3）浏览器确认，并发送get请求头和数据（第三次握手） （4）服务器返回200 OK响应

      post请求的过程： （1）浏览器请求连接（第一次握手） （2）服务器答应连接（第二次握手） （3）浏览器确认，并发送post请求头（第三次握手） （4）服务器返回100 Continue响应 （5）浏览器发送数据 （6）服务器返回200 OK响应

   2. get请求比post请求相应周期短，加载速度快

   post请求的优点：

   1. 大小不被浏览器限制
   2. 内容比get请求安全

   总结：在获取数据时用get,在操作数据时用post

---

2. 第二个参数：URL

   百度： http://www.baidu.com 协议+域名+发送的参数（get）

   参数：以键值对存在，键值对之间用&连接，与域名用？隔开

   ？name=东方&age=18

   ---

3. Boolean值

   true：异步，不等待返回值，再继续执行代码

   false：同步，等待返回值，再继续执行代码

   //true
   console.log('开始');
   AJAX.onreadystatechange = function(){
       console.log(AJAX.responseText);
   }
   console.log("结束")
   
   //false
   console.log("开始");
   console.log(AJAX.responseText);
   console.log("结束");
   
   

send函数：

​ post方法提交表单，需要更改请求头的 content-type属性：

AJAX.setRequestHeader("Content-type","application/x-www-form-urlencoded");

​ 常见content-type ：

1. text/plain：纯文本形式（post默认提交）

2. application/x-www-form-urlencoded：数据为键值对（标准编码格式）

3. multipart/form-data(上传文件)

   post方式提交参数：send("name=东方&age=18")；

---

解析服务器返回数据：

1. onreadystatechange()函数，readyState属性

   readyState属性存储XMLHttpRequest的状态信息

   当readyState属性改变时，会触发onreadystatechange函数

   readyState属性值：

   0 － （未初始化）还没有调用open()方法，XHR被创建后就是0

   1 － （服务器连接完毕）已调用open()方法，正在发送请求

   2 － （请求已接收）send()方法执行完成，已经接收到全部响应内容

   3 － （请求处理）正在解析响应内容

   4 － （完成）响应内容解析完成，可以在客户端调用了

2. status属性

200-成功

404-没找到页面

500-服务器错误

4. responseText属性

   存储响应成功后，服务器传递回的值

//注册事件 onreadystatechange 状态改变就会调用
AJAX.onreadystatechange = function () {
   if (AJAX.readyState == 4 && AJAX.status == 200) {
　　　　console.log(AJAX.responseText);//返回的值
  　　}
}

一个完整的AJAX get请求

var AJAX = new XMLHttpRequest();
AJAX.open("get","test.php?name=zhao","true");
AJAX.send();
AJAX.onreadystatechange = function(){
    if(AJAX.readyState == 4 && AJAX.status == 200)
    {
        console.log(AJAX.responseText);
    }
}

---

AJAX兼容IE

	
function initAJAX(){
    if (window.XMLHttpRequest){
        AJAX = new XMLHttpRequest();
    }else if (window.ActiveXObject){
        AJAX = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (AJAX != null){
        return AJAX;
    }else{
        alert("您的浏览器不支持AJAX！");
    }
}

AJAX封装

function getAJAX(ajax,url,fun){
    ajax.open("get",url,true);
    ajax.send();
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200)
        {
            fun(ajax.responseText);
        }
        else{
            console.log("XHR状态："+ajax.readyState+",状态码："+ajax.status);
        }
	}
}

function postAJAX(ajax,url,fun,postData){
    ajax.open("post",url,true);
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send(postData);
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200)
        {
            fun(ajax.responseText);
        }
        else{
            console.log("XHR状态："+ajax.readyState+"，状态码："+ajax.status);
        }
    }
    
}