Ajax

最新推荐文章于 2023-12-12 20:32:43 发布
最新推荐文章于 2023-12-12 20:32:43 发布
阅读量250 收藏
点赞数
分类专栏： javaee 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangtea/article/details/78725575
版权

1.1、什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待，卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

1.2、Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

2、js原生的Ajax技术

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function fn1(){
        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
        var xmlHttp = new XMLHttpRequest();
        //2、绑定监听 ---- 监听服务器是否已经返回相应数据
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //5、接受相应数据
                var res = xmlHttp.responseText;
                document.getElementById("span1").innerHTML = res;
            }
        }
        //3、绑定地址
        xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
        //4、发送请求
        xmlHttp.send();
    }
    function fn2(){
        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
        var xmlHttp = new XMLHttpRequest();
        //2、绑定监听 ---- 监听服务器是否已经返回相应数据
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //5、接受相应数据
                var res = xmlHttp.responseText;
                document.getElementById("span2").innerHTML = res;
            }
        }
        //3、绑定地址
        xmlHttp.open("POST","/WEB22/ajaxServlet",false);
        //4、发送请求
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send("name=wangwu");
    }
</script>
</head>
<body>
    <input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
    <br>
    <input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
    <br>
    <input type="button" value="测试按钮" onclick="alert()">
</body>
</html>

注意：如果是post提交
在发送请求之前设置一个头

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

所用异步访问都是ajax引擎

3、Json数据格式

json是一种与语言无关的数据交换的格式，
作用：
使用ajax进行前后台数据交换
移动端与服务端的数据交换

3.1、Json的格式与解析

json有两种格式：
对象格式：{“key1”:obj,”key2”:obj,”key3”:obj…}
数组/集合格式：[obj,obj,obj…]

例如：

user对象用json数据格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List<Product> 用json数据格式表示
[{"pid":"10","pname":"小米4C"},{},{}]

注意：对象格式和数组格式可以互相嵌套
注意：json的key是字符串 jaon的value是Object

json的解析：
json是js的原生内容，也就意味着js可以直接取出json对象中的数据

3.2、Json的转换插件

将java的对象或集合转成json形式字符串

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种：jsonlib、Gson：google、fastjson：阿里巴巴

<script language="JavaScript">
    /**
     * 案例一
     *  {key:value,key:value} 
     * class Person{
     *    String firstname = "张";
     *    String lastname = "三丰";
     *    Integer age = 100;
     * }
     * Person p = new Person();
     * System.out.println(p.firstname);
     */
    var person = {"firstname":"张","lastname":"三丰","age":100};
     //取出lastname
     alert(person.lastname);
     //取出age
     alert(person.age);
  </script>
 <script language="JavaScript">
    /**
     * 案例二
     *  [{key:value,key:value},{key:value,key:value}] 
     */
     var persons = [
                        {"firstname":"张","lastname":"三丰","age":100},
                        {"firstname":"李","lastname":"四","age":25}
                    ];
    //取出 firstname=李
    alert(persons[1].firstname);
    //取100
    alert(persons[0].age);
  </script>
  <script language="JavaScript">
   /**
     * 案例三
     * {
     *   "param":[{key:value,key:value},{key:value,key:value}]
     * }
     */
     var json = {
                    "baobao":[
                                {"name":"小双","age":28,"addr":"扬州"},
                                {"name":"建宁","age":18,"addr":"紫禁城"},
                                {"name":"阿珂","age":10,"addr":"山西"},
                              ]
                };

     //娶name = 建宁
     alert(json.baobao[1].name);
     //取addr 山西
     alert(json.baobao[2].addr);
  </script>
  <script language="JavaScript">
   /**
     * 案例四
     * {
     *   "param1":[{key:value,key:value},{key:value,key:value}],
     *   "param2":[{key:value,key:value},{key:value,key:value}],
     *   "param3":[{key:value,key:value},{key:value,key:value}]
     * }
     */
     var json = {
                    "baobao":[
                                {"name":"小双","age":28,"addr":"扬州"},
                                {"name":"建宁","age":18,"addr":"紫禁城"},
                                {"name":"阿珂","age":10,"addr":"山西"},
                            ],
                     "haohao":[
                                {"name":"爽","age":25,"addr":"吉林"},
                                {"name":"洁","age":23,"addr":"赤峰"}
                              ]
                }; 
    alert(json.haohao[1].name);
  </script>
  <script language="JavaScript">
    /**
     * 案例五
     * {
     *   "param1":"value1",
     *   "param2":{},
     *   "param3":[{key:value,key:value},{key:value,key:value}]
     * }
     */
     var json = {
            "key1":"value1",
            "key2":{"firstname":"张","lastname":"三丰","age":100},
            "key3":[
                    {"name":"小双","age":28,"addr":"扬州"},
                    {"name":"建宁","age":18,"addr":"紫禁城"},
                    {"name":"阿珂","age":10,"addr":"山西"},
                  ]
     };
     alert(json.key2.lastname);
     alert(json.key3[2].name);
  </script>

4、jquery的Ajax技术

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种

$.get(url, [data], [callback], [type])

$.post(url, [data], [callback], [type])

其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

$.ajax( { option1:value1,option2:value2... } );

常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    function fn1(){
        //get异步访问
        $.get(
            "/WEB22/ajaxServlet2", //url地址
            {"name":"张三","age":25}, //请求参数
            function(data){ //执行成功后的回调函数
                //{\"name\":\"tom\",\"age\":21}
                alert(data.name);
            },
            "json"
        );
    }
    function fn2(){
        //post异步访问
        $.post(
            "/WEB22/ajaxServlet2", //url地址
            {"name":"李四","age":25}, //请求参数
            function(data){ //执行成功后的回调函数
                alert(data.name);
            },
            "json"
        );
    }
    function fn3(){
        $.ajax({
            url:"/WEB22/ajaxServlet2",
            async:true,
            type:"POST",
            data:{"name":"lucy","age":18},
            success:function(data){
                alert(data.name);
            },
            error:function(){
                alert("请求失败");
            },
            dataType:"json"
        });
    }
</script>

</head>
<body>
    <input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
    <br>
    <input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
    <br>
    <input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
    <br>
</body>
</html>
protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

    request.setCharacterEncoding("UTF-8");
    String name = request.getParameter("name");
    String age = request.getParameter("age");
    System.out.println(name+"  "+age);
    //java代码只能返回一个json格式的字符串
    response.setContentType("text/html;charset=UTF-8");
    response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
}

5、异步校验用户名是否存在

<script type="text/javascript">
    $(function(){
        //为输入框绑定事件
        $("#username").blur(function(){
            //1、失去焦点获得输入框的内容
            var usernameInput = $(this).val();
            //2、去服务端校验该用户名是否存在---ajax
            $.post(
                "${pageContext.request.contextPath}/checkUsername",
                {"username":usernameInput},
                function(data){
                    var isExist = data.isExist;
                    //3、根据返回的isExist动态的显示信息
                    var usernameInfo = "";
                    if(isExist){
                        //该用户存在
                        usernameInfo = "该用户名已经存在";
                        $("#usernameInfo").css("color","red");
                    }else{
                        usernameInfo = "该用户可以使用"
                        $("#usernameInfo").css("color","green");
                    }
                    $("#usernameInfo").html(usernameInfo);
                },
                "json"
            );
        });
    });
</script>
protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    //获得要校验的用户名
    String username = request.getParameter("username");
    //传递username到service
    UserService service = new UserService();
    boolean isExist = false;
    try {
        isExist = service.checkUsername(username);
    } catch (SQLException e) {
        e.printStackTrace();
    }
    response.getWriter().write("{\"isExist\":"+isExist+"}");
}
public class UserService {
    public boolean checkUsername(String username) throws SQLException {
        UserDao dao = new UserDao();
        Long isExist = dao.checkUsername(username);
        return isExist>0?true:false;
    }
}
public class UserDao {
    public Long checkUsername(String username) throws SQLException {
        QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select count(*) from user where username=?";
        Long query = (Long) runner.query(sql, new ScalarHandler(), username);
        return query;
    }
}

6、站内查询

<script type="text/javascript">

    function overFn(obj){
        $(obj).css("background","#DBEAF9");
    }
    function outFn(obj){
        $(obj).css("background","#fff");
    }

    function clickFn(obj){
        $("#search").val($(obj).html());
        $("#showDiv").css("display","none");
    }

    function searchWord(obj){
        //1、获得输入框的输入的内容
        var word = $(obj).val();
        //2、根据输入框的内容去数据库中模糊查询---List<Product>
        var content = "";
        $.post(
            "${pageContext.request.contextPath}/searchWord",
            {"word":word},
            function(data){
                //3、将返回的商品的名称 现在showDiv中
                if(data.length>0){
                    for(var i=0;i<data.length;i++){
                        content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
                    }
                    $("#showDiv").html(content);
                    $("#showDiv").css("display","block");
                }   
            },
            "json"
        );
    }
</script>
jiangtea
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX 详解
m0_61869253的博客
02-17 1176
怎样创建xmlHttpRequest对象？怎样通过get、post传递传递数据？怎样控制http头信息？通过ajax能传递什么格式的数据？怎样接收服务器传递的数据？怎样控制数据接收的进度？如果控制数据传递过程中的错误？关于跨越传输的问题？a. AJAX是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX详解
weixin_63719049的博客
04-27 4713
AJAX详解
Ajax详解
Zhang_wang_yun的博客
04-12 3034
ajax 全名 `async javascript and XML` 是`前后台交互的能力`也就是我们客户端给服务端发送消息的工具，以及接受响应的工具
前端进阶 - 认识和使用Ajax
zhqi9277的博客
05-09 892
异步 JavaScript 和 XML，或 Ajax 本身不是一种技术，而是一种将一些现有技术结合起来使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。尽管ajax中x代表的是xml，但是由于json优越的综合性能，更多的时候我们经常用的是jsonXMLHttpRequest 对象的 responseType 属性可以被设置来改变服务器的预期响应类型。
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
AJAXCALL
10-31
AJAXCALL
ajax
08-05
NULL 博文链接：https://mytdyhm123456.iteye.com/blog/2037126
掌握 Ajax
02-01
整合ibm网站的ajax系列教程，各个章程结合的很紧密。系统介绍了ajax的相关内容。包括健壮的程序编写、数据格式及数据格式的操作方式和数据格式之间的优势比较和使用场合。介绍的相当详细。是学习ajax的不错的学习资料。
什么是AJAX
12-04
什么是AJAX ,自己收集的,讲的听详细的
最简单ajax
07-30
最简单的js get异步提交，不用jq也可以
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax（基本介绍+使用+示例代码+场景回放）
weixin_45594172的博客
11-21 5938
Ajax（基本介绍+使用+示例代码+场景回放）
Ajax（详细介绍）
最新发布
nine06的博客
12-12 928
AJAX指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），Ajax可以实现异步请求。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。虽然 Ajax 中的 x 代表 XML，但是现在 JSON 的诸多优势 JSON 的使用比 XML 更加普遍。JSON 和 XML 都用于在 Ajax 模型中封装数据。1.2、同步交互和异步交互同步（1）发一个请求，就要等待服务器的响应结束，然后才能发第二个请求。
Ajax笔记：Ajax基础知识和Ajax开发技巧
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值