Ajax(一)

1. AJAX介绍

　　AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

　　AJAX 是一种用于创建快速动态网页的技术。

　　通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

　　AJAX作用:

　　AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

　　使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。

　　AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

　　AJAX 可使因特网应用程序更小、更快，更友好。

2. 如何使用AJAX

　　2.1 创建一个XMLHTTPRequest对象

function getXMLHttpRequest() {
　　var xmlhttp;
　　if (window.XMLHttpRequest) {// code for all new browsers
   　　xmlhttp = new XMLHttpRequest();
   } else if (window.ActiveXObject) {// code for IE5 and IE6
   　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
      return xmlhttp;
}

　　2.2 设置回调函数

　　目的是服务器响应完成后，浏览器可以知道，并完成后续操作：

xmlHttp.onreadystatechange=function(){};

　　open操作

　　设置访问资源方式和请求路径：

xmlHttp.open(“GET”,”/day/ajax”);

　　send操作

　　发送请求：

xmlhttp.send(null);

3. XMLHTTPRequest API详解

　　Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。XMLHttpRequest 对象提供了对 HTTP 协议的完全访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

　　3.1 onreadystatechange属性

　　　　当XMLHttpRequest对象的状态改变时会调用的一个函数。

　　3.2 readyState属性

　　　　对于XMLHttpRequest对象，它有一个属性readyState,它有五个状态：

　　　　0——创建XMLHttpRequest对象

　　　　1——当open时

　　　　2——当send时

　　　　3——响应头已经返回，但响应正文没有完成，也就是响应没有完全完成.

　　　　4——响应完成了

　　　　一般情况下,在回调的函数中，我们都是判断

　　　　if(xmlhttp.readyState==4&&xmlhttp.status==200)

　　　　来接收服务器端响应的信息。

　　3.3 statues属性

　　　　由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

　　3.4 responseText属性

　　　　目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

　　　　如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应

　　体。

　　　　如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

　　3.5 responseXML属性　　　　

　　　　对请求的响应，解析为 XML 并作为 Document 对象返回。

　　3.6 open方法

　　　　初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

　　　　xmlhttp.open(请求方式,url);

　　　　请求方式: POST  GET

　　　　路径:客户端路径 格式 /工程名/资源路径

　　　　如果是GET方式，想要向服务器发送请求，并且携带请求参数，可以直接在url后面连接。

　　　　如果是POST方式，想要向服务器发送请求，并且携带请求参数,我们需要在send时传递参数

　　3.7 send方法

　　　　发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

　　　　如果请求方式是post,并且要携带参数，可以通过send的参数来传递

　　3.6 setRequestHeader方法

　　　　向一个打开但未发送的请求设置或添加一个 HTTP 请求。

　　　　如果请求方式是POST,并且要携带参数，需要设置一个请求头.

　　　　setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

　　3.7 解决中文乱码问题　　

xmlhttp.open("get","{pageContext.request.contextPath}/ajax?username="+encodeURI(document.getElementById("username").value));

4. 两个简单的案例

　　

创建XMLHttpRequest
function createXMLHttpRequest() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {// Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }
    }

    return xmlHttp;
}

//get请求
function loadData() {
    // 1.创建异步XMLHttpRequest对象
    var xhr = createXMLHttpRequest();
    // 2.设置状态改变触发一个函数
    xhr.onreadystatechange = function(){
        // 回调函数.
        if(xhr.readyState == 4){// 请求发送完成
            if(xhr.status == 200){// 响应也正确
                var data = xhr.responseText;
                document.getElementById("d1").innerHTML=data;
            }
        }
    }
    // 3.打开一个连接：
    xhr.open("GET","/WEB15/ServletDemo1",true);

    // 4.发送请求
    xhr.send(null);
}

//post请求
function loadData(){
    // 1.创建异步对象
    var xhr = createXMLHttpRequest();
    // 2.设置状态改变触发的函数
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                document.getElementById("d1").innerHTML=xhr.responseText;
            }
        }
    }
    // 3.打开连接
    xhr.open("POST","/WEB15/ServletDemo2",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 4.发送数据
    xhr.send("name=李四&password=456");
}

　　用户姓名校验案例：

function checkUsername(){
    // 获得文本框的值:
    var username = document.getElementById("username").value;
    // 创建对象:
    var xhr = createXMLHttpRequest();
    // 2.状态改变触发一个函数
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                // 获得到响应内容:
                var data = xhr.responseText;
                if(data == 1){
                    // 可以使用
                    document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
                    document.getElementById("regBut").disabled=false;
                }else if(data == 2){
                    // 已经存在
                    document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被使用</font>";
                    document.getElementById("regBut").disabled=true;
                }
            }
        }
    }
    // 3.打开连接
    xhr.open("GET","/WEB15/ServletDemo3?username="+username,true);
    // 4.发送数据
    xhr.send(null);
}