Ajax

Posted 西北野狼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax相关的知识,希望对你有一定的参考价值。

什么是Ajax?

AJAX即“Asynchronous Javascript And XML”(异步javascript和XML),是指一种创建交互式网页应用的网页开发技术。

ajax是一种浏览器异步发起请求。局部更新页面的技术。

javaScript原生Ajax请求

原生的Ajax请求,

1、我们首先要创建XMLHttpRequest 对象

2、调用open方法设置请求参数

3、调用send方法发送请求

4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function ajaxRequest() {
//                 1、我们首先要创建XMLHttpRequest 
                var xhr = new XMLHttpRequest();
//                 2、调用open方法设置请求参数
                xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);
//                 4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
                xhr.onreadystatechange = function() {
                    // 判断请求完成,并且成功
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        document.getElementById("div01").innerHTML = xhr.responseText;
                    } 
                }
//                 3、调用send方法发送请求
                xhr.send();
            }
        </script>
    </head>
    <body>    
        <button onclick="ajaxRequest()">ajax request</button>
        <div id="div01">
        </div>
    </body>
</html>

对应接收数据的Servlet和对应的方法:

public class AjaxServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("ajax请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数,可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }

}

web.xml中的配置:

  <servlet>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>com.soyoungboy.servlet.AjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/ajaxServlet</url-pattern>
  </servlet-mapping>

结果:

JQuery的Ajax请求

四个Ajax请求方法

$.ajax方法

$.get方法

$.post方法

$.getJSON方法

 

一个表单序列化方法:serialize()表单序列化方法

 

如何使用上面的五个方法:

在JQuery中和Ajax请求有关的方法有四个

$.ajax请求参数

url                                 请求的地址

type :                         请求的方式             get或post

data :                        请求的参数             string或json

success:                    成功的回调函数

dataType:                 返回的数据类型      常用json或text

 

下面的方法必须遵守参数的顺序

$.get请求和$.post请求

url:请求的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式,xml, html, script, json, text。

 

Jquery$.getJSON

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

 

表单的序列化

serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接,省去我们很多不必要的工作。

 

由于$.get、$.post和getJSON这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所以我们以$.ajax()方法的使用为示例进行展示:

举例说明:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function(){
                // ajax请求
                $("#ajaxBtn").click(function(){
                    $.ajax({
                        url : "ajaxServlet", // 请求地址
                        error:function(){   // 请求失败回调
                            alert("请求失败");
                        },
                        success:function(data){ // 请求成功回调
                            alert( data );
                        },
                        type:"POST",                // 请求的方式
                        dataType:"json",            // 返回的数据类型为json对象
                        data:{                        // 请求的参数
                            action:"jqueryAjax",
                            a:12,
                            date: new Date()
                        }
                    });
                });

                // ajax--get请求
                $("#getBtn").click(function(){
                    $.get(
                        "ajaxServlet",{
                            action:"jqueryGet",
                            a:12,
                            date:new Date()
                        },function(data){alert(data);},"json"
                    );
                });
                
                // ajax--post请求
                $("#postBtn").click(function(){
                    // post请求
                    $.post(
                        "ajaxServlet", // 请求路径
                        {                // 请求参数
                            action:"jqueryPost",
                            a:12,
                            date:new Date()
                        },
                        function(data){ alert( data ) },  // 成功的回调函数
                        "text"                            // 返回的数据类型
                    );
                });

                // ajax--getJson请求
                $("#getJsonBtn").click(function(){
                    // 调用
                    $.getJSON(
                        "ajaxServlet",         // 请求路径
                        {                    // 请求参数
                            action:"jqueryGetJSON",
                            a:12,
                            date:new Date()
                        }, 
                        function(data){ alert( data ) }  // 成功的回调函数        
                    );
                });

                // ajax请求
                $("#submit").click(function(){
                    // 把参数序列化
                    var data = $("#form01").serialize();
                    alert(data);
                });
                
            });
        </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>
        <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 name="multiple" multiple="multiple">
                <option selected="selected" value="Multiple">Multiple</option>
                <option value="Multiple2">Multiple2</option>
                <option selected="selected" value="Multiple3">Multiple3</option>
              </select><br/>
              复选:
             <input type="checkbox" name="check" value="check1"/> check1
             <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
             单选:
             <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
             <input type="radio" name="radio" value="radio2"/> radio2<br/>
             <input id="submit" type="submit" />
        </form>            
    </body>
</html>

对应的servlet代码:

public class AjaxServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("ajax请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数,可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
    
    protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryAjax请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数,可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
    
    protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryGet请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数,可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
    
    protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryPost请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数,可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
    
    protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryGetJSON请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数,可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }

}

 

以上是关于Ajax的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段