JS JSON Ajax

最新推荐文章于 2024-04-09 13:40:23 发布
最新推荐文章于 2024-04-09 13:40:23 发布
阅读量291 收藏
点赞数
文章标签： javascript ajax json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50011463/article/details/123380149
版权

文章目录

HTML

系统结构

B/S 架构：Browser / Server，浏览器端/服务器端的交互形式。

  1. 优缺点：

    升级方便，维护成本低（只需要升级和维护服务器端代码）

    速度慢，体验差，不美观

  2. 支持的语言：

    Browser：HTML、CSS、JavaScript……

    Server：C、C++、Java、python……

C/S 架构：Client / Server，客户端/服务器端的交互形式。

基本概念

Hypertext Marked Language，超文本标记语言（不是编程语言），后缀名是 .htm 或 .html ，HTML 文档也叫做 web 页面，HTML 的运行使用浏览打开（HTML 运行在浏览器上，由浏览器来解析）。

VS 一般文本，一个 HTML 文件不仅包含文本内容，还包含一些 Tag（标记 / 标签 / 元素），通过 Tag 可以告知浏览器如何显示 HTML 文件，标记标签用来描述网页。

HTML 元素可以设置属性，属性可以在元素中添加附加信息，一般描述于开始标签。

Tag 通常成对出现（Opening Tag和Closing Tag），不区分大小写。

<html>
    <head>
        <title>Title of page</title>
    </head>
    <body>
        This is my first homepage!
        <b>This text is blod</b>
    </body>
</html>

<html> 是第一个 Tag，告知用户浏览器只是 HTML 文件的头。

</html> 是最后一个 Tag，告知浏览器 HTML 文件到此结束。

<head> 和 </head> 之间的内容，是 Head 信息，头部信息主要是被浏览器所用，不显示（在用户浏览器里看不到）。但是不代表没有用，可以在 Head 信息里添加关键词，有助于搜索引擎搜索到该网页。

  • 标题 title：不显示在 HTML 网页正文，显示在浏览器窗口最顶端的标题栏。
  • 链接 link：建立与外部文件的链接。
  • 样式 style：可以设置网页的内部样式表。

<title> 和 </title> 之间的内容，是文件的标题，是最常用的 head 信息，在用户浏览器最顶端的标题栏看到。

<body> 和 </body> 之间的内容，是正文。

<b> 和 </b> 之间的文字，用粗体（bold）表示。

HTML 元素：用来标记文本，表示文本的内容，如 title、body。

HTML 元素的属性：属性可以扩展 HTML 元素的能力，通常由属性名和值成对出现，就像 name=“value”，如<body bgcolor=“red”> 表示页面背景色为红色，background 属性设置页面背景图片，属性值就是图片路径。属性通常附加给 HTML 的 Opening Tag。

Tag

正文标题：HTML 用 <h1> 到 <h6> 定义正文标题，从大到小，每个标题自成一段。

<h1>
    This is a heading!
</h1>

标题居中：<h1 align=“center”>标题名</h1>

段落划分：<p> </p>

换行：不新建段落的情况下换行，<br> 没有 Closing Tag

<p>
    This
    <br>is a para<br>
    graph with line breaks
</p>

注释：<!- - This is a comment - ->

补充：HTML 文件会自动截去多余的空格，不管连续加多少空格都会被看作一个，一个空行也被看作一个空格。

加横线（分割线）：<hr>

常用文本格式Tag:

Tag（成对）Tag说明
<b>粗体bold
<i>斜体italic
<del>文字当中划线表示删除
<ins>文字下划线表示插入
<sub>下标
<sup>上标
<blockquote>缩进表示引用
<pre>保留空格和换行
<code>表示计算机代码，等宽字体

看网页的 HTML 源代码：鼠标右键–> View Source。

HTML字符实体：要在网页中显示具有特殊含义的字符，如<，就要用到字符实体。字符实体由三部分组成：

  1. &
  2. 实体（Entity）名字或者是**#加上实体编号**
  3. ；

如要显示小于号：&lt；或者 &#60；

Entity NameEntity Number显示结果说明
&nbsp;&#160;显示一个空格
&lt;&#60;<小于
&gt;&#62;>大于
&amp;&#38;&&符号
&quot;&#34;“双引号
&copy;&#169;©版权
&reg;&#174;®注册商标
&times;&#215;×乘号
&divide;&#247;÷除号

