AJAX

AJAX ：Asynchronous JavaScript And XML

Ajax是基于服务器的页面异步处理技术,实现网页局部刷新的功能,当前页面发送一个请求给服务器，当前页面不需要等待服务器响应才能操作网页。发送完请求之后，当前页面可以继续浏览，操作。
AJAX在应用程序跟服务器之间引入了一个中间层ajax引擎,用JavaScript编写,在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面，以及代表用户跟服务器交互。

应用模型

传统的WEB应用模型

---

AJAX工作机制

AJAX编码步骤
1、创建XmlHttpRequest对象()
2、注册状态监控回调函数
3、建立与服务器的异步连接
4、发出异步请求

       window.onload=init;

       function init()
       {
            var nameinputbox =document.getElementsByTagName("input")[0];
            //绑定函数
            nameinputbox.onblur=checkname;
       }

       function checkname( )
       { 
           var xhr = new XMLHttpRequest( );

            var nameinputbox =document.getElementsByTagName("input")[0];
            //回调函数
            xhr.onreadystatechange =   function()
            {       //请求正常
                if(xhr.readyState==4)
                {//服务器响应正常
                    if(xhr.status=200)
                    {//拿到响应结果
                             var resultspan =document.getElementById("usernameInfo");

                           /*  服务器返回数据格式
                             HTML片段
                             JSON格式的数据
                             XML格式的数据*/

                            if(xhr.responseText== "true")
                            {
                                usernameInfo.innerHTML=" 用户名ok";

                            }else
                            {
                                usernameInfo.innerHTML="fail";

                            }
                      }

                }

            };
          //创建连接
            xhr.open("get",   "/Day23_AJAXDemo/servlet/CheckUsernameServlet?username="+nameinputbox.value,true);
           //发送请求
            xhr.send(null);

       }

XmlHttpRequest
属性
readyState：类型short；只读
responseText：类型String；只读
responseXML：类型Document；只读
status：类型short；只读
方法：
open()
send()
setRequestHeader()
事件处理器
onreadystatechange
open(method,url, asynch):method表示HTTP调用方法，一般使用”GET”，”POST”,url表示调用的服务器的地址asynch表示是否采用异步方式，true表示异步，一般这个参数不写,GET方式提交,数据在URL上,POST方式提交
xmlHttp.setRequestHeader(“CONTENT-TYPE”,”application/x-www-form-urlencoded”);
xmlHttp.send(“name=xxx&pwd=xxx”);