AJAX

AJAX

一、什么是 ajax

JS 语言 和 服务端 交互的手段 ，简单的来说，AJAX 就是用 JS 向服务端发起一个请求，并获取服务器返回的内容。 AJAX全称：Asynchronous JavaScript and XML。运行环境：服务器环境下运行

二、ajax 的特点

1、不需要插件的支持，原生 js 就可以使用

2、用户体验好（不需要刷新页面就可以更新数据）

3、减轻服务端和带宽的负担

4、缺点： 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到

5、前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）

三、开启 Ajax 请求

1、创建 ajax 对象

var xhr = new XMLHttpRequest();

2、配置请求信息 （有get，post请求方式）

xhr.open("get",url);

3、发送请求

xhr.send();

4、接受响应 （ajax自身状态，http的状态 ）

xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
	console.log(xhr.responseText);
}

四、Ajax的封装

1、只是请求的话，get和post的语法其实没啥区别，只要更换open的第一个参数就好
2、如果有发送数据：
(1)get的数据发送在地址后拼接："?name=admin&pass=123"的形式。
(2)post的数据在发送(send)之前：提前设置要发送数据的格式，将数据放在send中发送，数据写法为："name=admin&pass=123"的形式。

3、 Ajax的缓存问题： 当get请求时，浏览器会默认缓存要请求的资源，如果当我们用浏览器第二次打开同一个地址时，如果服务器中的数据正好改了，有可能会拿不到新数据，为了能够拿到新数据。利用时间戳欺骗浏览器缓存的解决方案，在get请求的url后拼接时间戳：

let url = "data/hello.txt?__lxt=" + new Date().getTime();

这种拼接后的地址对于浏览器来说，是不一样的，但是对于服务器来说，请求的资源是同一个，正好解决了Ajax的缓存问题。

对于以上三点对ajax进行了函数的封装：

 function ajax(ops){
        // 先处理默认属性
        ops.type = ops.type || "get";
        ops.data = ops.data || "";
        if(ops.type=="get"){
        // 在get请求时，使用时间戳避免，缓存问题
        let t = new Date().getTime();
        ops.url = ops.url + "?__qft="+ t + "&" + ops.data;
    }
        // 创建xhr对象
        var xhr = new XMLHttpRequest();
        // 开启请求
        xhr.open(ops.type, ops.url);
        // 根据类型决定send的内容及内容数据格式
        if(ops.type == "get"){
            xhr.send();
        }else{
            // 设置发送头信息，中，发送数据的格式，为，表单数据格式
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(ops.data);
        }
        // 开启监听
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                // 执行回调函数，取出数据
                ops.success(xhr.responseText);
            }
        }
    }

ajax封装的调用形式如下：

js文件中相关代码如下：

//将ajax封装后的文件引入
<script src="../ajax.js"></script>
<script type="text/javascript">
	document.onclick = function(){
   		 //外部文件php的地址
		var url = "http://localhost/ajax/data/get-post.php";
		ajax({
			url:url,
			type:"get",
			data:"user=admin&pass=123",
			success:function(res){
				 console.log(res);
			}
		})
	}
</script>

连接的外部php文件代码：

<?php
 // 既能接收get数据，又能接收post数据
    $u = $_REQUEST["user"];
    $p = $_REQUEST["pass"];
    echo "后台接收到的数据：".$u."---".$p;
?>

结果显示：

（1）console显示

（2）NetWork显示

GET 和 POST 的区别

1、语义化不一样

（1）GET 倾向于从服务器获取数据

（2）POST 倾向于向服务器提交数据

2、传递参数的方式

（1）GET 请求直接在地址栏后面拼接

（2）POST 请求要将数据放在send的参数内，但是提前要设置发送数据的格式：
ajax对象.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

3、参数的大小限制

（1）GET 请求一般不大于 2KB

（2）POST 请求理论上没有上限

4、缓存能力

（1）GET 会被浏览器主动缓存

（2）POST 不会被浏览器主动缓存

5、安全性能

（1）GET 请求相对安全性比较低

（2）POST 请求相对安全性比较高

五、ajax的兼容

1、创建 ajax对象 的兼容

（1）标准浏览器

 xhr = new XMLHttpRequest();

（2）IE 低版本

 xhr = new ActiveXObject("Microsoft.XMLHTTP");

（1）与（2）兼容处理：

let xhr;
if(XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2、接受响应的兼容 （ 几乎大部分浏览器都支持两种，所以几乎不考虑了）

（1）标准浏览器

xhr.onload = function () {
   // ajax的状态默认为4，只需要判断http的状态
  console.log(xhr.responseText)
}

标准浏览器请求成功/失败处理

xhr.onload = function(){
    // ajax的状态默认为4，只需要判断http的状态
    if(xhr.status === 200){
    console.log(xhr.responseText);
    }
    if(xhr.status !== 200){
    console.log(xhr.status);
    }
}

（2）IE 低版本

xhr.onreadystatechange = function () {
   // 手动判断ajax的状态和http的状态
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}

IE 低版本请求失败/成功的处理

xhr.onreadystatechange = function(){
     // 手动判断ajax的状态和http的状态
     if(xhr.readyState === 4 && xhr.status === 200){
     console.log(xhr.responseText);
     }else if(xhr.readyState === 4 && xhr.status !== 200){
     console.log(xhr.status);
     }
 }

（1）与（2）的区别在于，当ajax的状态默认为4才会触发onload，而onreadystatechange只要状态发生改变就会触发。

ajax自身默认异步执行，但是可以强行修改成同步执行，方法是在open方法中传入第三个参数，布尔值 true为异步是默认值， false为同步。因为官方不推荐使用，所以不要使用。