04_jQuery Ajax和JSON
一、Ajax概述
Ajax简介
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
Ajax这个术语源自描述从基于 Web 的应用到基于数据的应用。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
Ajax可使因特网应用程序更小、更快，更友好。
前后端分离概述：https://blog.csdn.net/fuzhongmin05/article/details/81591072
Ajax所包含的技术
大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
AJAX 的核心是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象
Ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Web应用模型对比
传统Web应用模型：
Ajax Web应用模型：
客户端服务器交互方式
浏览器的普通交互方式：
浏览器的Ajax交互方式
在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。
下面是使用Ajax可以完成的功能：
1.动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
2.提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
3.消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
4.直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击完成之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
二、XMLHttpRequest对象
- XMLHttpRequest是Ajax的基础。
- 所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
- XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 对象属性
onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。
下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：
xmlHttp.onreadystatechange = function() {
//我们需要在这写一些代码
}
readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：
| 状态 | 描述 |
|---|---|
| 0 | 请求未初始化（在调用 open() 之前） |
| 1 | 请求已提出（调用 send() 之前） |
| 2 | 请求已发送（这里通常可以从响应得到内容头部） |
| 3 | 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） |
| 4 | 请求已完成（可以访问服务器响应并使用它） |
我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成(意味着可获得数据)：
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}
responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText：
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}
属性总览
XMLHttpRequest 对象方法
open() 方法
open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。
xmlHttp.open("GET","test.php",true);
send() 方法
send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：
xmlHttp.send(null);
方法总览
https://www.jianshu.com/p/33974bac6f8e
Ajax编程步骤
为了方便理解，我给AJAX统一了一个流程，要想实现AJAX，就要按照以后步骤走：
- 创建XMLHttpRequest对象。
- 设置请求方式。
- 调用回调函数。
- 发送请求。
创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建XMLHttpRequest对象的语法：
var xmlHttp = new XMLHttpRequest();
如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：
//第一步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) { //非IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { //IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
设置请求方式
在WEB开发中，请求有两种形式，一个是get，一个是post，所以在这里需要设置一下具体使用哪个请求，XMLHttpRequest对象的open()方法就是来设置请求方式的。
XMLHttpRequest对象用于和服务器交换数据。如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法。
| 方法 | 描述 | 参数 |
|---|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求 | 参数1：设置请求类型（GET 或 POST），GET与POST的区别请自己百度一下，这里不做解释； 参数2：文件在服务器上的位置； 参数3：是否异步处理请求，是为true，否为false。 |
| 如下： |
//第二步：设置和服务器端交互的相应参数，向路径http://localhost:8080/JsLearning3/getAjax准备发送数据
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);
GET请求
一个简单的GET请求：
xmlhttp.open("GET","DemoAjaxServlet",true);
POST请求
一个简单POST请求：
xmlhttp.open("POST","DemoAjaxServlet",true);
如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中填写发送的数据：
xmlhttp.open("POST","DemoAjaxServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=tom&age=20");
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。
AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
-
在等待服务器响应时执行其他脚本
-
当响应就绪后对响应进行处理
调用回调函数
如果在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数，XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。
所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例子里，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。
因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：
//第三步：注册回调函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误！");
}
}
}
在上面代码中，xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。所以这里我们判断只有当xmlHttp.readyState为4的时候才可以继续执行。
xmlHttp.status是服务器返回的结果，其中200代表正确。404代表未找到页面，所以这里我们判断只有当xmlHttp.status等于200的时候才可以继续执行。
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
这段代码就是回调函数的核心内容，就是获取后台返回的数据，然后将这个数据赋值给id为testid的div。xmlHttp对象有两个属性都可以获取后台返回的数据，分别是：responseText和responseXML，其中responseText是用来获得字符串形式的响应数据，responseXML是用来获得 XML 形式的响应数据。
至于选择哪一个是取决于后台给返回的数据的，这个例子里我们只是显示一条字符串数据所以选择的是responseText。responseXML将会在以后的例子中介绍。
AJAX状态值与状态码区别
AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”获得。（由数字1~4单位数字组成）
AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；
这就是我们在使用AJAX时为什么采用下面的方式判断所获得的信息是否正确的原因。
if(ajax.readyState == 4 && ajax.status == 200) {。。。。);}
AJAX运行步骤与状态值说明
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是：
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。
AJAX状态码说明
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
再具体就如下：
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
发送请求
//第四步：设置发送请求的内容和发送报送。然后发送请求
var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random();
// 增加time随机参数，防止读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
// 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。
代码实现
//1.创建Ajax核心对象XMLHttpRequest
var Ajax = new XMLHttpRequest();
//2.与服务器建立连接
Ajax.open("post","testAjax");
//3.设置请求头,如果请求方式为post，请求头必须设置
Ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.注册事件监听，监听服务器端对象状态的改变
//作用：服务器处理之后，响应客户端，通过此函数来接收响应的数据，此后在Ajax中此函数被称为回调函数
Ajax.onreadystatechange = function(){
//判断服务器对象的状态是否为完成状态
if(Ajax.readyState == 4){ //4表示服务器完成
//判断服务器是否处理成功
if(Ajax.status == 200){ //200响应状态码，表示处理成功
alert("响应回的数据：" + Ajax.responseText);
}else {
alert("处理失败：" + Ajax.status);
}
}
}
//5.发送请求
var name = document.getElementById("name").value;
Ajax.send("name="+name);
三、jQuery中的Ajax
$.ajax()方法
$.ajax()方法用于执行Ajax异步请求。
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, \(.post 等。\).ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax()可以不带任何参数直接使用。
语法：
$.ajax({name:value, name:value, ... })
该参数规定Ajax请求的一个或多个名称/值对。下面的表格中列出了可能的名称/值：
| 名称 | 值 | 描述 |
|---|---|---|
| async | Boolean | 表示请求是否异步处理。默认true |
| beforeSend(xhr) | Function | 发送请求前运行的函数。 |
| cache | Boolean | 表示浏览器是否缓存被请求页面。默认true |
| complete(xhr,status) | Function | 请求完成时运行的函数（在请求成功或失败之后均调用，即在success和error函数之后） |
| contentType | String | 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded" |
| context | Object | 为所有AJAX相关的回调函数规定 "this" 值 |
| data | Object,String | 规定要发送到服务器的数据 |
| dataFilter(data,type) | Function | 用于处理XMLHttpRequest原始响应数据的函数 |
| dataType | String | 预期的服务器响应的数据类型。 text：返回纯文本字符串； json：返回JSON数据; "jsonp": JSONP 格式。 |
| error(xhr,status,error) | Function | 如果请求失败要运行的函数 |
| global | Boolean | 规定是否为请求触发全局AJAX事件处理程序。默认true |
| ifModified | Boolean | 规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认false |
| jsonp | String | 在一个jsonp中重写回调函数的字符串 |
| jsonpCallback | String | 在一个jsonp中规定回调函数的名称 |
| password | String | 规定在HTTP访问认证请求中使用的密码 |
| processData | Boolean | 规定通过请求发送的数据是否转换为查询字符串。默认true |
| scriptCharset | String | 规定请求的字符集 |
| success(result,status,xhr) | Function,Array | 当请求成功时运行的函数 |
| timeout | Number | 设置本地的请求超时时间（以毫秒计） |
| traditional | Boolean | 规定是否使用参数序列化的传统样式 |
| type | String | 规定请求的类型（GET或POST） |
| url | String | 规定发送请求的URL。默认是当前页面 |
| username | String | 规定在HTTP访问认证请求中使用的用户名 |
| xhr | Function | 用于创建XMLHttpRequest对象的函数 |
示例1：
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
示例2：
$.ajax({
url : "checkUsername",
type : "post",
dataType : "text",
data : "username="+$("#username").val(),
beforeSend : function(){
if($("#username").val()==""){
alert("用户名不能为空");
return false;
}
return true;
},
success : function(data){
alert(data);
}
});
$.get()方法
$.get()方法通过HTTP GET请求从服务器上请求数据。
语法：
$.get(URL,data,callback,type);
参数解析：
- URL：请求的路径地址，必需项
- data：发送Key/value请求参数
- callback：请求成功后所执行的回调函数
- type：返回内容格式，xml, html, script, json, text, _default
示例：
$.get("checkUsername",{ username : $("#username").val() },function(data){
alert(data);
});
$.post()方法
$.post()方法通过HTTP POST请求从服务器上请求数据。
语法：
$.post(URL,data,callback,type);
参数解析：
- URL：请求的路径地址，必需项
- data：发送Key/value请求参数
- callback：请求成功后所执行的回调函数
- type：返回内容格式，xml, html, script, json, text, _default
示例：
$.post("checkUsername",{ username : $("#username").val() },function(data){
alert(data);
});
$("#userName").blur(function(){
var userNameVal = $(this).val();
$.post("jqueryAjaxServlet",{userName:userNameVal},function(resp){
$("#userNameSpan").html(resp);
})
});
四、JSON
1. JSON简介
JSON：JavaScript Object Notation, JS对象表示法， 是一种轻量级的数据交换格式。
它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
2. JSON语法
在JS语言中，一切都是对象。因此，任何支持的类型都可以通过JSON来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：
- 对象
使用大括号{}包裹起来的内容，数据结构为{key1:value1,key2:value2,...}的键值对结构，key为对象的属性，value为对应的值。键名可以使用整数和字符串来表示，值的类型可以是任意类型。 - 数组
使用中括号[]包裹起来的内容，每个数组中可以包含多个对象
//对象
var person = {
name : "小明",
age : 22,
address : "郑州"
};
//数组
var array = [{
id : 1001,
name : "张三"
},{
id : 1002,
name : "李四"
}];
3. JSON与JS对象的关系
JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。
//这是一个对象，注意键名也是可以使用引号包裹的
var obj = {id: 1003, name: "王五"};
//这是一个JSON字符串，本质是一个字符串
var json = '{"id": 1004, "name": "赵六"}';
4. JSON和JS对象互转
JSON.parse()方法，可将JSON字符串转换为JS对象
var obj2 = JSON.parse('{"id": 1004, "name": "赵六"}');
alert(obj2.id);
alert(obj2.name);
JSON.stringify()方法，可将JS对象转换为JSON字符串
var json2 = JSON.stringify({id: 1003, name: "王五"});
alert(json2);
五、跨域
什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
广义的跨域：
1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
同源策略
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。
所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。
- http://localhost:8080/index.jsp访问http://localhost:8080/hello.jsp
协议、域名、端口号都相同，同源 - https://localhost:8080/index.jsp访问http://localhost:8080/hello.jsp
协议不同，非同源 - http://localhost:8080/index.jsp访问http://localhost:8081/hello.jsp
端口不同，非同源 - http://192.168.1.100:8080/index.jsp访问http://192.168.1.200:8080/hello.jsp
域名不同，非同源 - http://localhost:8080/index.jsp访问http://127.0.0.1:8080/hello.jsp
虽然localhost等同于127.0.0.1但是也是非同源的
同源策略限制的情况：
- Cookie、LocalStorage和IndexDB无法读取
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
-
DOM和Js对象无法获得
-
Ajax请求不能发送
注意：对于像 img、iframe、script等标签的src属性是特例，它们是可以访问非同源网站的资源的
跨域解决办法
JSONP方式
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，即一般的Ajax是不能进行跨域请求的。
但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，可以实现跨域请求数据，当然这需要服务器端的配合。
jQuery中Ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。
当正常地请求一个json数据的时候，服务端返回的是一串json类型的数据，而使用jsonp模式来请求数据的时候服务端返回的是一段可执行的JavaScript代码。因为jsonp跨域的原理就是用的动态加载script的src，所以我们只能把参数通过url的方式传递,所以jsonp的type类型只能是get方式。
JSONP跨域的原理：https://blog.csdn.net/badmoonc/article/details/82289252
在Ajax请求中添加dataType:"jsonp"选项：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,td{
border:1px solid black;
}
table{
width: 700px;
margin: 0 auto;
border-collapse: collapse;
}
tr{
height: 30px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<button id="btn1">查询所有用户数据</button>
<table id="tab1">
</table>
<script type="text/javascript">
//点击按钮,发送Ajax请求
$("#btn1").click(function(){
//通过jsonp实现跨域
$.Ajax({
url:"http://localhost:8080/day07/queryAllUser",
type:"GET",
dataType:"jsonp",
success:function(resp){ //我们以前通过非跨域处理,需要自己解析json字符串,但是跨域之后,付雨晴已经帮我们处理了这样的事情
for(var i in resp){
// 在js里面,使用增强for循环遍历数组,得到的是数组下标
var user = resp[i];
$("#tab1").append("<tr><td>"+user.id+"</td><td>"+user.userName+"</td><td>"+user.userPwd+"</td><td>"+user.sex+"</td><td>"+user.address+"</td></tr>");
}
}
});
})
</script>
</body>
</html>
发送请求后，在请求中自动带有callback=jQuery33104469872218175224_1559806985863请求参数。jsonp需要服务端的支持，具体表现为返回的数据为callback(json_data)的形式，即要返回回调函数包裹json数据的形式，而不是直接返回json数据。
