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

使用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修改这个名字

 

// 客户端修改传递的函数的名字 
<button id="btn">发送请求</button> <!-- 没有添加jsonp属性之前发送的请求是 "./js/jquery.min.js?callback=XXX "--> <!-- 使用了jsonp属性之后就可以写成 "./js/jquery.min.js?cb=XXX" --> <script src="./js/jquery.min.js"></script> <script> $(‘#btn‘).on(‘click‘, function(){ $.ajax({ url:‘/jsonp‘, // 向服务器端传递函数名字的参数名称 jsonp:‘cb‘, // 代表现在是发送jsonp请求 dataType:‘jsonp‘, success:function(response){ console.log(response); } }) }) </script>

 

// 服务器端修改
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()

<button id="btn">发送请求</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(‘#btn‘).on(‘click‘,function(){
            // 第一个参数是请求地址,
            // 第二个参数是一个对象,也可以是一个字符串,是向服务器端传递的请求参数,参数可选
            // 第三个参数是一个回调函数 其实就是success函数,请求成功后自动调用。函数的形参response就是服务器端返回的响应数据
            // $.get(‘/base‘, ‘name=zhangsan&age=14‘, function(response){
            //     console.log(response);
                
            // })

            $.post(‘/base‘, function(response){
                console.log(response);
                
            })
        })
    </script>

四、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. 引入相关文件

<link rel="stylesheet" href="js/nprogress/nprogress.css">

<script src="/js/nprogress/nprogress.js"></script>

 

2.

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

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

 

 

五、RESTful 风格的API

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

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

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

<body>
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        // 获取用户列表信息
        $.ajax({
            type:‘get‘,
            url:‘/users‘,
            success:function(response){
                console.log(response);
                
            }
        })

        // 获取id为1的用户信息
        $.ajax({
            type:‘get‘,
            url:‘/users/1‘,
            success:function(response){
                console.log(response);
                
            }
        })

        //删除id为1的信息
        $.ajax({
            type:‘delete‘,
            url:‘/users/1‘,
            success:function(response){
                console.log(response);
                
            }
        })

        // 修改
        $.ajax({
            type:‘put‘,
            url:‘/users/10‘,
            success:function(response){
                console.log(response);
                
            }
        })
    </script>
</body>

 

 

六、XML基础

XML:全称是extensible markup language,代表可扩展标记语言,它的作用是传输和存储数据

XML所有的标签都是开发者定义的,他用来存储和传输数据,关注于数据的内容

而HTML标签是有预定义的,它的用来展示数据的,关注于数据的外观

 

XML DOM:XML文档对象模型,是w3c组织定义的一套操作XML文档对象的api。浏览器会把XML文档解析成文档对象模型

 

如何把服务器端返回的XML类型的数据展示到HTML页面中?

    <button id="btn">发送请求</button>
    <div id="container"></div>
    <script type="text/javascript">
        var btn = document.getElementById(‘btn‘);
        var container = document.getElementById(‘container‘);

        btn.onclick = function(){
            var xhr = new XMLHttpRequest();
            xhr.open(‘get‘,‘/xml‘);
            xhr.send();
            xhr.onload = function(){
                // xhr.responseXML 获取服务器段返回的xml数据
                var xmlDocument = xhr.responseXML;
                var title = xmlDocument.getElementsByTagName(‘title‘)[0].innerHTML;
                container.innerHTML = title;
            }
        }
    </script>

 

通过 xhr.responseXML 获取服务器段返回的xml类型的数据

将该值赋值给信息的变量,新变量就可以像HTML一样,下面也有很多 getElementsByTagName、getElementsById等等这样的方法属性

但是xml类型的数据其实已经很少使用了,但需要了解

 

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

上一篇:AcWing1135 新年好(最短路+dfs)


下一篇:Delphi 开发 服务端 的Rest服务,使用的几种技术