实现网页与服务器之间的数据交互

最新推荐文章于 2026-02-27 11:16:44 发布

原创最新推荐文章于 2026-02-27 11:16:44 发布 · 5.3k 阅读

52 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

html

javascript

本文详细介绍了Ajax、jQuery中的Ajax方法、XMLHttpRequest对象以及axios库的使用，包括GET和POST请求的发起。此外，还探讨了JSONP作为跨域数据请求的解决方案。通过实例代码展示了各种方法的使用，帮助读者理解网页与服务器间的数据交互。

2、$.post()从服务器中获取数据 ✨

3、$.ajax()从服务器中获取和提交数据 ✨

二、XMLHttpRequest

2.1、什么是XMLHttpRequest？

4.2、如何实现跨域数据请求【JSONP】

通过一些方法能让我们轻松实现网页与服务器之间的数据交互，在学习这章节的同学们，可能会有点懵，方法很多，不急不急，今天就让我来为大家总结总结，同样都是打工人，但是你好我好才是真的好！

一、Ajax

1.1、什么是Ajax？

即异步的JavaScript和XML，是一种用于创建快速动态网页的技术；

传统的页面(不使用Ajax)如果需要更新内容，必须重加载整个网页面；使用Ajax则不需要加载更新整个网页，实现部分内容更新，

简单的理解就是：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax ，能让我们轻松实现网页与服务器之间的数据交互

Ajax典型运用场景：

用户名检测，注册用户时，通过ajax的形式，动态检测用户名是否被占用
搜索提示，当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表
数据的分页显示：当点击页码值的时候，通过ajax的形式，根据页码值刷新表格的数据
数据的增删改查

1.2、jQuery中的Ajax

jQuery对XMLHttpRequst进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度，也屏蔽了一些兼容性

jQuery中发起Ajax请求最常见的三个方法

1、$.get()从服务器中获取数据 ✨

语法：$.get( url,[data],[callback] )

参数：

url string类型要请求的资源地址
data object类型请求资源期间要携带的参数
callback function 请求成功时的回调函数

示例：

<button id="btnGET">发起带参数的GET</button>
    <script>
        $(function () {
            $('#btnGET').on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
                    console.log(res)
                })
            })
        })
</script>

效果图：

2、$.post()从服务器中获取数据 ✨

语法：$.post(url,[data],[callback])

参数：

url string类型提交数据的地址
data object类型要提交的数据
callback function函数数据提交成功时的回调函数

示例：

<script>
    $(function () {
      $('#btnPOST').on('click', function () {
        $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: 'hah', author: 'hah2', publisher: '天津图书出版社' }, function (res) {
          console.log(res)
        })
      })
    })
</script>

效果图：

3、$.ajax()从服务器中获取和提交数据 ✨

$.ajax()函数是一个功能比较综合的函数，他允许我们对Ajax请求进行更详细的配置

语法：

$.ajax({
method:' ' , //请求的方式，例如 GET 或 post
url：' ' , //请求的URL地址
data：{ } , //这次请求要携带的数据
success: function(res) { } //请求成功之后的回调函数
})

