Ajax:概述

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 形式的响应数据。
 ———————————————— 
版权声明：本文为优快云博主「Zhanbo_Guilai」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/Zhanbo_Guilai/article/details/80018356