超链接：<a href=“url”> </a>，href属性表示链接文件的路径。

target 属性：

  1. <a href=“url”_blank> </a>：表示点击链接时，会在一个新的窗口显示。
  2. <a href=“url” title=“name”> </a>：表示鼠标悬停在链接上时，会显示该超链接的文字注释。

相对路径：

  1. 同一个目录的文件引用，可直接写引用文件名。
  2. 不同目录下的文件引用，…/ 表示返回上级目录，…/…/ 表示返回上上级目录，返回两文件的同级目录，再进入引用文件目录，进入文件目录用 / 表示。

绝对路径：指带域名的文件的完整路径，如http://www.baidu.com。

表格：<table> </table>，表头<th>粗体显示。

设置表头（表名）：<caption> </caption>

表格分行，每一行开始要用<tr>，结束用</tr>。

分单元格，每一个单元格开始要用<td>，结束用</td>。

在缺省情况下，不设置表格边界，默认不显示，同 <table border=“0”>。

用 colspan 属性表示包含多列的单元格，如 <th colspan=“2”>。

用 rowspan 属性表示包含多行的单元格，如 <th rowspan=“2”>。

表单：<form> </form> ，包含表单元素的区域，表单元素允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

多数情况下被用到的表单标签是输入标签 <input>，输入类型由类型属性 type 定义。

标签描述
<form>定义供用户输入的表单
<label>定义<input>元素的标签，一般为输入标题
<input>定义输入域
<textarea>定义文本域（可输入多行）
<select>定义下拉选项列表
<option>定义下拉列表的选项
<button>定义点击按钮
<optgroup>定义选项组（给下拉列表的选项分组）

列表：

有序：<ol> </ol> ，里面嵌套 <li> </li>表示定义列表项（1、2、……）。

无序：<ul> </ul>，嵌套 <li> </li>。

自定义：<dl> </dl>，里面嵌套<dt> </dt>表示列表项，里面再嵌套<dd> </dd>表示列表项里的内容。

字体大小：<p><font size=“2”> </font></p>。

字体风格：<p><font face=“arial”> </font></p>。

字体颜色：<p><font color="#FF0000"> </font></p>，表示这段字体颜色是红色。

注意：name、value、id

属性 name 相当于是一个变量名，value 相当于是一个变量的值，id 是用来唯一标识一个容器，来调节被 id 标识的容器的样式和动态效果。

常见页面错误

1××信息提示，表示临时的响应
2××成功，表示服务器成功接收客户端的请求
200OK—客户端请求已成功
3××重定向，客户端浏览器必须采取更多的操作来实现请求
302重定向，对象已临时移动
304自从上次请求后，请求的网页未修改过，一种很好的缓存手段
4××客户端错误，请求有语法错误或请求无法实现
401Unauthorized，请求未经授权
403Forbidden，服务器收到请求，但拒绝处理
404Not Found，未找到，请求资源不存在
405用来访问本页面的方法不被允许
5××服务器错误，服务器未能实现合法请求
500INternal Server Error，内部服务器错误，服务器遇到错误不能完成该请求
503Server Unavailable，服务器目前无法处理请求

JavaScript 简单认识

JS 概述

JS（JavaScript）是一种直译式脚本语言，一种动态类型、弱类型（没有编译阶段，执行一行解释一行）、基于原型的语言。其解释器被称为 JavaScript 引擎，是浏览器的一部分，广泛应用于客户端的脚本语言，最早是在 HTML 网页上使用，目的是增加动态功能。

简单来说，JavaScript 是运行在浏览器上的脚本语言，语言的“目标程序”以普通本文形式（JSON）保存，作用是增强 HTML 页面的交互性。

JS 使用

语法：<script type=“text/javascript”> JS代码块 </script>

通过 <script> 标签在 HTML 页面中插入 JS 代码，<script type=“text/javascript”> 和 </script> 分别标记了 JavaScript 代码的开始和结束。

分号：JavaScript 也是用分号来结束一条语句，但一般情况下，分号只当一行有多条语句时才必须使用。

位置：

