html5的ajax学习（二）

一、基础知识点

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

二、ajax的get和post请求

2.1 get和post请求

    
    
    


 
 
   
 
   
     
 
       用户名:
            密码:     
           
  

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后台的返回数据

//后台的数据

三、xml数据解析

3.1数据乱码的解决

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

变为

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

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

---

3.2xml数据解析

 
   张  
  3   
 < xing/>  
 < xing >     
    李  
    4 
 

---

数据解析
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 += ''+getNodeText(name)+''+getNodeText(desc)+',';
}
//展示数据
var tags = document.createElement('tags');
tags.innerHTML = tag;

四、json数据（标准的数据结构类型）解析

4.1 JSON解析的实例讲解

json数据结构

数据实例解析.png

效果图

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

代码解析