jQuery封装的ajax方法、发送jsonp请求、ajax全局事件、restful风格的api、获取XML数据

2021-03-07 19:31

阅读：383

标签：new als 功能二进制 example OLE ack 服务情况下

使用ajax技术发送请求代码比较繁琐，因此我们自己封装了ajax函数

但是在jQuery这个库中也封装了ajax方法，而且jQuery封装的方法要比我们自己封装的方法功能上更加强大

一、 $.ajax()

作用：发送ajax请求

$.ajax({
     type: ‘get‘,
     url: ‘http://www.example.com‘,
     data: { name: ‘zhangsan‘, age: ‘20‘ },
     contentType: ‘application/x-www-form-urlencoded‘,
     beforeSend: function () { 
         return false
     },
     success: function (response) {},
     error: function (xhr) {}
});

{
     data: ‘name=zhangsan&age=20‘
 }
//data也可以写成上面这种形式

contentType: ‘application/json‘

serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数

var params = $(‘#form‘).serialize();
// name=zhangsan&age=30

二、发送jsonp请求

jsonp请求就是属于get请求

$.ajax({
    url:‘‘,
    // 代表现在要发送的是jsonp请求
    dataType:‘jsonp‘,
    // 修改callback参数名称
    // 通过callback把函数名称传递给服务器端，有些不使用callback，使用其他的简写比如：cb
jsonp:‘cb‘,
    // 指定函数名称
jsonCallback:‘fnName‘,
    success:function(response){
        console.log(response);
    }
})

jsonp属性的使用

一般情况下调用$.ajax(), 向服务器端传递函数名字的参数名称，原来是callback，现在通过jsonp修改这个名字

// 客户端修改传递的函数的名字

// 服务器端修改
app.get(‘/jsonp‘, (req, res) => {
    // 接收客户端传递过来的函数名字
    const cb = req.query.cb;
    const data = cb+"({name:‘zhaoliu‘})";
    res.send(data);
})

jsonpCallback属性的使用

正常情况下，请求发送成功之后，就会调用success函数，但是如果不想调用success函数，可以添加jsonpCallback属性，属性值是函数名称，在发送请求之前定义好这个函数名称的函数，但是一般情况下这个函数使用不上的，使用success就可以了

 // response就是服务器端返回的数据形参
        function fn(response){
            console.log(response);
            
        }

        $(‘#btn‘).on(‘click‘, function(){
            $.ajax({
                url:‘/jsonp‘,
                // 向服务器端传递函数名字的参数名称，原来是callback，现在通过jsonp修改这个名字
                jsonp:‘cb‘,
                // 请求发送之后如果不想调用success函数，就使用jsonpCallback属性，数据返回之后就会调用这个函数
                jsonpCallback:‘fn‘,
                // 代表现在是发送jsonp请求
                dataType:‘jsonp‘,
                // success:function(response){
                //     console.log(response);
                    
                // }
            })
        })

serialize()和 new FormData()的区别

serialize()和FormData对象都可将表单数据序列化，后通过ajax异步提交，序列化表单就是将form表单中所有name属性序列化成KEY-VALUE的形式，提交到后台，后台以对象相应的字段接收

1.serialize()

　　serialize()是JQuery方法，必须依赖jQuery，可序列化表单值创建 URL 编码文本字符串，就是将表单数据以字符串的形式返回，在ssm框架中可通过对象直接接收数据。

缺点：只能序列化一般数据，文件上传则无法序列化，不支持文件二进制流提交。

2.FormData对象

　　FormData是HTML5对象，目前可兼容大多主流的浏览器，但不兼容低版本IE浏览器。

与普通的Ajax相比，使用FormData 的最大优点就是可以异步上传二进制文件。

　　通过ajax异步提交表单数据，可实现文件上传

来源： https://www.cnblogs.com/leafarmyarmy/p/10766923.html

ajax和jsonp的区别

ajax是通过创建ajax对象发送请求的，ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。

jsonp是通过创建script标签来发送请求的，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。

三、$.get()和$.post()

四、jQuery中ajax全局事件

目的：当页面中有ajax请求被发送时，我们需要给用户一个等待的提示，提示用户当前请求正在操作的过程中，但是尤其当网速比较慢的时候，这个需求比较有用。

在ajax请求参数中加入beforeSend属性可以解决这个问题，但是当页面中请求比较多的时候，我们要在每一个ajax请求中都加入这个，代码的重复率就比较高

ajax全局事件就可以解决这个问题

全局事件：只要页面中有ajax请求被发送，对应的全局事件就会被触发

.ajaxStart() // 当请求开始发送时触发
.ajaxComplete()  // 当请求完成时触发

全局事件需要绑定在$(document )身上

// 当页面中有ajax请求发送时触发
$(document).on(‘ajaxStart‘,function() {
    console.log(‘start‘);
})

// 当页面中有ajax请求完成时触发
$(document).on(‘ajaxStart‘,function() {
    console.log(‘complete‘);
})

NProgress进度条插件的使用

1. 引入相关文件

// 当页面中有ajax请求发送时触发
$(document).on(‘ajaxStart‘,function() {
    NProgress.start();   // 进度条开始运动             
})

// 当页面中有ajax请求完成时触发
$(document).on(‘ajaxComplete‘,function() {
    NProgress.done();  // 进度条结束运动
})

五、RESTful 风格的API

技术图片