Ajax

2021-06-17 08:05

阅读：289

标签：erro 用户名 throw 求和 value 异步请求密码 tip javascrip

什么是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 heretitle>
        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 requestbutton>
        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>AjaxServletservlet-name>
    servlet-class>com.soyoungboy.servlet.AjaxServletservlet-class>
  servlet>
  servlet-mapping>
    servlet-name>AjaxServletservlet-name>
    url-pattern>/ajaxServleturl-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 heretitle>
        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">Singleoption>
                  option value="Single2">Single2option>
            select>br/>
              下拉多选：
              select name="multiple" multiple="multiple">
                option selected="selected" value="Multiple">Multipleoption>
                option value="Multiple2">Multiple2option>
                option selected="selected" value="Multiple3">Multiple3option>
              select>br/>
              复选：
             input type="checkbox" name="check" value="check1"/> check1
             input type="checkbox" name="check" value="check2" checked="checked"/> check2br/>
             单选：
             input type="radio" name="radio" value="radio1" checked="checked"/> radio1
             input type="radio" name="radio" value="radio2"/> radio2br/>
             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

标签：erro 用户名 throw 求和 value 异步请求密码 tip javascrip

原文地址：http://www.cnblogs.com/androidsuperman/p/7266400.html

上一篇：Web前端探索之滚轮事件（wheelEvent）

下一篇：(原创)linux下Microsoft/cpprestsdk支持https(server)

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Ajax
文章链接：http://soscw.com/essay/94956.html

亲，登录后才可以留言！

Ajax

什么是Ajax？

javaScript原生Ajax请求

JQuery的Ajax请求

评论

热门文章

推荐文章

最新文章

置顶文章