美文网首页
html5的ajax学习(二)

html5的ajax学习(二)

作者: Xcode8 | 来源:发表于2016-07-19 19:53 被阅读179次

一、基础知识点

1.ajax可以做事情:局部刷新 浏览器搜索列表记录 加载更多的数据
2.登录页面同步网络请求:页面全部刷新,用户量大体验很不好
3.ajax的详解:ajax的get和post请求 同步还是异步,true为异步
ajax.open("get","login.php","true")

二、ajax的get和post请求

2.1 get和post请求
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>ajax的get异步请求</title>    
<script type="text/javascript">     
window.onload = function () {          
    var btn = document.getElementById('btn');                  
    btn.onclick = function () {    
     //第一步 
      var ajax = null;         
      if(window.XMLHttpRequest){//标准浏览器   
             ajax = new XMLHttpRequest();     
       }else{//早期浏览器                 
             ajax = new ActiveXObject('Microsoft.XMLHTTP');               
       }           
       var username = document.getElementById('username').value;    
       var password = document.getElementById('password').value;    

        //第二步 
        var geturl = 'open.php?username='+username+'&password='+password;  
        `post请求加入********`
        //var posturl = 'open.php';  
        //ajax.open('post',posturl,true);   
        ajax.open('get',geturl,true); //第三步   
        `post请求加入********`           
        //ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
        //var postParam = 'username='+username+'&password='+password;               
        //ajax.send(postParam);     
        ajax.send(null);     
       //第四步
        ajax.onreadystatechange = function () {     
           if(ajax.readyState == 4){     
               if(ajax.state == 200){      
                  var data = ajax.responseText;    
                    console.log(data);  
               }                 
         }            
      }        
  }      
}    
</script>
</head>
<body> 
 <div id="showInfo"></div>   
 <div>   
     <form ENCTYPE="application/x-www-form-urlencoded"> 
       用户名:<input type="text" name="username" id="username"><br>            密码:<input type="password" name="password" id="password">     
   <input type="submit" value="提交" id="btn">        
</form>  
</div>
</body>
</html>
2.2get和post请求区别
***get请求的拼接参数设置
  var geturl = 'open.php?username='+username+'&password='+password; 
  ajax.open('get',geturl,true); 
  ajax.send(null);  

***post请求的参数设置
  var posturl = 'open.php';  
  ajax.open('post',posturl,true);   
  ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
  var postParam = 'username='+username+'&password='+password;               
  ajax.send(postParam);
2.3后台的返回数据
//后台的数据
<?php
$username = $_GET['username'];
$password = $_GET['password'];
$username = $_POST['username'];
$password = $_POST['password'];
//返回的数据echo '用户名:'.$username.'密码:'.$password;
>

三、xml数据解析

3.1数据乱码的解决
var geturl = 'open.php?username='+username+'&password='+password;

变为

var geturl = 'open.php?username='+encodeURIComponent(username)+'&password='+password;

乱码一般是因为出现的中文数据。只需要将中文的数据的前面添加encodeURIComponent进行转码即可。

3.2xml数据解析
<xings>
<xing> 
   <name>张</name>  
  <desc>3</desc>   
 < xing/>  
 < xing >     
    <name>李</name>  
    <desc>4</desc> 
 </xing >
</xings >

数据解析
var data = ajax.responseText;
var bs = data.getElementsByTagName('xings')[0];
console.log(bs);
var xins = bs.getElementsByTagName('xing');
var tag = '';
for(var i = 0;i < xins.length;i ++){   
   var xing = xins[i];    
    var name = xing.getElementsByTagName('name')[0];   
    var desc = xing.getElementsByTagName('desc')[0];    
    tag += '<tr><td>'+getNodeText(name)+'</td><td>'+getNodeText(desc)+',</td></tr>';
}
//展示数据
var tags = document.createElement('tags');
tags.innerHTML = tag;

四、json数据(标准的数据结构类型)解析

<!DOCTYPE html>
<html lang="en">
<head>  
  <meta charset="UTF-8">
    <title>json的对象和json的字符串的区别</title>
</head>
<body>
<script type="text/javascript">
   //json字符串
   var str = '{"name":"三国","des":"文学"}';
   //将字符串->json的对象
   var data = JSON.parse(str);  
  //将json的对象->json字符串
   var s = JSON.stringify(data); 
  //输出的内容为:{"name":"三国","des":"文学"}  
    console.log(str);  
  //输出的内容为:文学   
   console.log(data.des);  
  //输出的内容为:Object {name: "三国", des: "文学"}   
   console.log(data);   
 //输出的内容为:{"name":"三国","des":"文学"} 
   console.log(s);
</script>
</body>
</html>
4.1 JSON解析的实例讲解

json数据结构


数据实例解析.png

效果图

屏幕快照 2016-07-21 上午10.28.06.png

代码解析

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快递</title>
<style>
    #divcss{
       background-color: cornflowerblue; 
       width: 200px; 
       height: 200px; 
       position: relative; 
       margin-top: 100px;
       margin-left: 400px;
    }
</style>
</head>
<body>
 <div id="divcss" >
   <input type="text" id="textfield">
   <input type="button" value="查询" id="btn">  
 </div>

 <script type="text/javascript"> 
   window.onload = function () { 
       var btn = document.getElementById('btn');
        btn.onclick = function () {
        var code = document.getElementById('textfield').value;
 //网络请求*******
           var ajax = null; 
           ajax = new XMLHttpRequest(); 
           var url = "https://www.baidu.com"; 
           ajax.open('get',url,true);
            ajax.send(nil);
            ajax.onreadystatechange = function () {
                if(ajax.status == 200&&ajax.readyState == 4){
                    alert("请求成功");
                    var data = JSON.parse(ajax.responseText); 
                   if(data.status == 0){ 
                    var list = data.data.info.context; 
                       var tag = ""; 
                       for (var i = 0;i < list.length;i ++){  
                          //获取model中的数据
                           var item = list[i];
                           var time = item.time; 
                           var desc = item.desc; 
                           var t = new Date(); 
                           t.setTime(time+'000'); 
                           var str = t.getFullYear()+'年'+(t.getMonth()+1)+'月'+t.getDay()+'日'+(t.getHours()>12?'下午':'上午')+t.getHours()%12+':'+t.getMinutes()+':'+t.getSeconds(); 
                           tag += '<li><div>'+str+'</div><div>'+desc+'</div></li>';   
                     }      

                 
                   var ul = document.createElement('ul'); 
                   ul.innerHTML = tag; 
                   document.getElementById('divcss').appendChild(ul);                        }  
              } 
           }; 
       }; 
       var ul = document.createElement('ul'); 
       ul.innerHTML = "无数据内容";
       document.getElementById('divcss').appendChild(ul);
        alert(3);
    } 
</script>
</body>
</html>

相关文章

网友评论

      本文标题:html5的ajax学习(二)

      本文链接:https://www.haomeiwen.com/subject/fhimjttx.html