原生AJAX以及JQuery发送AJAX请求的几种方式

最新推荐文章于 2024-01-06 15:35:25 发布

_zmynsa

最新推荐文章于 2024-01-06 15:35:25 发布

阅读量2.3k

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/zmysn_a/article/details/86016223

版权

JavaWeb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JSON&AJAX

文章目录

- JSON&AJAX

1. JSON

使用AJAX会用到JSON的相关内容，这里简单介绍一下

1.1 json概述

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，代替了以前的 XML 格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

类型	语法
对象类型	{键:值键:值}
数组/集合类型	[值1，值2，值3]
混合类型	[{键:值},{键:值键:值},{键:值}] { 键: [ 值, 值, 值]}

1.2 Json使用

对象类型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
	// person 对象的 JSON 对象，属性名：firstname、lastname、age 给三个属性赋值
	var person = {
	firstname: "孙悟空",
	lastname: "齐天大圣",
	age: 500
	};
	//输出对象的每个属性值
	document.write("姓：" + person.firstname + "<br/>");
	document.write("名：" + person.lastname + "<br/>");
	document.write("年龄：" + person.age + "<br/>");
</script>
</body>
</html>

数组类型，包含三个对象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
	//创建一个数组，包含 3 个对象
	var persons = [
	{
		id: 1,
		name: "孙悟空",
		sex: "男"
	},
	{
		id: 2,
		name: "猪八戒",
		sex: "妖"
	},
	{
		id: 3,
		name: "嫦娥",
		sex: "女"
	}
	];
	//遍历输出每个元素
	for(var p of persons) {
		document.write("编号：" + p.id + "<br/>");
		document.write("姓名：" + p.name + "<br/>");
		document.write("性别：" + p.sex + "<br/>");
		document.write("<hr/>");
	}
</script>
</body>
</html>

混合类型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//创建这种格式： {"param":[{key:value,key:value},{key:value,key:value}]}
var myBabies = {
	baobao: [
        {
            name: "小红",
            age: 18
        },
        {
            name: "小泽",
            age: 20
        },
        {
            name: "小苍",
            age:22
        }
	]
};
//得到这个对象的 baobao 属性
var baobao = myBabies.baobao; //返回数组
for(var b of baobao) {
    document.write(b.name + "<br/>");
}
</script>
</body>
</html>

###2. ajax概述

Asynchronous JavaScript And XML :异步的 JavaScript 和 XML
提交方式：

以前我们表单提交数据给服务器，发送的请求是同步。串行操作方式，如果服务器没有响应回来，浏览器不能进行任何操作，只能等待。AJAX 使用异步的提交方式，后台进行数据的提交给服务器。

应用场景

检查用户名是否已经被注册

很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。

省市二联下拉框联动

很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现不同的市区的选择，这就是最常见的省市联动效果。

自动补全

在百度淘宝京东搜索商品或者其他东西时出现搜索下拉框的提示，这也使用了ajax

3. 原生AJAX

所有的 AJAX 的操作代码都使用纯 JS 去完成，不使用任何框架。开发效率相对低，代码量会更大一些。

demo

使用原生ajax实现判断用户名

前端发送原生ajax请求并接收响应数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断用户名</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
用户名：<input type="text" id="username" name="username">
<span id="info"></span>
<script type="text/javascript">
    $("#username").blur(function () {
        //创建一个xmLRequest对象
       var request = new XMLHttpRequest();
        //得到返回数据时触发方法
       request.onreadystatechange = function () {
           //判断返回状态，如果返回状态是200,并且readyState=4时获得返回数据
           if(request.readyState == 4 && request.status == 200){
               var value = request.responseText;
               //返回数据放在id为info的span里面
               $("#info").html(value);
           }
       };
       var username = $("#username").val();
        //打开一个链接并发送一个请求
       request.open("GET","demo1?name=" + username,true);
       request.send();
    });
</script>
</body>
</html>

后端接收请求并发送响应数据

package com.zmysna.demo;

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;
import java.io.PrintWriter;

@WebServlet("/demo1")
public class Demo1XHR extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/plain;charset=utf-8");
        PrintWriter writer = response.getWriter();
        String username = request.getParameter("name");
        if(username.equals("zmysna")){
            writer.print("用户名已经注册");
        }else{
            writer.print("注册成功，欢迎" + username);
        }

    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }
}

4. JQuery的AJAX

