htmlajax基础知识(代码片段)

关键词：

@charset "UTF-8";

.grid-container:before,
.grid-container:after 
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;


.grid-container:after 
  clear: both;


.grid-container 
  max-width: 1080px;
  position: relative;


.grid-100 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;


body 
  min-width: 320px;


@media screen 
  .grid-container:before,
  .grid-container:after 
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  

  .grid-container:after 
    clear: both;
  

  .grid-container 
    max-width: 1080px;
    position: relative;
  

  .grid-100 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  

  body 
    min-width: 320px;
  


@media screen and (min-width: 1080px) 
  .grid-container:before,
  .grid-100:before,
  .grid-container:after,
  .grid-100:after 
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  

  .grid-container:after,
  .grid-100:after 
    clear: both;
  

  .grid-container 
    max-width: 1080px;
    position: relative;
  

  .grid-100 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  

  .grid-100 
    clear: both;
    width: 100%;
  


@media screen and (max-width: 400px) 
  @-ms-viewport 
    width: 320px;
  


@media screen and (max-width: 680px) 
  .grid-container:before,
  .grid-container:after 
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  

  .grid-container:after 
    clear: both;
  

  .grid-container 
    max-width: 1080px;
    position: relative;
  

  .grid-100 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  


@media screen and (min-width: 680px) and (max-width: 1080px) 
  .grid-container:before,
  .grid-container:after 
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  

  .grid-container:after 
    clear: both;
  

  .grid-container 
    max-width: 1080px;
    position: relative;
  

  .grid-100 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  


.grid-container:before,
.grid-container:after 
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;


.grid-container:after 
  clear: both;


.grid-container 
  max-width: 1080px;
  position: relative;


.grid-100 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;


html,
body,
div,
h1,
h2,
p,
ul,
section 
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;


html 
  line-height: 1;


ul 
  list-style: none;


section 
  display: block;


body 
  background: #edeff0;
  padding: 50px 0 0;
  font-family: "Varela Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 62.5%;


.centered 
  margin: 0 auto;


.contained 
  background: white;
  padding: 30px 15px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);


.heading 
  margin-bottom: 20px;


h1,
h2 
  font-size: 2.4em;
  font-weight: 500;
  margin-bottom: 8px;
  color: #384047;
  line-height: 1.2;


h2 
  font-size: 1.8em;


p 
  color: #8d9aa5;
  font-size: 1.4em;
  margin-bottom: 15px;
  line-height: 1.4;


.button 
  background: #3f8abf;
  padding: 8px 18px;
  font-family: "Varela Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.4em;
  color: white;
  font-weight: 500;
  border: 3px solid #3f8abf;
  outline: none;
  cursor: pointer;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 0 0 #3574a0;
  -moz-box-shadow: 0 2px 0 0 #3574a0;
  box-shadow: 0 2px 0 0 #3574a0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;


.button:hover 
  background: #397cac;
  border-color: #397cac;
  -webkit-box-shadow: 0 2px 0 0 #2c6085;
  -moz-box-shadow: 0 2px 0 0 #2c6085;
  box-shadow: 0 2px 0 0 #2c6085;


.response 
  padding: 30px;
  background: #fbfbfc;
  border: 1px solid #e2e5e8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;


.response p 
  margin: 0;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <title>AJAX with JavaScript</title>
  <script>
  
  // this will inform browser that we are going to make a new ajax request or XMLhttprequest
    var xhr = new XMLHttpRequest();
    
    // this event is triggered whenever there is a change in an ajax request (opening, sending, receiving, etc.)
    xhr.onreadystatechange = function () 
      
      // readystate contains a number that tells us the state of the request. "4" means that the
      // request is done and the server has sent back a response
      if (xhr.readyState === 4) 
        // every xmlhttprequest object has a property called "responseText". this is the information the 
        // web server sends back. we're taking the response and putting it into that div
        document.getElementById('ajax').innerHTML = xhr.responseText;
      
    ;
    
    // open() prepares the browser for sending the request. Here we define WHICH http method we will use
    // ie: 'GET', 'POST', 'PUT', 'DELETE'
    
    // the url is where the request is going
    xhr.open('GET', 'sidebar.html');
    
    // we've given the browser all the info it needs to send off the request. now here we actually send it
    
    
    function sendAJAX() 
      
      // we are going to hide the button when user clicks on it
      document.getElementById('load').style.display = "none";
      
      
      // since we are requesting a chunk of html, we dont provide the send method with any
      // information, but when you need to submit information, like input from a form, one can pass
      // the send method that data
      xhr.send();
    
  </script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Bring on the AJAX</h1>
            <button id="load" onClick="sendAJAX()">Bring it!</button>
          </div>
          <div id="ajax">

          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

<section>
<h2>Welcome to the wonderful world of AJAX</h2>
<p>This content provided to you dynamically by the XMLHTTP Request Object</p>
</section>

htmlajax(代码片段)

查看详情

htmlajax教程(代码片段)

查看详情

htmlajax1(代码片段)

查看详情

htmlajax-提前搜索(代码片段)

查看详情

htmlajax网站网站(代码片段)

查看详情

htmlajax-获取文本文件(代码片段)

查看详情

htmlajax_回调函数(代码片段)

查看详情

htmlajax有用的线条(代码片段)

查看详情

htmlajax删除供应商(代码片段)

查看详情

htmlajax_表单彦博(代码片段)

查看详情

htmlajax-获取json文件(代码片段)

查看详情

htmlajax_简单彦博(代码片段)

查看详情

htmlajax请求回html渲染(代码片段)

查看详情

htmlajax_表单_get(代码片段)

查看详情

htmlajax-向服务器发送请求(代码片段)

查看详情

htmlajax在标签形式wordpress工作(代码片段)

查看详情

htmlajax_work.html(代码片段)

查看详情

htmlajax_work.html(代码片段)

查看详情