JS代码位置作用
head部分将脚本中的函数插入 head 部分，确保函数在被调用之前就已经加载完成
body部分body 部分的脚本将在页面加载时被执行。在页面中插入脚本，脚本将伴随页面一起加载
外部脚本调入外部脚本，将 JavaScript 写在一个外部文件中，并保存为以 .js 为扩展名的外部 JavaScript 文件，通过 src 属性调入
JS变量

  • JS 语言是弱类型语言，没有编译阶段，变量的数据类型由等于号右边的值决定，可以在脚本中改变。

    变量是存储数据的容器。

  • 语法格式：

    1. 变量声明：var 变量名；注意 JS 是区分大小写的。
    2. 变量赋值：变量名=变量值；如果没有手动赋值，那么系统默认赋值“undefined”。

  • 变量作用域：

    1. 局部变量：在函数体内声明，函数执行时开辟内存空间，函数结束时释放内存。
    2. 全局变量：在函数体外声明，页面执行时开辟内存空间，页面关闭时释放内存。全局变量耗费内存空间，所以尽量使用局部变量。

    注意：没有用 var 声明变量时，该变量无论在何处都属于全局变量。

JS 数据类型

  • 原始类型：Undefined、Number、String、Null、Boolean

    1. Undefined 类型只有一个值，就是系统默认赋值的undefined。

    2. Number 类型范围：整数、负数、整数、小数、无穷大（Infinity）、无穷小（-Infinity）、不是数字（NaN–表示结果不是一个数字）

      函数：

      函数名作用
      isNaN()判断是否为数字
      parseInt()将字符串转换成int类型
      parseFloat()将字符串转换成float类型
      Math.ceil()向上取整

    3. String创建：

      语法父类
      直接创建：str=“字符串”原始类型
      使用内置类：var str=new String(“字符串”)Object

      注意：字符串既可以用单引号也可以用双引号表示，比较两个字符串使用 ==，不是 equals()。

      函数：

      函数名作用
      length字符串长度
      indexOf(String)获取指定字符串 String 在当前字符串第一次出现的索引
      lastIndexOf(String)获取指定字符串 String 在当前字符串最后一次出现的索引
      replace(String1,String2)使用 String2 替换当前字符串与 String1 匹配的第一个子字符串
      split(String)使用 String 拆分当前字符串
      subStr(startIndex,length)从 startIndex 开始截取长度为 length 的子字符串
      subString(startIndex,endIndex)截取子字符串，从 startIndex 开始到 endIndex-1 结束
      toLowerCase()所有字符转换成小写
      toUpperCase()所有字符转换成大写

    4. Null类型只有一个值：null

      注意：typeof Null类型的变量 == “Object”。

      typeof 是运算符，作用是在程序运行时动态获取变量的数据类型。语法：typeof 变量名

    5. Boolean 变量的值：true 和 false。

    6. null、NaN、undefined 的数据类型不一致，分别是 Object、Number、Undefined。

  • 引用类型：Object 及其子类，Object 类型是所有类型的超类，自定义类型默认继承 Object 类。

JS条件语句

if、if …else…、if…else if…else、switch，语法都跟 Java 类似 。

JS 操作符

+ 、– 、*、/、%、++、– –、==、!=、>、<、>=、<=、&&、||、!、===(检查值和类型，全吻合才算相等)

两个字符串衔接在一起使用 +。

条件运算符：variablename = (condition) ? value1: value2；

JS 循环语句

for 循环：事先知道脚本应该执行几次

for…in：通过一组元素或对象属性进行循环，循环体针对每个元素/属性执行一次。

while 循环、do…while…循环，语法跟 Java 类似。

break、continue，用法同 Java。

JS 函数

实现某个特定功能的可重复利用的代码（等同于 Java 的方法），可以在事件触发或者被调用时来执行，可以在页面中的任何地方调用函数，还可以用外部 .js 文件的方式让其他页面也可以调用脚本。

函数在页面的开始部分（<head> 区域）定义。

如果想让浏览器在加载完页面后马上执行脚本文件，可以将脚本写入函数内。

语法：function 函数名(形参列表)

{

函数体；

}

  • 注意：JS 函数在调用时，实际参数类型和个数没有限制，JS 函数不支持重载（后者覆盖前者）。由于 JS 没有指定类型，所以在可以在函数里 return 一切。
JS 弹出框

在 JS 里可以建立三种不同的弹出框

  1. 警示框：保证让用户的到信息（内容），用户必须按 OK 来继续。

    语法：alert(“内容”)；

  2. 确认框：用来让用户核实或接受一些信息，按 OK 返回真，按 Cancel 返回假。

    语法：confirm(“内容”)；

  3. 信息框：让用户在进入页面前输入内容，用户在输入值后，按 OK 返回输入的值，按 Cancel 返回空值 null。

    语法：prompt(“内容”，”defaultvalue“)；

