java web学习之ajax

AJAX的概述

什么是AJAX

AJAX的英文全称是Asynchronous JavaScript And XML，即异步的JavaScript And XML。虽然其使用的是老的技术，但用的是新的思想。接下来，就应该了解一下同步和异步的区别。 
我们先来看同步，一图以蔽之。 

当用户点击链接或者提交按钮，页面才会跳转，这时整个页面都会刷新。 
接着我们再来看异步： 

当用户点击链接或者提交按钮，只会让页面的局部进行刷新。这样说来，那么AJAX的功能就是用来完成页面的局部刷新，而不中断用户的体验。

XMLHttpRequest

我们学习AJAX，实际上就是学习XmlHttpRequest这个对象。下面我们将学习一下该对象的属性和方法。 
XMLHttpRequest对象的属性如下图所示： 
 
对于以上属性，我还是稍微做一下解释：

• readyState：XMLHttpRequest对象的状态。共有以下几种状态，如下图所示。 
  
• onreadystatechange：当XMLHttpRequest对象的状态改变时会触发的一个函数。
• status：获得响应的状态码，例如200、404等等。
• responseText：获得(异步加载后)响应的文本数据。
• responseXML：获得(异步加载后)响应的XML数据。

XMLHttpRequest对象的方法如下图所示： 

对于以上方法，我也稍微做一下解释：

• open(请求方式, 请求路径, 是否异步)：异步去向服务器发送请求。
• send(请求参数)：发送请求到http服务器并接收回应。
• setRequestHeader(头信息, 头的值)：单独指定请求的某个http头，可用来处理POST请求方式的中文乱码问题。

如何创建XMLHttpRequest对象呢？

 对于IE浏览器来说，它将XMLHttpRequest对象封装在一个ActiveXObject组件中；而对于Firefox、Opera 8.0+、Safari等浏览器来说，直接就可以创建XMLHttpRequest对象。 
这儿直接给出创建XMLHttpRequest对象的代码，如下所示：

function createXMLHttp(){
    var xmlHttp;
    try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
        try{ // Internet Explorer
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // 低级版本的IE
        } catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // 较高级版本的IE
            } catch (e) {

            }
        }
    }
    return xmlHttp;
}

AJAX编写的步骤

1. 获得XmlHttpRequest对象
2. 设置XmlHttpRequest对象状态改变时来触发一个函数
3. 设置向后台提交的请求路径和请求方式
4. 发送请求

get方式提交和post方式提交

注意：以POST方式提交请求的时候，千万不要忘记设置一个请求头。