AJAX基础及实现（原生Js&JQuery）

AJAX基础

AJAX:
- Asynchronous JavaScript and Xml
- 是一种交互性更好的web应用程序的技术
AJAX特点:
- 不改变页面，局部刷新
- 异步发送请求，从服务器获取数据:
  - 异步: 数据响应时间内不确定
- 使用JS动态修改DOM
应用:
- 注册用户名有效验证
- 自动补全（搜索引擎中的的输入补全）
- 网络电视中的广告
- CRUD

AJAX使用Http 请求

步骤
- 创建XMLHttpRequest对象 初始化
- 向服务器发送请求
- 响应函数
- 响应事件
- 获得返回数据处理后更新DOM
XMLHttpRequest对象:
- onreadystatechange=function() {}: 设置处理服务器响应的函数，当readyState属性变化时会调用此函数
- readyState属性:
  - 0: 请求未初始化（调用open前）
  - 1: 请求已退出（调用send前）
  - 2: 请求已发送
  - 3: 请求处理中（服务器还未完成响应）
  - 4: 请求已经完成（可以访问服务器响应并使用）
- responseText属性:
  - 用于获取服务器返回的数据/文本

使用AJAX读取JSON文本示例:（原生JS）

js文件:

var jsonHttp; // json数据格式

function loadJSONDoc(url) { // onclick事件调用函数，传入参数为访问路径
    jsonHttp = null;

    if(window.XMLHttpRequest) { // 检测浏览器兼容
        jsonHttp = new XMLHttpRequest(); // 创建XMLHttpRequest对象
    } else if(window.ActiveXObject) { // 兼容IE
        jsonHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if(jsonHttp != null) { // 判断XHR对象创建是否成功
        jsonHttp.onreadystatechange = stateChange; // 设置处理服务器响应的函数

        jsonHttp.open('GET', url, true);
        //三个参数意义:
        //get/post方法
        //url地址
        //是否使用异步，true为使用异步

        jsonHttp.send();
        // 发送请求。如果该请求是异步模式(默认),该方法会立刻返回。相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回
    }
}

// 响应函数
function stateChange() {
    if(jsonHttp.readyState == 4) { // 请求状态为4: 请求完成
        if(jsonHttp.status == 200) { // 请求响应码为200: 响应成功
            var theDiv = document.getElementById("theD");

            theDiv.innerHTML = jsonToHtml(jsonHttp.responseText);
            // 将服务器返回的数据/文本传入jsonToHtml函数进行处理，并且修改DOM
        }
    }
}

// 服务器返回数据处理函数
function jsonToHtml(jsonString) { // json格式数据，为String
    var strTmp = '<table>';
    var json = JSON.parse(jsonString); // 将String转化为JSON对象
    var lines = json['LINE']; // 获取LINE健中的值，值为数组
    for(var i = 0; i < lines.length; i++) {
        var columns = lines[i]['COLUMN']; // 获取lines数组中COLUMN健的值，值为数组
        strTmp += '\n\t<tr>';
        strTmp += '\n\t\t<th>' + columns[0]['TEXT'] + '</th>'; // 获取columns数组中TEXT健的值，值为文本
        strTmp += '\n\t\t<th>' + columns[1]['TEXT'] + '</th>';
        strTmp += '\n\t</tr>';
    }
    strTmp += '\n</table>';

    return strTmp;
}

json文件:

{
    "LINE": [
        {"COLUMN": [
            {"TEXT": 1.1},
            {"TEXT": 1.2}]},
        {"COLUMN": [
            {"TEXT": 2.1},
            {"TEXT": 2.2}]},
        {"COLUMN": [
            {"TEXT": 3.1},
            {"TEXT": 3.2}]},
        {"COLUMN": [
            {"TEXT": 4.1},
            {"TEXT": 4.2}]}
    ]
}

html文件:

<html>
    <head>
        <title>title</title>
        <style type = "text/css">
            table {
                width: 200px;
                height: 200px;
                border-collapse: collapse;
            }

            table th {
                border: 2px solid #888;  
            }

            body {
                text-align: center;
            }

            th {
                font-family: 'helvetica';
                color: #666;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <!--AJAX格式-->
        <!--<table>
            <tr>
                <th>1-1</th>
                <th>1-2</th>
            </tr>
            <tr>
                <th>2-1</th>
                <th>2-2</th>
            </tr>
            <tr>
                <th>3-1</th>
                <th>3-2</th>
            </tr>
            <tr>
                <th>4-1</th>
                <th>4-2</th>
            </tr>

        </table>-->
        <div id = "theD"></div>
        <button onclick="loadJSONDoc('s49.json')">get data</button>
        <script type = "text/javascript" src = "s49-json-r.js"></script>
    </body>
</html>

JQuery实现AJAX

json 和 html文件和上个示例一致(html文件需要引入JQuery库)
JQuery的AJAX请求方式共有6种: API
使用JQuery.ajax(url, [settings])实现:
- url: 请求的url
- settings: AJAX请求设置，均为可选设置
  - type: 请求的方法（get/post）
  - async: 是否使用异步
  - dataType: 预期服务器返回的数据类型
  - success: 请求成功后的回调函数
  - 实现代码

// AJAX in JQuery
$(document).ready(function() { // 设置页面加载完毕后调用的函数
    $('#theB').click(function() { // 改变button的click事件
       // 配置请求
        htmlobj = $.ajax({
            type: 'get', // 请求方法
            url: 's51jquery.json', // url地址
            async: true, // 异步
            dataType: 'json', // 预期返回的数据格式
            success: function(data) { // data为服务器返回的参数
                $('#theD').append(jsonToHtml(data)); // 将data转化为html
            }
        });
    });
});

function jsonToHtml(json) {
    var table = $('<table/>'); // 创建table标签
    $(json['LINE']).each(function() { // 遍历LINE健中的值，COLUMN键值对
        var tr = $('<tr/>').appendTo(table); // 在table标签中，添加tr标签
        $(this['COLUMN']).each(function() { // 遍历COLUMNN健中的值
            var th = $('<th/>').html(this['TEXT']).appendTo(tr);
            // 取得TEXT健中的值，放入th标签
        });
    });
    return table;
}

使用jQuery.post(url, [data], [callback], type)实现:
- url: 请求的url地址
- [data]: 待发送的key/value数据
- [callback]: 发送成功后的回调函数
- type: 返回数据的格式
- 示例代码: 用于检测注册用户名有效性

$(function() {
    $('input[name=username]').blur(function() {
        $.post('reg', {username: $('input[name=username]').val()}, function(data) {
            if(data == 'true') {
                $('input[name=username]').css('border', '1px solid red');
                $('#msg').html("username already exists").css('color', 'red');
            } else {
                $('input[name=username]').css('border', '1px solid green');
                $('#msg').html("username is valid").css('color', 'green');
            }
        });
    });
});

使用错误示例:
- 同步的业务数据不能通过异步来获得
- 错误代码:

$(function() {
    $('#btn').click(function() {
        var responseData = null;
        $.post("ajax1", function(data) {
            alert(data);
            responseData = data;
        });
        $('#hcontent').html(responseData);
        // 同步业务请求异步数据，数据不能显示到hcontent的内容中
        // 发送post异步请求后，不会等待异步请求中的代码执行完毕
        // 而异步请求后的代码会被立即执行
    });
});

其他AJAX案例

AJAX读取list数据:
- 在服务器端，将数据对象转化为JSON数据格式
- 收到AJAX请求后，将转化后的JSON数据返回给请求对象
- AJAX请求成功并且收到返回数据后，解析JSON数据
- 将处理过后的数据写入DOM

<script type="text/javascript">
    $(function() {
        $('#btn').click(function() {
            $.post('list', function(data) {
                //方法1 var da = eval("(" + data + ")");
                //方法2 data设置为json格式数据，不需要转换
                var da = data;
                var html = "";
                for(var i = 0; i < da.length; i++) {
                    html += "<tr><td>" + da[i].id + "</td><td>" + 
                            da[i].name + "</td><td>" + 
                            da[i].price + "</td><td>" + 
                            da[i].author + "</td></tr>";
                }
                console.log(html);
                $('#mytable').html(html);
            }, 'json');
        });
    });
</script>

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    List<Book> list = new ArrayList<Book> ();
    list.add(new Book(1, "abc1汉字", 121, "xyz1"));
    list.add(new Book(1, "abc2", 122, "xyz2"));
    list.add(new Book(1, "abc3", 123, "xyz3"));

    resp.setCharacterEncoding("utf-8");

    //方法1:拼凑json格式的字符串，在js中，通过eval()将字符串转化为json格式的数据
//      String html = "[";
//      for(int i = 0; i < list.size(); i++) {
//          if(i > 0) {
//              html += ",";
//          }
//          html += "{id:'"+ list.get(i).getId()
//                  + "', name:'"+ list.get(i).getName() 
//                  + "', price:'"+ list.get(i).getPrice() 
//                  + "', author:'" + list.get(i).getAuthor() +"'}";
//      }
//      html += "]";

    //方法2:使用json转换工具
    //使用gson类库
    resp.getWriter().print(new Gson().toJson(list));
}

gson jar包

AJAX基础及实现（原生Js&JQuery）

AJAX基础

AJAX使用Http 请求

使用AJAX读取JSON文本示例:（原生JS）

JQuery实现AJAX

其他AJAX案例

猜你喜欢