示例：

    <button id="btnGET">发起GET请求</button>
    <script>
        $(function () {
            $("#btnGET").on("click", function () {
                $.ajax({
                    type: "GET",
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {
                        id: 1,
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>

效果图：

二、XMLHttpRequest

2.1、什么是XMLHttpRequest？

简称xhr，是浏览器提供的Javascript对象，通过它，可以请求服务器上的数据资源，上面的Ajax就是基于xhr对象封装出来的

监听xhr.onreadystatechange事件，里面要注意的两个参数：

监听xhr对象的请求状态 readystate；
和服务器响应的状态 status

2.2、使用xhr发起get请求

步骤：

创建xhr对象
调用xhr.open()函数
调用xhr.send()函数
监听xhr.onreadystatechange事件【如果发起请求成功则返回请求的数据资源

示例：

<body>
    <script>
        //1、创建xhr对象
        var xhr = new XMLHttpRequest()
        //2、调用open函数
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
        //3、调用send函数
        xhr.send()
        //4、监听事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                //获取服务器响应的数据
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

效果图：

2.3、使用xhr发起post请求

步骤：

创建xhr对象
调用xhr.open()函数
设置Content-Type属性(固定写法)
调用xhr.send()函数，同时指定要发送的数据
监听xhr.onreadystatechange事件

示例：

    <script>
        // 创建xhr对象
        var xhr = new XMLHttpRequest()
        // 调用open()
        xhr.open('POST','http://www.liulongbin.top:3006/api/addbook');
        // 设置Content-Type属性（固定写法）
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        // 调用send函数
        xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
        // 监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState ===4 && xhr.status ===200) {
                console.log(xhr.responseText);
            }
        }
    </script>

效果图：

2.4、数据交换格式

从上面的效果图可以看出，所有的结果都是字符串的形式展示出来的，但是一般我们在运用其中的数据的时候，这个展示结果就不太直观，所有这里就要进行数据交换格式

数据交换格式就是服务器端和客服端之间进行数据传输与交换的格式；常见的两种数据交换格式是XML和JSON 其中前端用的最多的是JSON

接下来主要介绍的是JSON数据交换格式

2.4.1、JSON数据交换格式

概念：JSON 英文是JavaScript Object Notation,即 JavaScript对象表示法，简单来讲，JSON就是Javascript对象和数组的字符串表示法，它使用文本表示一个js对象或数组的信息。因此，JSON的本质是字符串
作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小、更快、更易解析
现状：JSON是在2001年开始被推广和使用的数据格式，到现在为止，JSON已经成为了主流的数据交换格式

两种结构：

1、对象结构

对象结构在JSON中表示为{ }扩起来的内容，数据结构为{key:value,key:value,....}的键值对结构。其中，key必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型，所有的字符串都是双引号表示

2、数组结构

数组结构在JSON中表示为[ ]扩起来的内容。数据结构[ ] 扩起来的内容。数据结构["java","javascript",30,true]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型

注意事项：

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON中不允许使用单引号表示字符串
JSON中不能写注释
JSON的最外层必须是对象或数组格式
不能使用undefined或函数作为JSON的值

2.4.2、JSON和JS对象的相互转换

JSON字符串转换为js对象

语法：JSON.parse()方法

var obj = JSON.parse('{"a":"Hello","b":"World"}')
输出结果是：{a:'Hello',b:'World'}

js对象转换为JSON字符串

语法：JSON.stringify()方法

var obj = JSON.stringify({a:'Hello',b:'World'})
输出结果是：{"a":"Hello","b":"World"}

三、axios

3.1、什么是axios

Axios是专注与网络数据请求的库
相比于原声的xhr对象，axios简单易用
相比于jQuery，axios更加轻量化，只专注于网络数据请求

3.2、使用axios发起GET请求

语法 axios.get('url',{params:{参数}}).then(callback)

示例：

注意⚠️ ： 要注意的是此时的res打印出来的所有数据不全是服务器响应的数据里面的data属性才是浏览器反馈的数据，其他的属性是axios封装的

 <button id="btn1">发起GET请求</button>
    <script>
        document.querySelector("#btn1").addEventListener('click', function () {
            var url = 'http://www.liulongbin.top:3006/api/get'
            //请求的参数对象
            var paramsObj = { name: 'zs', age: '20' }
            // 调用axios发起get请求
            axios.get(url, { params: paramsObj }).then(function (res) {
                console.log(res);
                //下面才是服务器返回的数据
                console.log(res.data);
            })
        })
   </script>

效果图：

3.2、使用axios发起POST请求

语法 axios.post('url',{参数}).then(callback)

示例：

 <button id="btn1">发起POST请求</button>
    <script>
        document.querySelector("#btn1").addEventListener('click', function () {
            var url = 'http://www.liulongbin.top:3006/api/post'
            //请求的参数对象
            var dataObj = { address:'北京',location:'海淀区' }
            // 调用axios发起get请求
            axios.post(url, {dataObj}).then(function (res) {
                // console.log(res);
                //下面才是服务器返回的数据
                console.log(res.data);
            })
        })
    </script>

效果图：

3.3、直接使用axios发起请求

类似于$.ajax()的函数

语法：

axios({
methos:'请求类型'
url:'请求的地址'
data:{POST数据}
params:{GET参数}
}).then(callback)

示例：

<body>
    <button id="btn3">直接使用axios发起get请求</button>
    <button id="btn4">直接使用axios发起post请求</button>
    <script>
        document.querySelector("#btn3").addEventListener('click', function () {
            var url = 'http://www.liulongbin.top:3006/api/get'
            var paramsData = { name: '钢铁侠', age: 18 }
            axios({
                method: 'GET',
                url: url,
                params: paramsData
            }).then(function (res) {
                console.log(res.data);
            })
        })
        document.querySelector("#btn4").addEventListener('click', function () {
            axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    name: '哇哈哈',
                    age: 18,
                    gender: '女'
                }
            }).then(function (res) {
                console.log(res.data);
            })
        })
    </script>
</body>

效果图：

四、JSONP

4.1、什么是JSONP？

JSONP：出现的早，兼容性好（IE兼容低版本IE），是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案，缺点是只支持GET请求，不支持POST请求

上面提到了一个跨域问题，那我们一起来了解了解

4.1.1、跨域

同源：两个页面的协议，域名和端口都相同，则两个页面具有相同的源，反正是跨域

同源策略：是浏览器提供的一个安全功能

出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互

浏览器对跨域请求的拦截

4.2、如何实现跨域数据请求【JSONP】

由于浏览器同源策略的限制，页面中无法通过Ajax请求非同源的接口数据，但是<script>标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本

JSON的实现原理，就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接受跨域接口响应回来的数据

JSONP与Ajax之间没有任何的关系属于js脚本的请求

参数说明：

发起JSONP的数据请求 dataType:'jsonp'
发送到服务器的参数名称，默认值为callback 修改：jsonp:'callback'
自定义的回调函数名称，默认值为jqueryxxx格式修改：jsonpCallback:'abc'

案例：

<body>
    <script>
        $(function(){
            $.ajax({
                url:'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
               //这个要发起JSONP的数据请求
                dataType:'jsonp',
                jsonp:'callback',
                jsonpCallback:'abc',
                success:function(res) {
                    console.log(res);
                }
            })
        })
    </script>
</body>

效果图：