JS 事件

通过 JS 我们能够建立动态的 web 页面，JS 能够察觉到时间有动作。We b页面中的每个元素都能出发 JS 函数的事件。

注意：事件通常是用函数来组合使用的，并且在事件发生前，函数是不会执行的！

可以插入 HTML 标签中来定义事件动作的属性：

事件事件句柄（以属性的形式存在）说明
bluronblur元素失去焦点时
focusonfocus元素获得焦点时
loadonload页面或图片加载完成时
changeonchange下拉列表选中项改变或者文本框内容改变时
selectonselect文本被选择时
resetonreset重新点击鼠标按键时，表单重置
submitonsubmit点击提交按钮时，表单提交
keydownonkeydown按下键盘按键时
keyuponkeyup放开键盘按键时

JSON 简单认识

  • JSON（ JavaScript Object Notation）指 JavaScript 对象标记语言（表示法），是一种标准的轻量级数据交换格式的标记语言，基于 JavaScript 的一个子集，采用完全独立于语言的文本格式。

  • JSON 优点：

    1. JSON 格式数据容易处理，使用 Java 或 JavaScript 读写 JSON 格式数据较为容易。
    2. JSON 格式数据占用空间小，传输速度快，跟 XML 文件相比，XML 文件占用空间大且较难解析，但是 XML 更为严谨。
    3. JSON 是纯文本，有自我描述性（人可读），具有层级结构（值中存在值）。
    4. 可以通过 JavaScript 进行解析。
    5. 可以使用 Ajax 进行传输。

  • JSON 语法规则：

    var jsonObj={“属性名”:属性值，“属性名”:属性值，……}

    数据在名称/值对中（键值对），名称写在冒号前面（用双引号抱起来）值写在冒号后面（也用双引号引起来）。

    数据由逗号分隔，一个花括号 {} 保存一个对象，方括号[]保存数组，数组中可以有多个对象。

    值的类型：整数或浮点数、字符串（在” “中）、逻辑值（true、false）、数组（在[]中）、对象（在{}中）、函数、null。

    两种数据的基本结构：

    1. JSON 对象类型：JSONObject，key:value

      如：“fruit”:{“foo”：”bar”}

    2. JSON 数组类型：JSONArray，{key:value,key:value…}

      如：”grade“:[1,2,3]

    JSON 对象的属性值可以是任意类型，也被称为无类型对象。

  • 补充

    关于 eval() 函数：作用是将字符串当作一段 JS 代码解释并执行。

    使用 eval() 函数的原因：

    1. Java 程序连接数据库获取到数据后，将其拼接成 JSON 格式字符串；
    2. Java 程序获得 JSON 格式字符串后，将其发送给浏览器；
    3. 浏览器获得 JSON 格式字符串后，调用 eval() 函数将其当作一段 JS 代码解释并执行。

Ajax 简单认识

  • JavaScript 的 Ajax 功能强大，制作网站的动态效果（动画、随鼠标移动/点击而改变）就是使用 JS 制作的，它比 JSP 更加灵活简单。

    Ajax 全称 Asynchronous JavaScript And XML，译名为异步 JavaScript 和 XML，是指一种创建交互式网页应用的网页开发技术，用于创建快速动态网页。通过在后台与服务器进行少量数据交互，可以使网页实现异步更新，意味着可以在不重新加载整个页面（刷新页面）的情况下对网页的某部分进行更新。

    Ajax 是利用现有的技术，实现局部刷新的方法，并非语言。其中 JavaScript 与 XML 是核心：

    1. JavaScript：负责创建异步对象，发送请求，操作 DOM（文档对象模型），更新页面的 DOM 对象；
    2. XML：负责规定数据在网络传播中的格式（现在 JSON 代替了 XML！）。

  • Ajax 的使用：

    1. 定义Ajax：要使用 Ajax 必须有下列代码，直接 copy，可以放在函数里：

      <script type="text/javascript">
    function 函数名()
	{
		if(window.XMLHttpRequest)//创建Ajax对象，直接copy
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
    }
