Ajax查询商品信息

1、Ajax是什么?

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

2、JSON是什么?

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table{
            border: 1px solid springgreen;
            width: 500px;
            border-collapse: collapse;
        }
        table th,td{
         border: 1px solid springgreen;
         text-align: center;
        }
     </style>
    <script type="text/javascript">
      //如何做浏览器的兼容呢?
      function createXhr(){
          var xhr;
          if(typeof XMLHttpRequest!="undefined"){
             xhr=new XMLHttpRequest();//发送Ajax的对象
          }else if(typeof ActiveXObject!="undefined"){
             xhr=new ActiveXObject("MSXML2.XMLHttp.6.0");
          }
          return xhr;
      }

      window.onload=function(){
         //创建一个请求对象
         var xhr=createXhr();
         xhr.open("get","http://123.57.7.108:83/product.json",true);
         //如果是post请求方式,那么提交参数的格式是什么呢?
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//MIME类型
         xhr.send(null);//因为你使用get方式 null针对的是post方式
         xhr.onreadystatechange=function(){
             //回调函数
             if(xhr.readyState==4){
                  if(xhr.status==200){//200在http协议中表示成功
                      console.log(xhr.responseText);//接受服务端返回的字符串 JSON
                      var products=JSON.parse(xhr.responseText);//将字符串转化成对象
                      console.log(products);
                      //dom操作
                      for(let i=0;i<products.length;i++){
                        var tr= document.createElement("tr");
                        let tds=`
                        
                        
                       
                       ${products[i].id}
                       ${products[i].name}
                       
                          ${products[i].image}"/>
                      
                       
                       ${products[i].price}
                       ${products[i].spuId}
                      
                       `;
                       //将得到的数据插入创建的
                      tr.innerHTML=tds;
                       //再将tr这一行数据插入到表格当中即可
                        document.getElementById("tbl").appendChild(tr);
                      }
                  }
             }
         };
      };
    
    </script>
</head>
<body>
    <h1>Ajax案例</h1>
    <table id="tbl">
    <thead>
        <tr>
            <th>
                全选
                <input type="checkbox" name="all" id="all" />
            </th>
            <th>编号</th>
            <th>名称</th>
            <th>图片</th>
            <th>价格</th>
            <th>类型</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>

你可能感兴趣的:(web前端,Vue,javaScript)