19、Ajax

一、Ajax

Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

与服务器异步交互，浏览器页面局部刷新

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

基于标准的表示技术，使用XHTML和CSS；

动态显示和交互技术，使用Document Object Model；

数据交换和操作技术，使用XML和XSLT；

异步数据获取技术，使用XMLHttpRequest；

而JavaScript将以上都结合在一起，Ajax = DHTML+XHR

 

 应用：

1、数据校验    登录

2、按需取数据    树形结构级联显示，目录树

3、页面部分刷新  回帖

4、搜索框提示下拉列表

 

优点：

1、更新数据无需刷新

2、异步通信

3、减轻服务器负担

 

缺点：

1、对搜索引擎支持较弱

2、安全性问题

3、移动端不友好

4、浏览器兼容性问题 js

 

1、Ajax 只刷新局部页面的技术

（1）JavaScript：更新局部的网页

（2）XML：一般用于请求数据和响应数据的封装

（3）XMLHttpRequest对象：发送请求到服务器并获得返回结果

（4）CSS：美化页面样式

（5）异步：发送请求后不等返回结果，由回调函数处理结果

 

2、XMLHttpRequest

JavaScript 中XMLHttpRequest 对象是整个 Ajax技术的核心，用于和服务器交换数据，它提供了异步发送请求的能力

 

（1）构造方法

不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

window.onload = function()
{

    var xmlhttp;
    if (window.XMLHttpRequest) {  // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {  // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    alert(xmlhttp);
}

 

（2）属性

  readyState：类型short，只读

  responseText：类型String，只读，响应文本  

  responseXML：类型Document，只读

  status：类型short；只读，服务器返回的状态

 

（3）事件处理器

  onreadystatechange 回调

 

二、常用方法

1、建立服务器连接

open(method,URL,async)  // 建立与服务器的连接

method：指定请求的HTTP方法，典型的值是GET或POST

URL：指请求的地址，文件在服务器上的位置

async：指定是否使用异步请求，其值为 true或false，默认true

 

GET/POST：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用

在以下情况中，请使用 POST 请求：

1.无法使用缓存文件（更新服务器上的文件或数据库）

2.向服务器发送大量数据（POST 没有数据量限制）

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

 

2、发送请求到服务器

send(string)  // 发送请求

string:仅用于POST请求

 

3、设置请求消息头

setRequestHeader(header,value)  // 设置请求的头信息

三、常用属性

1、onreadystatechange ：指定回调函数

 

2、ready State: XMLHttpRequest 的状态信息

3、status ： HTTP的状态码

 

4、responseText ：获得响应的文本内容

5、responseXML ：获得响应的 XML 文档对象 documednt

 

注：就绪状态是4而且状态码是200，才可以处理服务器数据

 

<script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script> 

<script type="text/javascript">
    window.onload = function() {
        // 1、获取request对象
        var request = getXMLHttpRequest();
        // 4、处理响应结果(根据状态改变)
        request.onreadystatechange = function(){
            // alert(request.readyState);
            if(request.readyState == 4){
                // alert(request.status);  // 查看服务器端响应状态
                if(request.status==200) {
                    alert(request.responseText);
                }
            }
        };
        
        // 2、建立连接
        request.open("get", "${pageContext.request.contextPath}/servlet/demo1");
        // 3、发送请求
        request.send(null);
        
        // alert(request);
    };
</script>

 

使用Ajax验证用户名是否存在实现步骤：

1、使用文本框的onBlur事件

2、使用Ajax技术实现异步交互

（1）创建XMLHttpRequest对象

（2）通过 XMLHttpRequest对象设置请求信息

（3）向服务器发送请求

（4）创建回调函数，根据响应状态动态更新页面

用户名：<input type="text" name="userName" onblur="checkName()" id="userName" /><span id="msg"></span><br>  // span在用户名输入框后提示类容
密码：<input type="password" name="pwd" />

<script type="text/javascript" src="${pageContext.request.contextPath }/js/myJS.js"></script>

<script type="text/javascript">
    function checkName() {
        var name = document.getElementById("userName");
       // 创建XMLHttpRequest对象
        var xhr = getXMLHttpRequest();
        
        xhr.onreadystatechange = function() {  // onreadystatechange是回调函数
            if(xhr.readyState==4) { // 请求一切正常
                if(xhr.status==200) {  // 服务器响应一切正常
                //    alert(xhr.responseText);  // 得到响应结果
                    var msg = document.getElementById("msg");  // 回显到浏览器
                    if (xhr.responseText=="true") {
                        msg.innerHTML = "<font color='red'>该用户名已存在</font>";
                    } else {
                        msg.innerHTML = "该用户名可用";
                    }
                }
            }
        }
        // 创建连接
        xhr.open("get", "${pageContext.request.contextPath }/cknameServlet?name="+name.value);
        // 发送请求
        xhr.send(null);
    }
</script>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PrintWriter out = response.getWriter();  // response输出到浏览器
    String name = request.getParameter("name");
    if ("tom".equals(name)) {
        out.print(true);  // true是字符串形式
    } else {
        out.print(false);
    }
}

 改进：把<input>标签中的onblur事件提取到js代码中

window.onload=function(){  // 加载就执行
    var nameElement = document.getElementsByName("userName")[0];  // userName数组的第一个元素
    nameElement.onblur = function(){  // 替代<input>中的onblur事件
        var name = this.value;  // this等价于nameElement
    // 创建XMLHttpRequest对象
    var xhr = getXMLHttpRequest();
    // 处理结果
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){  // 请求一切正常
            if(xhr.status==200){  // 服务器响应一切正常
                //alert(xhr.responseText);  // 得到响应结果
                var msg = document.getElementById("msg");
                if(xhr.responseText=="true"){
                    msg.innerHTML =  "<font color='red'>用户名已存在</font>";
                    //msg.innerText = "<font color='red'>用户名已存在</font>";
                }else{
                    msg.innerHTML = "可以使用";
                }
            }
        }
}