</script>

    2. 定义消息传递方式：open 方法仅仅是定义消息传递方式，尚未把消息传递出去。

      <script type="text/javascript">
    function 函数名()
	{
		if(window.XMLHttpRequest)//创建Ajax对象，直接copy
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
    	
    	xmlhttp.open(method,url,async);//规定请求的类型、url、以及是否异步处理请求
    	//method:请求的类型，post或get
    	//url:文件在服务器上的位置，其中？表示后面要传递参数
    	//async:true异步，false同步
    	//例如：xmlhttp.open("get","demo.jsp?a=1&b=2",true);
    }
</script>

    3. 设置回调函数，通过事件来触发：

      <script type="text/javascript">
    function 函数名()
	{
		if(window.XMLHttpRequest)//创建Ajax对象，直接copy
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
    	
    	xmlhttp.open(method,url,async);//规定请求的类型、url、以及是否异步处理请求
    	//method:请求的类型，post或get
    	//url:文件在服务器上的位置，其中？表示后面要传递参数
    	//async:true异步，false同步
    	//例如：xmlhttp.open("get","demo.jsp?a=1&b=2",true);
    
    	xmlhttp.onreadystatechange=function () //直接copy
    	{ 
			if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    	    { //回应本页面要执行的操作
				
    			/**例如：
    			if(xmlhttp.responseText=="success")
					window.location.href="success.html";
				else
					alert(xmlhttp.responseText);
    			*/
    	    } 
    	} 
    }
</script>

      onreadystatechange 事件：当请求被发送到服务器时，需要执行一些基于相应的任务，每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息。

      XMLHttpRequest 对象的三个重要属性：

      属性描述
      onreadystatechange存储函数或函数名，每当 readyState 改变就会调用该函数
      readyState存有 XMLHttpRequest 的状态，从0到4发生变化：0—请求未初始化，1—服务器连接已建立，2—请求已接收，3—请求处理中，4—请求已完成且响应已就绪
      status200—“OK”，404—“NOT FIND”

      在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时，开始执行任务，即当 readyState 等于4 且 status 等于200时，表示响应已经就绪。

    4. 将请求发送到服务器，通过 send 方法来实现：

      <script type="text/javascript">
    function 函数名()
	{
		if(window.XMLHttpRequest)//创建Ajax对象，直接copy
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
    	
    	xmlhttp.open(method,url,async);//规定请求的类型、url、以及是否异步处理请求
    	//method:请求的类型，post或get
    	//url:文件在服务器上的位置，其中？表示后面要传递参数
    	//async:true异步，false同步
    	//例如：xmlhttp.open("get","demo.jsp?a=1&b=2",true);
    
    	xmlhttp.onreadystatechange=function () //直接copy
    	{ 
			if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    	    { //后端get或post方法执行后，回到前端这里，将要进行的相关处理，通过responseText获取后台servlet反馈的文本
				
    			/**例如：
    			if(xmlhttp.responseText=="success")
					window.location.href="success.html";
				else
					alert(xmlhttp.responseText);
    			*/
                
                /**又如：理解 eval()函数
                json=eval("("+xmlhttp.responseText+")")
                eval()函数可以把后端传向前端的 json字符串，转换成 js识别对象
                这样我们就可以json.属性去访问内容
                左右两边加括号是考虑了 json字符串是单个对象 的情况
                */
    	    } 
    	}
    
    	xmlhttp.send();//若open中定义的方法是get，则send()形参列表为空
    
    	//若open中定义的方法是post，即需要像HTML表单那样post数据，那么需要在send方法前定义消息头，否则后端无法解析post请求
    	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//使用setRequestHeader()添加HTTP头
        xmlhttp.send(String);//String就是希望发送给后端servlet的JSON数据
        //例如：xmlhttp.send("sid="+sid+"&password="+password);
    }
</script>

  • Ajax 基本原理

    1. 服务器响应：要获取服务器的响应，需要使用 XMLHttpRequest 对象的 responseText （获取字符串形式的响应数据，即 JSON 格式数据）或 responseXML （获取 XML 形式的响应数据，现在不用）属性。
    2. Ajax 异步的作用：局部刷新的核心对象是 XMLHttpRequest，异步对象存储在浏览器内存中，其创建和使用方法依赖 JavaScript 语法。

前后端分离

在 Web 开发中，我们一般想要使前后端分离，利用 Ajax 与 Servlet 接口实现前后端的数据交互，数据格式使用 JSON 格式。

  • 前端传递 JSON 格式数据给 Servlet

    使用 post 方法时，要传递的数据都写在 send 方法里。如：

    var data={"name":"Evie","age":18};