语法	说明
$.get(url,[data],[callback],[type])	使用get方式发送请求给服务器
$.post(url,[data],[callback],[type])	使用post方式发送请求给服务器
$.ajax([setting])	使用原生 AJAX 发送请求给服务器，参数相对比较多一点，设置更加详细
$.get([settings]) 3.0 新的方法签名方式	使用 GET 方法发送请求给服务器，以后会代替上面的写法。参数与$.ajax 相同，设置参数相对多一些。
$.POST([settings]) 3.0 新的方法签名方式	使用 POST 方法发送请求给服务器，以后会代替上面的写法。参数与$.ajax 相同，设置参数相对多一些。

4.1 GET请求方式

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

参数说明

参数名称	解释
data	发送给服务器的数据，有以下两种格式格式 1 ：键 1=值 1&键 2=值 2

格式 2 ：使用 JSON 对象
{
键 1:值 1,
键 2:值 2
} |
| url | 访问服务器地址 |
| callback | 数据从服务器返回以后调用的回调函数，一般使用匿名函数
回调函数的参数就是从服务器返回的数据 |
| type | 从服务器返回的数据类型
取值xml , html, script, json, text, _default
默认是字符串文本类型 |

改造前面的demo，使用jquery的ajax，后台代码不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断用户名</title>
    <!--导入 jquery 框架-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
用户名：<input type="text" id="username" name="username">
<span id="info"></span>
<script type="text/javascript">
    $("#username").blur(function () {
        var username = $("#username").val();
       $.get(
           "demo1",
       		"name=" + username,
           function(data){
               $("#info").html(data);
           },
           "text"
       );
    });
</script>
</body>
</html>

4.2 POST请求方式

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

和get请求方式大体一致，区别是请求的方式不同，改请求方法名字就行。

$.post(
       "demo1",
   		"name=" + username,
       function(data){
           $("#info").html(data);
       },
       "text"
);

4.3 ajax请求方式

$.ajax([settings])

其中，settings 是一个 JSON 形式的对象，格式是{name:value,name:value… …}，常用的 name 属性名如下:

参数名称	解释
data	发送给服务器的数据，使用 JSON 对象

{
键 1:值 1,
键 2:值 2
} |
| url | 访问服务器地址 |
| method | 发送请求的方式：GET或POST；默认是GET方式 |
| datatype | 从服务器返回的数据类型
取值可以是xml , html, script, json, text, _default |
| success | 数据从服务器返回以后调用的回调函数，一般使用匿名函数
回调函数的参数就是从服务器返回的数据 |
| error | 如果服务器出现异常调用这个函数 |
| async | 设置后台发送格式，是异步或同步发送。通常省略
默认值：true ，异步发送请求。 |

使用ajax实现判断用户名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax实现判断用户名</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
用户名：<input type="text" id="username" name="username">
<span id="info"></span>
<script type="text/javascript" >
    $("#username").blur(function () {
        var username = $(this).val();
        $.ajax({
            url : "demo1",
            method : "GET",
            data : {name : username},
            dataType : "text",
            success : function (data) {
                $("#info").html(data);
            },
            error: function () {
                alert("服务器错误");
            }
        })
    });
</script>
</body>
</html>

4.4 JQuery3.0 的GET新增签名方式

$.get([settings])

使用方式和ajax签名方式类似，使用get方式发送ajax请求仅仅需要在上面的例子上修改一个签名名字。

$.get({
        url : "demo1",
        method : "GET",
        data : {name : username},
        dataType : "text",
        success : function (data) {
            $("#info").html(data);
        },
        error: function () {
            alert("服务器错误");
        }
});

4.5 JQuery3.0 的POST新增签名方式

$.post([settings])

使用方式和ajax签名方式类似，使用post方式发送ajax请求仅仅需要在上面的例子上修改一个名字。

$.post({
        url : "demo1",
        method : "GET",
        data : {name : username},
        dataType : "text",
        success : function (data) {
            $("#info").html(data);
        },
        error: function () {
            alert("服务器错误");
        }
});

_zmynsa

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
原生AJAX以及JQuery发送AJAX请求的几种方式

JSON&amp;amp;AJAX文章目录JSON&amp;amp;AJAX1. JSON1.1 json概述1.2 Json使用3. 原生AJAX4. JQuery的AJAX4.1 GET请求方式4.2 POST请求方式4.3 ajax请求方式4.4 JQuery3.0 的GET新增签名方式4.5 JQuery3.0 的POST新增签名方式1. JSON使用AJAX会用到JSON的相关内容，这里简单介绍一...
复制链接

扫一扫