ajax原理及使用案例

一、什么是ajax?

ajax用来和服务器进行交互，即前端与后端进行交互的桥梁。

二、ajax的特点：

提交少量数据；

异步；

提高程序的执行效率；

提高用户体验；

减少宽带。

三、ajax的作用：

无刷新页面。

四、ajax原理（代码展示）：

   /*创建ajax对象：XMLHttpRequest是一个内置函数，所以ajax对象是new出来的对象；需要做兼容：
     标准浏览器：var xhr = new XMLHttpRequest;
     ie浏览器：var xhr = new ActiveXObject('Microsoft.HMLHTTP')
  */
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.HMLHTTP');
    /*与服务器建立连接：有三个参数：
    第一个参数：get/post   ajax一般采用get传值，因为get是路径传值，而且传递的数据少，符合ajax传少量值的特点。
    get和post的区别：get:路径传值；传递的数据少；传递的数据用户可见；便于调试；安全度低；
                   post:非路径传值；传递的数据相对get多；传递的数据用户不可见；不便于调试；安全度相对于get高；
    第二个参数：路径；
    第三个参数：布尔值（是否异步：TRUE--异步--默认值）
    */
   xhr.open('GET','1.txt',true);
   //发送请求：
   xhr.send();
   //通过服务器处理数据并返回处理结果
        xhr.onreadystatechange = function(){
            /*判断状态值：
            0：请求还未初始化；
            1：请求已建立，还未发送
            2：请求已发送，还未处理
            3：处理部分请求
            4：请求处理完成
                */
                if(xhr.readyState === 4){
                    /*判断状态码：
                    404：路径错误；
                    200：交易成功；
                    400：服务器语法错误；
                    500：服务器内部错误；
                    */
                    if(xhr.status === 200){
                        //alert(xhr.responseText);
                    oDiv.innerHTML = xhr.responseText;
                    }
                }
        }

文字叙述ajax的工作原理：

通过创建XMLHttpRequest对象；

通过open与服务器建立连接；

通过send将请求发送给后端；

通过onreadystatechange事件监听后端状态；

当readyState返回值的状态是4，并且Status返回码的状态是200时，表示服务器已找到请求的数据并通过回调函数将响应的responseText数据返回给前端，如果返回404，则表示没有找到请求的数据，即路径错误。

五、ajax的缓存问题（以点击指定按钮显示指定数据为例）：

ajax.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height:100px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <p><button id = "btn1">认识kinoko</button></p>
    <p><button id = "btn2">了解kinoko</button></p>
    <p><button id = "btn3">熟悉kinoko</button></p>
    <div id = "box"></div>
</body>
</html>
<script src= "ajax.js"></script>
<script>
//获取按钮：
var obtns = document.getElementsByTagName('button');
var oDiv = document.getElementById('box');
for(let i =0 ,len=obtns.length;i<len;i++){
    obtns[i].onclick = function(){
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.HMLHTTP');
   xhr.open('GET',(i+1)+'.txt?t='+new Date().getTime());//注意此处路径的写法，因为使用let声明变量，不会提升变量，所以i可以直接拿来用；
   //如果用var声明变量，则需要给i重新定义：obtns[i].index = i;此时路径为：(i+1)+'.txt'；或者不给i重新定义，路径为
   //this.index+'.txt'.
   xhr.send();
        xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                    oDiv.innerHTML = xhr.responseText;
                    }
                }
        }
    }
}
</script>

txt文件：

1.txt

你好！
欢迎来到kinoko的世界。
kinoko衷心款待大神哦！

2.txt

kinoko是一个只喝露水的小仙女；
一定要善待她哦！

3.txt

哈哈哈.......
是不是有点喜欢她呢？
只能回答yes!

我们知道ajax的作用是无刷新页面，正常情况只要我们对txt做了改动，在不刷新页面的情况下点击按钮，会自动更新内容。但当我们使用ie浏览器运行以上代码时，会发现更新txt文件时，点击按钮，页面并不会去更新，这个bug就是ajax的缓存问题，要解决这个问题，我们得先知道为什么会存在这个bug,什么原因导致的，当浏览器多次请求同一个文件时，如果路径不发生改变，后面的多次请求就直接从浏览器缓存拿数据，导致了服务器发生更改时，就无法拿到服务器的数据。

究其本质是因为路径是不变的，所以要解决这会bug,我们是不是应该考虑：浏览器每访问一次该文件，让它的路径发生改变。

解决方法：

方法一：在路径后面加一个一直在变的参数

1.url?id=Math.random();

2.url ?id=new Date().getTime();

这个方法会在浏览器产生缓存，用起来并不会很ok

方法二：手动在浏览器清除缓存

这个方法虽然可以解决这个bug，但不推荐使用

方法三：

添加请求头：xhr.setRequestHeader('if-modified-since','0');[比较服务器上最后文件的修改时间，如果时间一样，则直接从浏览器缓存获取数据；如果不一样，则先清除浏览器之前的缓存，再从服务器获取更新后的数据。不会有过多的缓存，推荐使用]写在open和send的中间。

ajax原理及使用案例

猜你喜欢