xmlhttp.send(JSON.stringify(data));

  • Servlet 处理前端的请求

    通过 HttpServletRequest 类，使用 get 请求方法时，查询字符串直接编码在请求的链接 url 中，Servlet 使用 getParameter() 来获取前端的数据。

  • 后端将处理结果传递给前端

    通过以下方法，输出数据到前台的 xhr.responseText

    PrintWriter out = response.getWriter();
out.write();

    通过 out.println() 输出页面。

XML 概述

XML 文件指可扩展标记语言（开发者在符合 XML 命名规则的基础上，可以根据自己的需求定义自己的标签），主要用来存储数据和配置文件信息，是纯文本。

Web Service 使用 XML 作为通用语言，实现了真正的跨平台、跨操作系统、跨语言的交互。

XML 文件严格区分大小写，属性值必须放在引号中，所有元素必须有关闭标签。

XML 文档形成一种树结构，必须包含根元素，是其他元素的父元素。

HTML VS XML：HTML 被设计用来显示数据，XML 被设计用来传输和存储数据。

引用场景：

  1. 作为系统或应用的配置文件使用，如 tomcat 中的 web.xml
  2. 作为应用程序的数据 / 日志存储文件
  3. 数据库功能之一，支持 XML 存储
Evie_Dec
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js结合json实现ajax简单实例
10-19
主要为大家详细介绍了js结合json实现ajax简单实例的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax+json.pdf
12-10
ASynchronous JavaScript And XML 异步的 JavaScript 和 XML; 异步和同步： 同步和异步本身是相对的 同步就相当于是 当客户端发送请求给服务端，在等待服务端响应的 请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。 这样的话客户端需要一直等待。用户使用起来会有不友好。 异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候， 客户端可以做其他的事情，这样节约了时间，提高了效率。 存在就有其道理 异步虽然好 但是有些问题是要用同步用来解决，比 如有些东西我们需要的是拿到返回的数据在进行操作的。这些是异步 所无法解决的。 Ajax 是一种
JSON和AJAX知识点整理
最新发布
VIP129370的博客
04-09 889
这个月马上就又要过去了，还在找工作的小伙伴要做好准备了，小编整理了大厂java程序员面试涉及到的绝大部分面试题及答案，希望能帮助到大家《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！167)][外链图片转存中…(img-yVKmaNuo-1712641208167)][外链图片转存中…(img-zV9XDeSg-1712641208168)]
JSON数据格式与 AJAX 请求
weixin_51992178的博客
10-15 1877
修改了`produces`的值，将返回的内容类型设定为`application/json`，表示服务器端返回了一个 JSON 格式的数据（当然不设置也行，也能展示，这样是为了规范）然后我们在方法上添加一个`@ResponseBody`表示方法返回（也可以在类上添加`@RestController`表示此 Controller 默认返回的是字符串数据）的结果不是视图名称而是直接需要返回一个字符串作为页面数据，这样，返回给浏览器的就是我们直接返回的字符串内容。向服务端发送一个 JS 对象数据并进行解析。
JSON和AJAX
qq_57533658的博客
03-24 568
json和ajax请求
AJAX异步请求&JSON数据格式
weixin_58545784的博客
07-17 2545
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 JSON是一种轻量级的数据交换格式。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效益。
AJAX&JSON
baiduwenku112的博客
10-12 170
## 今日内容 1. AJAX： 2. JSON # AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 * (同步)客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * （异步）客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 ...
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
路宇的博客
01-03 1774
一、首先看服务端代码 const express = require('express'); const app = express(); app.get('/', (request, response) => { response.send('HELLO Android'); }); app.post('/server', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control
AJAX,Axios,JSON简单了解
guaiwu_的博客
03-22 2247
概念: AJAX(AJavaScriptAndXML):异步的JavaScript 和XMLAJAX作用:1.与服务器进行数据交换: 通过AJAX可以给服务器发送请求，并获取服务器响应的数据使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了2.异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用校验，等等
JSON语法
weixin_44543252的博客
05-07 609
JSON语法 开发工具与关键技术：Visual Studio 2015 作者：徐晶旗 撰写时间：2019年5月6日 JS对象简谱 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提...
js与json和ajax,JS关键知识点：JSON和Ajax
weixin_39540271的博客
08-05 405
随堂知识总结：一、JSON相关知识：1、json是借用了JS对象字面量法来表示数据，是一种轻量级，用于数据交换与存储的格式化的字符串(本质上仍是一个字符串)；2、json数据类型：简单值：100，”hello”,true,null,没有undefined对象：{……}数组：[……]简单值字符串：必须且只能用双引号作为定界符；3、JS中有关json的两个方法：序列化：JS对象序列化为JSON格式的字...
lotus domino AJAX 代理print json
03-02
lotus domino AJAX 代理print json
javascript解析ajax返回的xml和json格式数据实例详解
10-20
主要介绍了javascript解析ajax返回的xml和json格式数据,结合实例形式详细分析了JS ajax调用及返回值中xml与json格式数据的处理技巧,需要的朋友可以参考下
JSON_ChatRoom_javascript_JSON_ajax_php_
09-29
Simple PHP Chat Room
AJAX和JSON详解
热门推荐
write less , do more
05-08 1万+
AJAX和JSON详解
AJAX异步请求JSON格式数据
sgw101的博客
12-04 2153
文章目录AJAX异步请求JSON格式数据AJAX异步请求AJAX的运行原理原生态的JavaScript实现异步请求实现步骤jQuery的AJAX请求$.get()函数$.post()函数$.ajax()函数异步请求和同步请求的差异JSON数据格式介绍格式1格式2JSON练习一JSON练习二JSON练习三JSON练习四AJAX响应JSON格式数据JSON-LIB工具Gson工具检查用户名是否被占用d...
json数据调用
weixin_34221276的博客
11-06 290
JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。 JSON的规则很简单： 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”...
Ajax和Json
m0_62063669的博客
08-02 897
Asynchronous(异步)JavascriptAndXML简称AJAX，它不是一种新技术，只是老技术[js]采用新用法[引用了XMLHttpRequest对象]。Json语法规则(Json语法是JavaScript对象表示语法的子集) 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 Json名称/值对 Json数据格式为：名称/值对，"firstName":"John" 相
JavaScript、JSON与AJAX的基础概念和用法
Evie的博客
02-14 697
JavaScript、JSON、Ajax JavaScript简单认识 JS 概述 JS（JavaScript）是一种直译式脚本语言，一种动态类型、弱类型（没有编译阶段，执行一行解释一行）、基于原型的语言。其解释器被称为 JavaScript 引擎，是浏览器的一部分，广泛应用于客户端的脚本语言，最早是在 HTML 网页上使用，目的是增加动态功能。 简单来说，JavaScript 是运行在浏览器上的脚本语言，语言的“目标程序”以普通本文形式（JSON）保存，作用是增强 HTML 页面的交互性。 JS 使用 语
js ajax post json
04-29
JS中的AJAX是一种进行异步数据传输的技术，而POST则是向服务器发送请求的一种HTTP方法。JSON即JavaScript Object Notation，是一种轻量级的数据交换格式，常用于前端与服务器之间的数据传输。 在前端开发中，我们经常需要通过AJAX向服务器请求数据并将其展示在页面上，而POST则是向服务器提交表单数据或修改数据等操作。如果我们需要将JSON格式的数据传输到服务器，可以通过AJAX发送POST请求并将数据转换成JSON格式。 举个例子，如果我们需要向服务器提交一个表单，可以使用以下代码： ``` // 获取表单数据 var formData = new FormData(document.getElementById("myForm")); // 将表单数据转换成JSON格式 var jsonData = {}; formData.forEach(function(value, key){ jsonData[key] = value; }); var jsonString = JSON.stringify(jsonData); // 发送POST请求 $.ajax({ type: "POST", url: "http://example.com/api", data: jsonString, contentType: "application/json; charset=utf-8", dataType: "json", success: function(data){ // 处理服务器返回的数据 }, error: function(){ // 处理请求失败的情况 } }); ``` 以上代码中，我们首先使用FormData对象获取表单数据，再将其转换成JSON格式的字符串。然后使用AJAX发送POST请求，并将数据类型设置为JSON。最后在success回调函数中处理服务器返回的数据，或在error回调函数中处理请求失败的情况。 总之，JS AJAX POST JSON是前端开发中常用的一种技术，它可以实现异步数据传输和与服务器的交互，为实现动态网页的功能提供了重要的支持。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值