Aajx基础

1.Ajax简介

     Ajax是几个单词首字母的缩写:Asynchronous JavaScript and XML,是异步通信技术实现局部刷新效果。我们通过JS的XMLHttpRequest对象完成发送请求服务器并返回结果的任务，然后使用JS更新局部的页面。异步指的是JS脚本发送请求后并不是一直等着服务器相应，而是发送请求后继续做别的事， 请求相应和处理是异步完成的。XML一般用于请求数据和相应数据的封装，css用于美化页面样式。

2.利用XMLSHttpRequest对象构建Ajax应用

    利用XMLHttpRequest(XHR)对象，每次构建Ajax应用必须遵循以下步骤：

    创建XHR对象

    创建Ajax请求

    发送Ajax请求（Java代码，其他都是js代码）

    处理服务器响应

3.利用XMLSHttpRequest对象构建Ajax应用的优势与不足

  优势：

      不需要插件支持

      优化用户体验

      提高web程序性能

      减轻服务器和带宽的负担

   不足:

       浏览器对XHR对象的支持度不够

       破坏浏览器前进后退按钮功能的正常使用

       对搜索引擎的支持不足

       开发和调试工具的缺乏

 4.利用XMLSHttpRequest对象构建Ajax应用的具体步骤

      首先写一个异步对象的方法，一会在function中调用

      var xml;
   function createHTTP(){
     //方法一:
     //针对不同的浏览器写不同的代码
     if(window.ActiveXObject){
         //针对IE6，IE5.5，IE5
         xml = new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if(window.XMLHttpRequest){
        //针对FireFox,Moziler,Opera,Safai,IE7,IE8
       xml=new XMLHttpRequest();
     }

   }

       在写个调用方法

       function checkUser(){
      var userName=document.getElementById("UserName").value;
      //(1)创建异步对象
      createHTTP();
      //(2)状态变化与事件关联
      xml.onreadystatechange=statechange;
      //(3)创建一个请求，并准备向服务器端发送（加载要连接的页面）
      xml.open("get","CheckUserServlet?UserName="+userName,true);
      //(4)发出请求
      xml.send();

   }

//判断当前请求的状态

     function statechange(){
     //判断是否是完成状态
     if(xml.readyState==4){
      //判断是否执行成功
       if(xml.status==200){
         //4.处理服务器响应
         var data=xml.responseText;
         //alert(data);
         //消息展示容器
         var span =document.getElementById("spanNameMessage");
         if(data=="noexist"){
           span.style.border="solid 1px green";
           span.innerHTML ='恭喜，可以使用';
           valid=true;
         }else{
           span.style.border="solid 1px red";
           span.innerHTML='不可以使用';
           valid=false;
         }
       }
       else{
         document.write("异步调用失败"+xml.status);
       }
     }
   }

onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果
onreadyStateChange事件是在readyState属性发生改变时触发的，
readyState的值表示了当前请求的状态，
在事件处理程序中可以根据这个值来进行不同的处理。 
readyState有五种可取值:
0：尚未初始化，
1：正在加载，
2：加载完毕，
3：正在处理；
4：处理完毕。一旦readyState属性的值变成了4，就可以从服务器返回的响应数据进行访问了。
Http状态码 含义
200 请求成功
202 请求被接受但处理未完成
400 错误请求
404 请求资源未找到
500 内部服务器错误
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.open(bstrMethod, bstrUrl, varAsync, bstrUser,  bstrPassword);
bstrMethod
　　 http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
bstrUrl
　　 请求的URL地址，可以为绝对地址也可以为相对地址。
　　 varAsync[可选]
　　 布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
true和false的区别是
true：请求是异步的 说明发送请求后不必等到响应回来就可以干后边的事 
false:的话是同步的 必须等到响应回来了 才能干后边的事
　　 bstrUser[可选]
　　 如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
　　 bstrPassword[可选]

　　 验证信息中的密码部分，如果用户名为空，则此值将被忽略。

//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)
//向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
//服务器响应方式：
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。