Ajax学习第七天
Ajax学习第七天——CORS跨域资源共享及jQuery中$.ajax()的使用
第二种解决非同源数据的方案
CORS：Corss orgin resource sharing 即跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求，克服了Ajax只能同源使用的限制。
具体使用：需要在服务器端进行配置,客户端无需配置
服务器端代码如下：
app.get('/cross',(req,res) => {
// 1.允许哪些客户端访问我
// * 代表所有的客户端访问我
res.header('Access-Control-Allow-Origin','*');
// 2.允许客户端使用哪些方法访问我
res.header('Access-Control-Allow-Method','get,post');
});
第三种解决非同源数据的方案
同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制的，因此我们可以先将客户端的请求发送给自己的服务器端，由自己的服务器端与非同源的服务器端进行访问，拿到数据后，再将数据返回给自己的客户端，相当于在自己的客户端与非同源服务器端之间增加了一座桥梁，就是自己的服务器端。
本方法的提出要先了解Cookie的作用，最初的时候，客户端与服务器端使用HTTP协议进行连接，它们之间的连接是无状态的，即没有记录功能，相当于两端都互不认识，Cookie提出后，相当于一张它们的名片，使得客户端与服务器端彼此认识，这时他们彼此就可以互相访问了。
withCredentials属性
在使用Ajax技术发送跨域请求时，默认情况下不会再请求种携带Cookie信息，所以它们彼此的访问是不被允许的。此时，只需修改本属性的值为true即可，需要在客户端与服务器端都进行配置。
服务器端代码添加以下一行：
// 允许客户端发送跨域请求时携带Cookie信息
res.header('Access-Control-Allow-Credentials',true);
客户端代码添加以下一行：
// 当发送跨域请求时携带Cookie信息 默认值为false
xhr.withCredentials = true;
jQuery中 $.ajax() 的使用
jQuery中将Ajax已经封装好了，使用即可，其中有几个属性注意一下使用方式即可
-
ContentType： 表示发送数据的类型，默认为 application/x-www-form-urlencoded
-
data: 表示传入的数据，可以传对象，也可以传字符串，最终它都会把它转换为字符串处理
-
beforeSend:function(){} 表示在请求发送之前会调用此函数，可以放入等待缓冲的图片，提高用户体验
-
dataType:‘jsonp’ jQuery中的$.ajax()方法还可以发送jsonp请求，这点是比较方便的，有两个可选参数：
josnp:'cb'表示修改callback参数的名称 即向服务器端传递函数名字的参数名称jsonpCallback:'fnName'表示指定函数名称，此函数就代替了success那个参数的作用
serialize方法
在使用$.ajax()方法中，如果表单中的元素有很多，我们也需要自己拼接参数的格式，本方法与之前的FormData函数类似，不过FromData存在与HTML5中，有兼容性问题，所以在jQuery中，有此方法来替代
作用：将表单中的数据自动拼接成字符串类型的参数，有且只有这项功能
很多时候我们需要使用到字符串里某一些的值，这时我们将它转换为对象类型就很方便，但是jQuery中并没有相关的方法，所以这里我们把它封装好了，代码及使用场景如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="form">
<input type="text" name="username">
<input type="password" name="psw">
<input type="submit" value="提交">
</form>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$('#form').on('submit',function(){
// var result = $('#form').serialize();
// serializeObject(result);
serializeObject($(this));
return false;
})
// 将表单中用户输入的内容转换为对象类型
function serializeObject(obj){
// 处理结果对象
var Object = {};
// 将结果拼接成数组类型
var result = obj.serializeArray();
// 循环数组 将数组转换为对象类型
$.each(result,function(index,value){
Object[value.name] = value.value;
})
// 将处理的结果返回到函数外部
return Object;
}
</script>
</body>
</html>
全局事件
只要页面中有Ajax请求被发送，对应的全局事件就会被触发
.ajaxStart() //当请求开始发送时触发.ajaxComplete() //当请求完成时触发
注意 以上两个事件均需要绑定在 document 上
$(document).on('ajaxStart',function(){
})
以上两个全局事件可以结合NProgrss进度条插件(在页面的最上端有一个进度条可可以展示当前请求状态)，提升用户体验。
RESTful风格的API
概述：它是一套关于设计请求的规范
- GET：获取
- POST：添加
- PUT：更新
- DELETE：删除
例如：
- GET： www.example.com/users 获取用户列表数据
- POST: www.example.com/users 创建(添加)用户数据
- PUT：www.example.com/users/1 修改用户ID为1的用户信息
- DELETE：www.example.com/users/1 删除用户ID为1的用户信息
PUT和DELETE在传统表单中不支持，只有Ajax中支持，具体的要结合相关案例
XML基础
XML：extensible markup language 可扩展标记语言，作用是传输和存储数据
XML DOM：即XML文档对象模型，是W3C组织定义地一套操作XML文档对象的API，浏览器会将XML文档解析成文档对象模型
注：此类型的返回数据已经很少用了，了解即可。
