原生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使用

对象类型

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