虽然后台代码变了，但是GET请求访问网址依然是 1.get.php?username=沐晴&age=21，所以后台会去浏览器缓存找，结果弹出的还是原来的。大家可以自行测试。
所以，这个时候我们需要解决缓存问题。既然访问网址不变的话会去找缓存，那么我们让网址一直变不就好了。所以我们可以在后面加个一直变化的变量，比如系统事件，或者加一个随机数都行，像下面这样：
xhr.open('get','1.get.php?username=沐晴&age=21&'+new.Date.getTime(),true);
这样就不会存在缓存问题了。有些人会这样写,会在后面给它起个名字t，这个时候如果后台也有个变量叫t，可能就会出问题了，所以不是很推荐。
xhr.open('get','1.get.php?username=沐晴&age=21&t='+new.Date.getTime(),true);
post 请求
1 上节课我们知道，在表单里面传统方式POST请求的内容是放在请求头里的，那么Ajax是放在哪里的呢？
post 数据放在send里面作为参数传递。
2 还有一点是，我们上次我们知道表单里面的第三个参数：enctype: 提交的数据格式，默认是application/x-www-form-urlencoded，但是在Ajax中，你不写就没有，没有默认值，所以我们需要在请求头里面指定提交的数据格式，不然浏览器不知道用哪种格式解析。
所以post请求需要设置下面这两句
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.send('username=沐晴&age=21&');
无缓存问题，因为单单是往服务器提交数据，提交数据是不会被缓存的，获取数据才会被缓存。这就是web的机制。
前面讲的都是请求数据，现在来看一下后端接收请求，然后响应给我们的内容。
先看看后端对数据的处理：后端的数据类型也是很多的，我们不能直接把这样的数据给前端吧，所以后端也需要做一定的处理，它有个方法 json_encode 可以根据数据类型不同，然后输出不同格式。看下面的栗子
<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $arr1 = array('le','mo'); // 索引类型的数据 $arr2 = array('username'=https://www.jb51.net/article/>'le','age'=https://www.jb51.net/article/>32); // 2 对应关系的数据 echo json_encode($arr1); // ["le","mo"] 索引类型 输出为数组格式 echo json_encode($arr2); // {"username":"le","age":32} 对应关系的数据 输出为json格式
虽然后端输出的内容格式上是数组和json但是我之前提到过 alert( xhr.responseText );//这里弹出的可都是字符串类型，所以尽管格式上看着是json和数组，但实际的数据类型还是字符串。
所以我们前端要对这些字符串进行转换。这个时候就用到了两个方法
1 stringify() : 把json对象转化成字符串 转换后的字符串是严格的json格式
2 parse() : 把字符串转成对象，可以把后端返回的字符串 转成JSON格式，对于json,只能转换严格json格式的字符串，字符串的键 比较用双引号括起来 像这样 {"username":"le","age":32}
下面来看个实际的案例：
需求：点击页面按钮，实现页面不刷新，在下面显示新闻列表 看注释应该能看懂
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8"> <title>无标题文档</title> <!--<script src="https://www.jb51.net/jquery.js"></script>--> <script> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get','getNews.php',true); xhr.send(); xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { //alert( xhr.responseText ); 后端传来的格式是一个数组里面很多条json 自己可以测试下 var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 每一个json里面有两个键：title和date var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点 var html = ''; for (var i=0; i<data.length; i++) { // 循环所有的json数据，并把每一条添加到列表中 html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML = html; //把内容放在页面里 } else { alert('出错了,Err：' + xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" /> <ul></ul> </body> </html> <?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $news = array( array('title'=https://www.jb51.net/article/>'女总理默克尔滑雪时摔倒 骨盆断裂','date'=https://www.jb51.net/article/>'2014-1-6'), array('title'=https://www.jb51.net/article/>'驻英外交官撰文互称对方国家为"伏地魔"','date'=https://www.jb51.net/article/>'2014-1-6'), array('title'=https://www.jb51.net/article/>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=https://www.jb51.net/article/>'2014-1-6'), array('title'=https://www.jb51.net/article/>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=https://www.jb51.net/article/>'2014-1-6'), array('title'=https://www.jb51.net/article/>'：嫦娥三号是货真价实的中国创造','date'=https://www.jb51.net/article/>'2014-1-6'), ); echo json_encode($news);