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得插件--%>

</head>

<body>

</body>

//表示一个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（）{

/*$.get（"${pageContext.request.contextPath}/ajax01",function（result）{ //

//拿到结果使用

alert（result）;

}）;*/

/*$.post（"${pageContext.request.contextPath}/ajax01",{"uname":"范龙飞","age":18},function（result）{ //

//拿到结果使用

alert（result）;

}）;*/

$.ajax（{

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

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

type: "POST",

success: function （result） {

alert（result）

}

}）

}

</script>

</html>

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

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64178.shtml

Ajax请求 动态查询回显数据

Ajax请求动态查询回显数据