“里里外外”的ajax

1、ajax主要是做什么？

数据交互

2、ajax流程（模拟）：打开浏览器、在地址栏输入地址、提交、等待服务器返回内容

“打开浏览器”

创建一个对象：var xhr = new XMLHttpRequest();

但是有个兼容问题，仅限ie7之上，所以ie6以下版本，用ActiveXObjext的一个插件，Microsofe.XMLHTTP。

解决方法：

try{
        //代码尝试执行这个块内的内容，如果有错误，则会执行catch{}，并且传入错误信息参数  
        }
    catch(e){
        }

var xhr = null;try {xhr = new XMLHttpRequest();} catch (e) {xhr = new ActiveXObject('Microsoft.XMLHTTP');}if (method == 'get' && data) {url += '?' + data;}

“在地址栏输入地址”

xhr.open('get', 'ajax.txt', true);

因为有get | post 两个metdod，所以

if (method == 'get' && data) {url += '?' + data;}

xhr.open(method,url,true);if (method == 'get') {xhr.send();} else {xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');xhr.send(data);}

open方法：

参数：1、打开方式 get | post；2、地址；3、是否异步

同步和异步的区别：

同步：阻塞模式-前面的代码会阻塞后面的代码的执行；

异步：非阻塞模式-前面的代码不会影响后面代码的执行；

“提交-发送请求”

xhr.send();

“服务器返回结果-数据获取”

readyState:ajax工作状态
    0（初始化）还没有调用open（）方法
    1（载入）载入send()方法，正在发送请求
    2（载入）send（）方法完成，已收到全部的响应内容
    3（解析）正在解析响应的内容
    4（完成）响应内容解析完成，可以在客户端调用了
    responseText:ajax 请求返回的内容就被存放到这个属性下面

on readstate change 当状态值改变的时候触发

status :服务器状态 http状态码
    1开头，消息类型 100--继续发送请求，如请求完成，则忽略该提示 102--代表处理将被继续执行
    2开头：成功 200-请求成功；
    3开头：重定向
    4开头：请求错误 400-请求语法错误；401-客户试图未经授权访问密码保护的页面；403-资源不可用；404-无法找到指定位置的资源
    5开头：服务器错误  500-服务器遇到某些原因，不能完成客户需求；503-服务器维护

xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){//alert(xhr.responseText);var data = JSON.parse(xhr.responseText);var oUl = document.getElementById('ul1');var html = '';for(var i=0; i<data.length; i++){html = '<li><a href="#">'+data[i].title+'</a><span>'+data[i].date+'</span></li>'}oUl.innerHTML = html;}else{alert('出错了,Err:'+xhr.status);}}};

html部分：

<input type="button" value="按钮" id="btn" />    <ul id="ul1"></ul>

php内容部分：

<?phpheader('content-type:text/html; charset="utf-8"');error_reporting(0);$new =array(array('title'=>'普京不满俄专家帮中国研发6代机？俄官员:诽谤', 'date'=>'2017-8-20'),array('title'=>'普京不满俄专家帮中国研发6代机？俄官员:诽谤', 'date'=>'2017-8-20'),array('title'=>'墨西哥7.1级地震已致195人死亡', 'date'=>'2017-8-20'),array('title'=>'群主对成员言行担责属误读 群主被抓与新规无关', 'date'=>'2017-8-20'),array('title'=>'杨振宁87岁时向权威期刊投稿遭拒 被认为是冒名', 'date'=>'2017-8-20'),array('title'=>'人民日报谈叫停虚拟货币交易:平台无合法依据', 'date'=>'2017-8-20'),array('title'=>'中共十九大将修改党章 众多境外媒体高度关注', 'date'=>'2017-8-20'),array('title'=>'群主对成员言行担责属误读 群主被抓与新规无关', 'date'=>'2017-8-20'),array('title'=>'普京不满俄专家帮中国研发6代机？俄官员:诽谤', 'date'=>'2017-8-20'),);    echo json_encode($new);?>

将ajax封装成函数，如下

function ajax(method, url, data, success) {var xhr = null;try {xhr = new XMLHttpRequest();} catch (e) {xhr = new ActiveXObject('Microsoft.XMLHTTP');}if (method == 'get' && data) {url += '?' + data;}xhr.open(method,url,true);if (method == 'get') {xhr.send();} else {xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');xhr.send(data);}xhr.onreadystatechange = function() {if ( xhr.readyState == 4 ) {if ( xhr.status == 200 ) {success && success(xhr.responseText);} else {alert('出错了,Err：' + xhr.status);}}}}

实现每隔三秒，刷新一下，用到setInterval

window.onload = function() {var oBtn = document.getElementById('btn');oBtn.onclick = function() {setInterval(function() {ajax('get','get.php','',function(data) {var data = JSON.parse( data );var oUl = document.getElementById('ul1');var html = '';for (var i=0; i<data.length; i++) {html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';}oUl.innerHTML = html;});}, 1000);};};