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请求，这点是比较方便的，有两个可选参数：
1. josnp:'cb'表示修改callback参数的名称即向服务器端传递函数名字的参数名称
2. 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文档解析成文档对象模型
注：此类型的返回数据已经很少用了，了解即可。

来源：CSDN

作者：bagBean

链接：https://blog.csdn.net/qq_43709292/article/details/104187082

标签

ajax

第七天

cors