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

JSON&AJAX

文章目录

    • JSON&AJAX
      • 1. JSON
        • 1.1 json概述
        • 1.2 Json使用
      • 3. 原生AJAX
      • 4. JQuery的AJAX
        • 4.1 GET请求方式
        • 4.2 POST请求方式
        • 4.3 ajax请求方式
        • 4.4 JQuery3.0 的GET新增签名方式
        • 4.5 JQuery3.0 的POST新增签名方式

1. JSON

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

1.1 json概述

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

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

1.2 Json使用

  • 对象类型

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

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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 + "
"
); document.write("姓名:" + p.name + "
"
); document.write("性别:" + p.sex + "
"
); document.write("
"
); }
script> body> html>
  • 混合类型

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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 + "
"
); }
script> body> html>

###2. ajax概述

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

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

应用场景

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

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

  1. 省市二联下拉框联动

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

  1. 自动补全

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

3. 原生AJAX

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

demo

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

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


<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,后台代码不变。


<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 () {
        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实现判断用户名


<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("服务器错误");
        }
});

你可能感兴趣的:(JavaWeb)