一、基础知识点
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>