Java教程

AJAX 请求

本文主要是介绍AJAX 请求，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、什么是AJAX请求

  • AJAX 即”Asynchronous Javascript And XML“（异步JavaScript和XML）

  • 是指一种创建交互式网页应用的网页开发技术。

  • Ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。

  • ajax请求的局部更新，浏览器地址栏不会发生改变

  • 局部更新不会舍弃原来页面的内容。

2、原生AJAX请求示例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="no-cache" http-equiv="cache-control"/>
    <meta content="0" http-equiv="Expires"/>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Insert title here</title>
    <script type="text/javascript">
        // 在这里使用JavaScript语言发起Ajax请求，访问服务器AjaxServlet中javascriptAjax
        function ajaxRequest() {
            //1、我们首先要创建XMLHttpRequest
            var xmlHttpRequest = new XMLHttpRequest();
            //2、调用open方法设置请求参数
            /*
            * 第一个参数method：请求的类型，GET或POST
            * 第二个参数url：请求地址
            * 第三个参数async：true（异步）或false（同步）
            * */
            xmlHttpRequest.open("GET", "http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet?action=javascriptAjax", true)
            //4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            xmlHttpRequest.onreadystatechange = function () {
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                    // 把响应的数据显示到页面上
                    document.getElementById("div01").innerHTML = "JavaScript 编号= " + jsonObj.id + "，姓名= " + jsonObj.name;
                }
            }

            //3、调用send方法发送请求
            xmlHttpRequest.send();
        }
    </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

3、JQuery中的AJAX请求

1）$.ajax方法

  • url 表示请求的地址
  • type 表示请求的类型GET或POST请求
  • data 表示发送给服务器的数据 ； 两种格式：
    1. name=value&name=value
    2. {key:value}
  • success 请求成功，响应的回调函数
  • dataType 响应的数据类型；常用数据类型有：
    1. text 表示纯文本
    2. xml 表示xml数据
    3. json 表示json对象

2）$.get方法和$.post方法

$.get(url,data,collback,type);

$.psot(url,data,collback,type);

  • url 请求的url地址
  • data 发送给服务器的数据
  • callback 成功的回调函数
  • type 返回的数据类型

3）$.getJSON方法

  • url 请求的url地址
  • data 发送给服务器的数据
  • callback 成功的回调函数

4）表单序列化 serialize()方法

  • serialize()可以把表单中所有的表单项的内容都获取到，并以name=value&name=value的形式拼接。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="no-cache" http-equiv="cache-control"/>
    <meta content="0" http-equiv="Expires"/>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Insert title here</title>
    <script src="script/jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // ajax请求
            $("#ajaxBtn").click(function () {
                $.ajax({
                    url: "http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
                    data: "action=jQueryAjax",
                    type: "GET",
                    success: function (data) {
                        // data是服务器返回的数据
                        $("#msg").html("jQueryAjax 编号：" + data.id + "，姓名：" + data.name);
                    },
                    dataType: "json"
                });
            });

            // ajax--get请求
            $("#getBtn").click(function () {
                $.get("http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
                    "action=jQueryGet",
                    function (data) {
                        $("#msg").html("jQueryGet 编号：" + data.id + "，姓名：" + data.name);
                    }, "json");
            });

            // ajax--post请求
            $("#postBtn").click(function () {
                $.get("http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
                    "action=jQueryPost",
                    function (data) {
                        $("#msg").html("jQueryPost 编号：" + data.id + "，姓名：" + data.name);
                    }, "json");
            });

            // ajax--getJson请求
            $("#getJSONBtn").click(function () {
                $.getJSON("http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
                    "action=jQueryGetJSON", function (data) {
                        $("#msg").html("getJSON 编号：" + data.id + "，姓名：" + data.name);
                    });
            });

            // ajax请求
            $("#submit").click(function () {
                // 把参数序列化
                $.getJSON("http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
                    "action=jQuerySerialize&" + $("#form01").serialize(),
                    function (data) {
                        $("#msg").html("jQuerySerialize 编号：" + data.id + "，姓名：" + data.name);
                    });
            });

        });
    </script>
</head>
<body>
<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg"></div>
<br/><br/>
<form id="form01">
    用户名：<input name="username" type="text"/><br/>
    密码：<input name="password" type="password"/><br/>
    下拉单选：<select name="single">
    <option value="Single">Single</option>
    <option value="Single2">Single2</option>
</select><br/>
    下拉多选：
    <select multiple="multiple" name="multiple">
        <option selected="selected" value="Multiple">Multiple</option>
        <option value="Multiple2">Multiple2</option>
        <option selected="selected" value="Multiple3">Multiple3</option>
    </select><br/>
    复选：
    <input name="check" type="checkbox" value="check1"/> check1
    <input checked="checked" name="check" type="checkbox" value="check2"/> check2<br/>
    单选：
    <input checked="checked" name="radio" type="radio" value="radio1"/> radio1
    <inpu
          t name="radio" type="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>

​

这篇关于AJAX 请求的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航