Ajax的简单理解和实践

时间 2019-11-30

标签 ajax 简单理解实践栏目 Ajax 繁體版

原文原文链接

1、什么是Ajax？

AJAX=Asynchornous Javascript and XML（异步的javascript和xml）

AJAX是一种无需从新加载整个页面而实现部分更新的网页技术。加强B/S的体验性。

页面部分刷新示例：

<!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>伪造ajax</title>
</head>
<script>
    window.onload=function f(){
        var myDate=new Date();
        document.getElementById("currentTime").innerText=myDate.getTime();

        
    }
    function loadPage(){
            var targetURL=document.getElementById("url").value;
            targetURL="http://"+targetURL;
            console.log(targetURL);
            document.getElementById("iframePosition").src=targetURL;
        }
</script>
<body>
    <div>
        <p>请输入要加载的地址<span id="currentTime"></span></p>
        <p>
            <input type="text" id="url" value="www.baidu.com">
            <input type="button" value="提交" onclick="loadPage()">
        </p>
    </div>
    <div>
        <h3>
            加载页面的位置
        </h3>
        <iframe style="width:100%;height:500px;" id="iframePosition" >
        
        </iframe>
    </div>
</body>
</html>
复制代码

页面显示效果：

点击提交后效果：

在AJAX出现以前，像这种利用iframe实现页面部分刷新的方式是主流，这种方式有以下缺点：
1.如脚本/样式的额外链入增长了请求，天然就增长了时间开销。
2.引入页面会挤占页面控件，而更多的滚动条出如今页面上也会是页面显得更加混乱。
3.iframe会阻塞页面onload事件，使加载变得缓慢。
4.对链接的影响，通常页面默认会有限定的链接次数，iframe占用了这些链接，而iframe显示的内容每每又不那么重要。

2、简单的原生ajax

<!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>
</head>
<style>
  *{
      margin:5px 0 0 5px;
      padding:0;
  }
  table{
      width:500px;
      text-align: center;
      border-collapse: collapse;
  }
  td{
      border:1px solid black;
  }
</style>
<body>
    <div>
        <p>status:<span id="A1"></span></p>
        <p>statusText:<span id="A2"></span></p>
        <p>responseText:<span id="A3"></span></p>
        <p>readyStatet:<span id="A4"></span></p>
       
        <button onclick="change('data.json')">change</button>
    </div>
    <table>
        <th>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>邮箱</td>
                <td>年龄</td>
            </tr>
            <tbody id="myTBody">

            </tbody>
        </th>
    </table>
</body>
<script>
    function change(url){
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("get",url,true);  //get是请求方式 url是请求地址 true开启异步
        xmlhttp.send();
        console.log(xmlhttp.status);
        xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){    //请求成功时
            A4.innerHTML=xmlhttp.readyState;
            document.getElementById("A1").innerHTML=this.status;
            document.getElementById("A2").innerHTML=this.statusText;
            document.getElementById("A3").innerHTML=this.responseText;
            var obj=JSON.parse(this.responseText);
            addChilds(obj);
        }else{                                            //请求失败时
            document.getElementById("A1").innerHTML=this.status;
            document.getElementById("A2").innerHTML=this.statusText;
            document.getElementById("A3").innerText="请求失败";
        } //当请求状态发生变化时调用state_change方法
    }
    
    }

    function addChilds(obj){
        for(var i=0;i<obj.length;i++){
            var myTBody=document.getElementById("myTBody");
        var oTr=document.createElement("tr");
            Object.keys(obj[i]).forEach(key=>{
        var oTd=document.createElement("td");
            console.log(obj[i][key]);
            oTd.innerHTML=obj[i][key];
            oTr.appendChild(oTd);
          });
            myTBody.appendChild(oTr);
        }
    }
</script>
</html>
复制代码

这里为了模拟实际场景，我手动建立了一个简单的data.json文件，内容以下。

[
 
    {
   
      "name":"张国立",
   
      "sex":"男",
   
      "email":"zhangguoli@123.com",
   
      "age":36
   
    },
   
    {
   
      "name":"张铁林",
   
      "sex":"男",
   
      "email":"zhangtieli@123.com",
   
      "age":23
   
    },
   
    {
   
      "name":"邓婕",
   
      "sex":"女",
   
      "email":"zhenjie@123.com",
   
      "age":29
   
    },
   
    {
   
      "name":"张国立",
   
      "sex":"男",
   
      "email":"zhangguoli@123.com",
   
      "age":23
   
    },
   
    {
   
      "name":"张铁林",
   
      "sex":"男",
   
      "email":"zhangtieli@123.com",
   
      "age":26
   
    },
   
    {
   
      "name":"邓婕",
   
      "sex":"女",
   
      "email":"zhenjie@123.com",
   
      "age":24
   
    }
   
]
复制代码

当点击按钮时，就会触发已经写好的事件函数，函数内建立了咱们的ajax实例，它会在服务器上找到data.json文件，再经过JSON.parse将json字符串转化为咱们可以使用的javascript对象，html中的表格是咱们装载数据的容器，咱们得到的json数据通过转换后，就用数组遍历找出每个对象，每次遍历时先建立一个新元素tr，每个对象再用keys方法遍历出他们的属性名，再经过forEach方法建立td元素，最后将td放进已经建立好的tr元素中，再将tr放进table。这里文字描述可能不清晰，建议直接读代码更直观一些。

有一点很重要，要进行这个简单的ajax实践的话，必须是有配置服务器的，能够将本机配置成服务器，也可使用别处服务器的接口，github上应该有相关的json文件接口。

效果展现

3、小结

在ajax出现以前，使用iframe是以牺牲性能和页面的美观为前提的，ajax的出现解决了这个痛点，为先后端的数据交互提供了一个新的更快捷也更理想的方式。

Ajax最大的优势就是能在不刷新整个页面的状况下维持与服务器通讯，其次，它还能使用异步的方式与服务器通讯，不打断用户的操做；在先后端负载均衡上，它将一些后端的工做移到前端，减小服务器与宽带的负担，同时ajax也使得页面与应用分离，也就是数据与呈现相互分离。

尽管ajax看起来这么的完美，但实际上它仍然有许多的不足: 1. 浏览器对XMLHttpRequest对象的支持度不足，Ajax的不足之一首先来自与浏览器，Integer Explorer 在5.0及之后的版本才支持 XMLHttpRequest 对象（现阶段大部分客户端上的IE浏览器是IE6及以上），Mozilla,NetScape 等浏览器支持XMLHttpRequest则在更后，为了使得Ajax 应用能在各大浏览器中正常运行，程序员必须花费大量的精力编码以兼顾各大浏览器之间的差异。 2. 破坏浏览器前进，“”后退“”按钮的正常功能,在传统的网页中，用户常常会习惯性的使用浏览器自带的“前进”，“后退”按钮，然而Ajax改变了此Web浏览习惯。在Ajax中前进，后退按钮都会失效。虽然经过必定的方法（添加苗店）来使得用户可使用“前进”，“后退”按钮，但相对于传统方法却麻烦不少。 3. 对搜索引擎的支持度不足,对于搜索引擎也是支持Ajax的一项缺憾。一般搜索引擎都是经过爬虫程序来对互联网上的数以及万的海量数据来进行分析，而众所周知javascriptd对搜索引擎的支持很不友好，ajax又是用javascript编写的，结果可想而知。 4. 开发和调试工具的缺少，ajax是用javascript编写的，在目前，因为缺乏很好的javascript开发和调试工具，使不少Web开发者对javaScript 望而生畏，这对于编写Ajax 代码更加困难了。