Ajax学习总结

Ajax:
    Asynchronous JavaScript and XML(异步的JavaScript和XML).
    Asynchronous: 异步的意思
    JavaScript: JavaScript脚本,在浏览器中执行
    and: 和
    xml: 是一种数据格式

Ajax是一种做局部刷新的新方法,不是一种语言.Ajax包含的技术主要有JavaScript,dom,css,xml等等.
核心是JavaScript和xml.
JavaScript: 负责创建异步对象,发送请求,更新页面的dom对象.Ajax请求需要服务器端的数据.
xml: 网络中的传输的数据格式.使用json替换了xml.

Ajax中使用XMLHttpRequest对象
    1) 创建异步对象 var xmlHttp = new XMLHttpRequest();

    2) 给异步对象绑定事件. onreadystatechange : 当异步对象发起请求,获取了数据都会触发这个事件.
    这个事件需要制定一个函数,在函数中处理状态的变化.
        xmlHttp.onreadystatechange = function() {
            处理请求的状态变化.
        };

         异步对象的属性 readyState 表示异步对象请求的状态变化
        0: 请求未初始化,创建异步请求对象  var xmlHttp = new XMLHttpRequest();
        1: 初始异步请求对象  xmlHttp.open(请求方式,请求地址,true);
        2: 异步对象发送请求  xmlHttp.send();
        3: 异步对象接收应答数据 从服务器端返回数据, 此步是XMLHttpRequest异步对象内部使用,获取原始的数据.
        4: 异步对象把接收的数据处理完毕,此时才可以读取数据, 此步开发人员使用,更新当前页面.

    3) 初始异步请求对象
        异步的方法open().
        xmlHttp.open(请求方式get|post,"服务器端的访问地址",同步|异步请求(默认是true,异步请求))
        例如:
            xmlHttp.open("get","loginServlet?name=...&pwd=123",true);

    4) 使用异步对象发送请求
        xmlHttp.send();

    获取服务器端返回的数据,使用异步对象的属性 responseText.
    使用例子: xmlHttp.responseText

          function doAjax(){

              // 1/创建异步对象
              var xmlHttp = new XMLHttpRequest();
              // 2/绑定事件
              xmlHttp.onreadystatechange = function () {
                  // 处理服务器端返回的数据,更新当前页面
                  if (xmlHttp.readyState===4&&xmlHttp.status===200){
                      // 更新dom对象
                      document.getElementById("msg").innerText = xmlHttp.responseText;
                  }
              }
              // 3/初始请求数据
              // 获取dom对象的value值
              var name = document.getElementById("name").valueOf().value;
              var weight = document.getElementById("w").valueOf().value;
              var height = document.getElementById("h").valueOf().value;


              //此步传输数据
              // 第二个是(类名?映射名?)加上正确格式的字符串
              var msg = "name="+name+"&weight="+weight+"&height="+height;
              xmlHttp.open("get","bmiServletPart?"+msg,true);
              // 4/发起请求
              xmlHttp.send();
          }