核心：

btn.onclick = function () {
  var xhr = new XMLHttpRequest()
  xhr.open('get', 'hellw.txt', true)
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        alert(xhr.responseText)
      } 
      else {
        alert('出错了，' + xhr.status)
      }
    }
  }
}

流程：
打开浏览器--》输入地址--》按Enter--》等待服务器响应；


1）打开浏览器，创建一个ajax对象 之后利用属性send()和方法responseText()去获取内容

IE6下： 以下用的是ActiveXObject('Microsoft.XMLHTTP')

標準下：var xhr = new XMLHttpRequest()

为兼容IE6，首先定义一个null;，然后分别判断处理



2）var xhr = null;

try {
  var xhr = new XMLHttpRequest()
} 
catch (e) {
  var xhr = ActiveXObject('Microsoft.XMLHTTP')
}

2）輸入地址：open('打开方式',url,3是否异步)

异步：非阻塞，前面未完成，後面可開始執行，大部分情況下都用异步

同步：阻塞，当前面未完成時，会阻止后面的比如加载jq,须先加完再执行($)(fun).....

xhr.open( 'get','hellw.txt',true)

3）按Enter，執行操作；相當於Form的submit

4）等服务器响应，即返回的数据 ，返回后存放在属性里，responseText【属性】或responseXML【XML属性】:ajax请求返回的内容，被存放到这个属性下

readyState：ajax工作狀態：0,1,2,3,4

0 （初始化）还没有调用open()方法 1 （载入）已调用send()方法，正在发送请求 2 （载入完成）send()方法完成，已收到全部响应内容 3 （解析）正在解析响应内容 4 （完成）响应内容解析完成，可以在客户端调用了

status状态码；需要做容错处理：

if (xhr.status == 200) {
  alert(xhr.responseText)
} 
else {
  alert('出错了，' + xhr.status)
}



表单的作用：数据提交

action:地址;默认当前页面<br />
method:数据提交方式 get post enctype:提交数据格式： 默认get方式<br />

"Content-Type","application/x-www-form-urlencoded”

get:把数据名称和数据对应的数据值用等号连接起来，如果有多个会&连接，通过url?后面传入指定页面<br />

PHP接收方式要对应：get $_GET ; post $_POST 当然 $_REQUEST

JSON.stringify() 对象转成字符串
JSON.parse()字符串解析成对象


生成新闻例子一：

整个流程走一遍，数据data转换成对像再处理：var data = JSON.parse(xhr.responseText)

之后即拿数据处理append到ul里

var btn = document.getElementById('btn')
btn.onclick = function () {
  var xhr = null
  try {
    var xhr = new XMLHttpRequest()
  } 
  catch (e) {
    var xhr = ActiveXObject('Microsoft.XMLHTTP')
  }
  xhr.open('get', 'getnews.php', true)
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        //   console.log(xhr.responseText);
        var data = JSON.parse(xhr.responseText) //转换成对像
        var html = ''
        var _ul = document.getElementById('ul1')
        for (var i = 0; i < data.length; i++) {
          html += '<li><a href="">' + data[i].title + '</a></li>[<span>' + data[i].data + '</span>]'
        }
        _ul.innerHTML = html;
      } 
      else {
        alert('出错了，' + xhr.status)
      }
    }
  }
}

运行


get方式，1、缓存问题；可使用时间戳解决，&不能丢；2、乱码，使用encodeURI解决，post无此问题

xhr.open('get', '1.get.php?username=' + encodeURI('小时') + '&age=32&' + new Date().getTime(), true)

1.get.php:

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_POST['username'];
$age = $_POST['age'];
echo "欢迎 你的名字：{$username}，年龄：{$age}";

所以，post方式应该时，send()方法里传参，并且要设置请求头：

var btn = document.getElementById('btn')
btn.onclick = function () {
  var xhr = null
  try {
    var xhr = new XMLHttpRequest()
  } 
  catch (e) {
    var xhr = ActiveXObject('Microsoft.XMLHTTP')
  }
  //post时参数传这里
  xhr.open('post', '1.get.php', true)
  //告诉后端发送数据的类型  
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  xhr.send('username=小时&age=30');
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        alert(xhr.responseText)
      } 
      else {
        alert('出错了，' + xhr.status)
      }
    }
  }
}

所以粗略的ajax封装为：

function ajax(method, url, data, success) {
  var xhr = null
  try {
    var xhr = new XMLHttpRequest()
  } 
  catch (e) {
    var xhr = ActiveXObject('Microsoft.XMLHTTP')
  }
  if (method == 'get' && data) {
    url += '?' + data
  } //如果有数据存在并且方法get()

  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('出错了，' + xhr.status)
      }
    }
  }
}