Ajax的基础知识

一，什么是Ajax？

    Ajax：无需刷新当前页面就可以实现与服务器交互的技术，是一系列技术的集合

二，Ajax的相关技术

• XMLHttpRequest对象实现客户端与服务器的通信
• JavaScript实现了无刷新改变局部页面内容
• ASP，JSP，Servlet，PHP可以接收XMLHttpRequest对象发送的请求，对这个请求进行一系列操作
  
• XML文档格式f返回操作后的结果
• DOM对XML文档结点进行解析。

三，XMLHttpRequest对象

   XMLHttpRequest对象是微软在IE提供的一个组件。

1.创建XMLHttpRequest对象：

   function createXMLHttpRequest()
        {
            if(window.XMLHttpRequest) //判断浏览器是否通过JavaScript本地方法支持XMLHttpRequest对象，如果支持，就创建（除IE其他浏览器创建对象的方法）
            {
                XMLHttpReq=new XMLHttpRequest();
            }
            else
            {
              try{
                if(window.ActiveXObject)   //判断浏览器是否支持ActiveX（在IE中使用ActiveX支持XMLHttpRequest），支持创建，以下是不同版本IE的创建方法
                {
                    XMLHttpReq=new ActiveXObject("Msxm12.XMLHTTP");
                }
                }catch(e)
                {
                    try{
                       XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){}
                }
            }
        }

2.常用方法和属性：

（1）open(String method,String url,boolean asynch,String name,String password):建立对服务器的调用

•     前两个参数是必需的：
•     method：可以是Post或Get
•     url：指所要访问的服务器资源的位置
•    asynch：指异步访问服务器还是同步，默认异步访问
•    name,password：使用指定用户名和密码访问服务器资源

（2）send(content) ：向服务器发送请求，参数会作为请求中的内容发送到服务器中

 （3）常用属性：

•   readyState：描述请求的状态，可以取以下5个值：0（未初始化），1（正在加载），2（已加载），3（交互中），4（已完成）
•   onreadystatechange：每个状态的改变都会调用这个时间处理器，可以监听状态的变化，并提供对应的处理方法
•   status：描述服务器的状态码
•   statusText：描述可HTTP状态码对应的文本
•   responseText：服务器以文本字符串返回的响应
  
•   responseXML：服务器以XML格式返回的响应
  

四，客户端向服务器发送请求

1.使用XMLHttpResquest对象发送请求

   在发送请求之前，使用对象的open方法建立对服务器的调用，才能发送请求。而且需要指明在请求状态发生改变的时候需要调用的时间处理方法（Ajax中一般都会实现一个JavaScript函数来处理请求状态变化时间）

2.常用发送请求的内容的方法

（1）显示传参，和Web页面中通过超链接传值方式的原理一样。使用这个方法向服务器发送信息时，send(content)中的参数就可以使用null来代替。（例如：http://localhost:8080/Test/Hello?name="kitty"&password="1234" 这个URL，访问的是Helllo,建立服务器调用同时传递参数:name和password）

 （2）内容较复杂时，将发送的内容组织成XML文档格式，通过send(content)方法将参数内容发送到服务器（content就是参数内容）

代码示例：

  function sendRequest(url)
        {
             createXMLHttpRequest();
             XMLHttpReq.open("GET", url, true);
             //指定响应函数
             XMLHttpReq.onreadystatechange=handleResponse;
             XMLHttpReq.send(null);
           
        }

五，服务器处理用户请求

1.在服务端处理用户请求

  （1）超链接传递参数时，通过request.getParameter（“参数名称”）获取参数值，然后进行对应的逻辑操作

   （2）XML格式发送请求信息时，使用DOM或SAX从XML文档中取出需要的信息，然后进行对应的逻辑操作

2.返回XML格式的响应文档

代码示例：

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {


		response.setContentType("text/html charset=UTF-8");
		response.setHeader("Cache-Control","no-cache");
		PrintWriter out = response.getWriter();
		String output="";
                output="<response>"+XML文档内容+"</response">
                out.println(output);
                out.close();
}

六，客户端处理服务器响应

    服务器以XML文档的格式返回逻辑处理的结果，在客户端对返回内容进行处理。然后根据处理结果对页面内容进行调整。到这一步，客户端与服务器的异步通信就完成了

（1）分析XML文档的格式

     在客户端可以用XMLHttpRequest对象取得响应文档的内容

    在JavaScript中，可以DOM方式分析文档

    代码示例：

  function handleResponse()
        {
           if(XMLHttpReq.readyState==4)
           {
              if(XMLHttpReq.status==200)
              {
                  var out="";
                  var res=XMLHttpReq.responseXML;  //取出XML响应文档
                  var response=res.getElementsByTagName("response")[0].firstChild.nodeValue;
                  document.getElementById("result").innerHtml=response;
              }
           }
        }

（2）使用JavaScript调整页面内容

    使用innerText或innerHTML可以设置HTML页面元素的显示内容，DOM可以动态创建HTML元素，CSS控制HTML元素的显示风格

通过这些，将处理结果显示到页面上，而且从始至终不会对页面进行刷新。