JavaWeb学习笔记-16 Ajax

Posted 2021-07-14 Moon&&Dragon

Ajax

文章目录

• • Ajax
  • • 1、什么是Ajax
    • 2、它能解决的问题
    • 3、XMLHTTPRequest对象
    • 4、实现Ajax
    • • 4.1、获得xhr对象
      • 4.2、get方法发送
      • 4.3、post方法发送

1、什么是Ajax

Ajax即Asynchronous Javascript And XML（异步javascript和XML)，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而 不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

2、它能解决的问题

• b/s建构：请求-响应 ：在处理注册页面 需要页面局部刷新。以前的话注册需要刷新整个页面，把请求发送给服务器，然后通过response去告知结果。而ajax可以 解决传统web的请求方法的弊端。
• 同步(synchorized)：为了安全，但是效率慢，用户体验不好。
• 异步：高效的，不需要全部提交，就可以局部刷新。

3、XMLHTTPRequest对象

• ajax的本质就是 使用浏览器的一个内置对象 XMLHttprequesr向服务器发起请求，服务器会返回一个xml数据，文本或者json给浏览器，然后在浏览器，局部刷新渲染数据到页面，整个页面不需要完全刷新。

• XMLHTTP是一组API函数集，可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用，通过HTTP在浏览器和web服务器之间收发XML或其它数据。

4、实现Ajax

4.1、获得xhr对象

function getXHR() {
    let xhr = null;
    // 根据不同的浏览器，去构建不同的对象
    if ((typeof(XMLHttpRequest))!='undefined'){
        // 非IE浏览器
        xhr=new XMLHttpRequest();
    } else {
        // IE
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

4.2、get方法发送

checkName = function (username) {
    // 1、获得内置对象
    let xhr = getXHR();
    // 2、请求有两种：get和post，俩种写法不一样
    // get ---> xhr.open('get','请求的地址','是否使用异步（asyn）的方式')
    xhr.open('get', 'checkUsername?username=' + username, true);

    // 3、监听器--ajax建立关联
    /*  注册一个监听器(当事件发生以后，告诉xhr，xhr通过(请求的)状态码，得到监听的事件
    使用xhr的onreadystate，让一个函数来处理这个事件，并且函数里面会返回请求的数据，
    更新页面)*/
    xhr.onreadystatechange = function () {
        // 判断状态码
        //      0 xhr对象还未初始化完毕
        //      1 xhr对象开始发送请求
        //      2 xhr对象请求发送完毕
        //      3 xhr对象开始读取响应数据
        //      4 xhr对象读取响应对象结束
        // Http状态吗
        //      200 服务器正确的响应了请求
        //      302 重定向返回302的状态码
        //      404 资源路径不可达
        //      405 请求方法错误
        //      500 服务器错误--->一般是代码有问题
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 获取服务器返回的数据：以前是传递整个网页，现在得到一个xml或者文本数据
            let txt = xhr.responseText;
            // let xml = xhr.responseXML;
            // 渲染页面
            let mySpan = document.getElementById('s1');
            mySpan.innerText = txt;
        }

    }

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

4.3、post方法发送

checkName2 = function (username){
    // 1、获得内置对象
    let xhr = getXHR();
    // 2、定义请求规则
    xhr.open('post','checkUsername',true);
    // 3、绑定请求监听器
    // 设置请求头
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.onreadystatechange = function (){
        if (xhr.readyState ===4 &&xhr.status===200){
            let txt = xhr.responseText;
            // 渲染页面
            let mySpan = document.getElementById('s1');
            mySpan.innerText = txt;
            mySpan.style.color = 'green'
        }
    }
    // 4、发送请求
    xhr.send('username='+username);
}