jQuery入门（五）Ajax和json

一、Ajax 简介

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。一般的网页如果需要更新内容，必需重新加载个页面。而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。

同步和异步的区别如下图：

二、jQuery实现Ajax

1）JQuery的GET方式实现AJAX

核心语法：$.get(url,[data],[callback],[type]);

- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等

示例代码：用户注册异步get请求验证用户名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body><form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密码：<input type="password" id="password"><br><input type="submit" value="注册"></form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//1.为用户名绑定失去焦点事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的GET方式实现AJAX$.get("userServlet",//请求的资源路径"username=" + username, //请求参数function (data) {  //回调函数//将响应的数据显示到span标签$("#uSpan").html(data);},"text"//响应数据形式);});
</script>
</html>

2）JQuery的POST方式实现AJAX

**核心语法：**$.post(url,[data],[callback],[type]);

- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

示例代码：用户注册异步post请求验证用户名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body><form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密码：<input type="password" id="password"><br><input type="submit" value="注册"></form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//1.为用户名绑定失去焦点事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的POST方式实现AJAX$.post(//请求的资源路径"userServlet","username=" + username, //请求参数function (data) {//回调函数$("#uSpan").html(data); //将响应的数据显示到span标签},"text"//响应数据形式);});
</script>
</html>

JQuery的通用方式实现AJAX

**核心语法：**$.ajax({name:value,name:value,…});

- url：请求的资源路径。
- async：是否异步请求，true-是，false-否 (默认是 true)。
- data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
- type：请求方式，POST 或 GET (默认是 GET)。
- dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
- success：请求成功时调用的回调函数。
- error：请求失败时调用的回调函数。

示例代码：用户注册异步Ajax post请求验证用户名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body><form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密码：<input type="password" id="password"><br><input type="submit" value="注册"></form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//1.为用户名绑定失去焦点事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的通用方式实现AJAX$.ajax({url:"userServletxxx",//请求资源路径async:true, //是否异步data:"username="+username, //请求参数type:"POST", //请求方式dataType:"text", //数据形式success:function (data) { //请求成功后调用的回调函数$("#uSpan").html(data);//将响应的数据显示到span标签},error:function () { //请求失败后调用的回调函数alert("操作失败...");}});});
</script>
</html>

上述Ajax请求用到的servlet代码：


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求和响应的乱码req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//1.获取请求参数String username = req.getParameter("username");//模拟服务器处理请求需要5秒钟/*try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}*///2.判断姓名是否已注册if("zhangsan".equals(username)) {resp.getWriter().write("<font color='red'>用户名已注册</font>");}else {resp.getWriter().write("<font color='green'>用户名可用</font>");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}

三、JSON的简介

1、JSON简介

JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。

2、创建格式:

对象类型:

{name:value,name:value,...}
示例代码:

{"city":"北京","date":"2088-08-08","shidu":"22%","wendu":"10~23"}

数组集合类型:

[{name:value,...},{name:value,...}]

混合类型:

{name:[{name:value,...},{name:value,...}]}

3、常用方法:

1）stringify（对象）作用：将指定对象转换成json格式字符串

2）parse（字符串）作用：将指定json格式字符串解析成对象

我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。 JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/389980.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！