javascript ajax和jquery ajax

一进行ajax步骤:

1 获取dom值

2发送ajax请求

3返回成功进行前端逻辑处理

二原生javascript的ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <button onclick="ajax()">发送请求</button>
    </body>
    <script type="text/javascript">
    function ajax(options) {
      var options={
        url: "https://m.lechebang.cn/gateway/shop/getServiceNetList",              //请求地址
        type: "POST",                       //请求方式
        data:{"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101},        //请求参数
        dataType: "json"
      }
      var params =JSON.stringify(options.data);
      //创建 - 非IE6 - 第一步
      if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
      } else { //IE6及其以下版本浏览器
          var xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }
       //连接 和 发送 - 第二步
      if (options.type == "GET") {
          xhr.open("GET", options.url + "?" + params, true);
          xhr.send(null);
      } else if (options.type == "POST") {
          xhr.open("POST", options.url, true);
          //设置表单提交时的内容类型
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          xhr.send(params);
      }
      //接收 - 第三步
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          var status = xhr.status;
          if (status >= 200 && status < 300) {
              options.success && options.success(xhr.responseText, xhr.responseXML);
              console.log("调取ajax成功,开始进行前端逻辑处理数据");
          } else {
              options.fail && options.fail(status);
              console.log("调取ajax失败");
          }
        }
      }
    }
    </script>
</html>

三 jquery的ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <button onclick="ajax()">发送请求</button>
    </body>
    <script type="text/javascript">
    function ajax(options) {
      var parameter=JSON.stringify({"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101});
      $.ajax({
        type:"post",
        url:"https://m.lechebang.cn/gateway/shop/getServiceNetList",
        async:true,
        data:parameter,        //请求参数
        dataType: "json",
        success:function(result){
          console.log(result);
        },
      });

    }
    </script>
</html>

四 jquery实现ajax并将返回值渲染到页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
      <!--<div class="item" style="border: 1px #000 solid;">
        <div class="storeName"></div>
      <div class="telephone"></div>
      <div class="address"></div>
      </div>-->
        <button onclick="sendAjax()">发送请求</button>
    </body>
    <script type="text/javascript">
    function sendAjax(options) {
      var parameter=JSON.stringify({"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101});
      $.ajax({
        type:"post",
        url:"https://m.lechebang.cn/gateway/shop/getServiceNetList",
        async:true,
        data:parameter,        //请求参数
        dataType: "json",
        success:function(result){
          var listObj=result.result.storeDetailResults;
          html='';
          var template='<div class="item" style="border: 1px #000 solid;">'+
                  '<div class="storeName">@storeName</div>'+
                  '<div class="telephone">@telephone</div>'+
                  '<div class="address">@address</div>'+
                '</div>';
          for(var i=0;i<listObj.length;i++){
            html+=template.replace("@storeName",listObj[i].storeName).replace("@telephone",listObj[i].telephone).replace("@address",listObj[i].address);
          }
          $("body").html(html);
        },
      });

    }
    </script>
</html>

效果如下: