首页 网络技术
  1. 正文

Ajax动态查询回显数据的方法

1.同步和异步

        例:普通B/S模式(同步)        AJAX技术(异步)

        同步:提交请求-->等待服务器处理-->处理完毕返回--> 这个期间客户端浏览器不能干任何事

        异步:请求通过时间触发-->服务器处理(这时浏览器任然可以作其他事情)-->处理完毕

        同步是指:发送方发出数后,等待收方发回响应以后才发下一个数据包的通讯方式

        异步是指:发送方发出数据后,不等待收方发回响应,接着发送下个数据包的通讯方式

        通俗点说:

                        异步传输:你传你的,我干我的事,传完给我说一声

                        同步传输:你现在传输,我需要亲眼看着你传完我在做别的事

2.什么是ajax

        允许浏览器与服务器通信而无序刷新当前页面的技术都被叫做ajax

3.ajax的工作原理

        AJAX采用异步交互过程,ajax在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理——等待——处理——等待缺点。

        用户的浏览器在执行任务时即卸载了AJAX引擎,Ajax引擎用javascript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

        Ajax引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器之间的交流。现在,可以用javascript调用Ajax引擎来代替产生一个HTTP的用户动作,内存中的数据编辑,页面导航,数据校验这些不需要重新载入整个页面的需求可以给Ajax来执行。

4.AjAX得实现方式基于jquery来实现

Jquery对js的一种封装使我们操作dom元素更加简单。

(1) $.get(url,data,callback,type);

1.url:请求服务器的地址

2.data:请求时携带的参数   格式是key/value  {key:value,key:value}

3.callback:服务器响应成功后调用的函数。  function(msg){}    msg:服务器响应的内容

4.type:服务器响应的数据格式。 text文本类型     json  对象类型   xml  (这个不怎么会用)

(2) $.post(url,data,callback,type)   和get方式一样

(3) $.ajax

$.ajax({

       url: 请求路径,

       data: 携带的数据

       type: 请求方式

       success: 服务器响应成功后触发的函数,

       dataType: 服务器响应的数据类型

 });

 5.json对象

        JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。

规则如下:

                1)映射用冒号(“:”)表示。名称:值

                 2)并列的数据之间用逗号(“,”)分隔。名称1:值1,名称2:值2

                3) 映射的集合(对象)用大括号(“{}”)表示。{名称1:值1,名称2:值2}

                4) 并列数据的集合(数组)用方括号(“[]”)表示。 [ {名称1:值,名称2:值2}, {名称1:值,名称2:值2} ]

                5 元素值可具有的类型:string, number, object, array, true, false, null

<%--

  Created by IntelliJ IDEA.

  User: Administrator

  Date: 2021/10/30

  Time: 14:13

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

  <head>

    <title>$Title$</title>

    <%--①引入jquery得插件--%>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>

  </head>

  <body>

      <button onclick="ck()">点击我</button>

  </body>

<script>

     //表示一个json对象 {k:v,k:v} 简单

     // var p={"n":"刘一凡","a":17};

     // alert(p.n+"----->"+p.a);

     //集合json对象

     // var students=[

     //   {"name":"刘健","age":20},

     //   {"name":"王飞","age":18},

     //   {"name":"王一同","age":38}

     // ];

     // alert(students[0].name);

     // var p={

     //   "programmers":

     //           [

     //             {"firstName": "Brett", "email": "brett@newInstance.com" },

     //             {"firstName": "Jason", "email": "jason@servlets.com" }

     //           ]

     //

     // }

     //

     // alert(p.programmers[0].email);

     var people ={

       "programmers": [

         { "firstName": "Brett", "email": "brett@newInstance.com" },

         { "firstName": "Jason",  "email": "jason@servlets.com" },

         { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

       ],

       "authors": [

         { "firstName": "Isaac",  "genre": "science fiction" },

         { "firstName": "Tad", "genre": "fantasy" },

         { "firstName": "Frank",  "genre": "christian fiction" }

       ],

       "musicians": [

         { "firstName": "Eric",  "instrument": "guitar" },

         { "firstName": "Sergei", "instrument": "piano" }

       ]};

     window.alert(people.programmers[1].firstName);

     window.alert(people.musicians[1].instrument);

     function ck(){

         

       

       $.ajax({

           url: "${pageContext.request.contextPath}/ajax01",

           data: "uname=刘哥&age=19",

           type: "POST",

           success: function (result) {

                alert(result)

           }

       })

     }

</script>

</html>

服务端响应的数据格式为json

本文标题:Ajax动态查询回显数据的方法
本文链接:https://www.qqooo.cn/post/6706.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!