实现网页与服务器之间的数据交互 |
您所在的位置：网站首页 › 浏览器web服务器数据库之间的关系 › 实现网页与服务器之间的数据交互 |
实现网页与服务器之间的数据交互
|
目录 一、Ajax 1.1、什么是Ajax？ 1.2、jQuery中的Ajax 1、$.get()从服务器中获取数据 ✨ 2、$.post()从服务器中获取数据 ✨ 3、$.ajax()从服务器中获取和提交数据 ✨ 二、XMLHttpRequest 2.1、什么是XMLHttpRequest？ 2.2、使用xhr发起get请求 2.3、使用xhr发起post请求 2.4、数据交换格式 2.4.1、JSON数据交换格式 2.4.2、JSON和JS对象的相互转换 三、axios 3.1、 什么是axios 3.2、使用axios发起GET请求 3.2、使用axios发起POST请求 3.3、直接使用axios发起请求 四、JSONP 4.1、什么是JSONP？ 4.1.1、跨域 4.2、如何实现跨域数据请求 【JSONP】 通过一些方法能让我们轻松实现网页与服务器之间的数据交互 ，在学习这章节的同学们，可能会有点懵，方法很多，不急不急，今天就让我来为大家总结总结，同样都是打工人，但是你好我好才是真的好！ 一、Ajax 1.1、什么是Ajax？
即异步的JavaScript和XML，是一种用于创建快速动态网页的技术； 传统的页面(不使用Ajax)如果需要更新内容，必须重加载整个网页面；使用Ajax则不需要加载更新整个网页，实现部分内容更新， 简单的理解就是：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax ，能让我们轻松实现网页与服务器之间的数据交互 Ajax典型运用场景： 用户名检测，注册用户时，通过ajax的形式，动态检测用户名是否被占用搜索提示，当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表数据的分页显示：当点击页码值的时候，通过ajax的形式，根据页码值刷新表格的数据数据的增删改查 1.2、jQuery中的AjaxjQuery对XMLHttpRequst进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度，也屏蔽了一些兼容性 jQuery中发起Ajax请求最常见的三个方法 1、$.get()从服务器中获取数据 ✨语法：$.get( url,[data],[callback] ) 参数： url string类型 要请求的资源地址data object类型 请求资源期间要携带的参数callback function 请求成功时的回调函数示例： 发起带参数的GET $(function () { $('#btnGET').on('click', function () { $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) { console.log(res) }) }) })效果图： 语法：$.post(url,[data],[callback]) 参数： url string类型 提交数据的地址data object类型 要提交的数据callback function函数 数据提交成功时的回调函数示例： $(function () { $('#btnPOST').on('click', function () { $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: 'hah', author: 'hah2', publisher: '天津图书出版社' }, function (res) { console.log(res) }) }) })效果图：
$.ajax()函数是一个功能比较综合的函数，他允许我们对Ajax请求进行更详细的配置 语法： $.ajax({ method:' ' , //请求的方式，例如 GET 或 post url：' ' , //请求的URL地址 data：{ } , //这次请求要携带的数据 success: function(res) { } //请求成功之后的回调函数 }) 示例： 发起GET请求 $(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); } }) }) })效果图：
简称xhr，是浏览器提供的Javascript对象，通过它，可以请求服务器上的数据资源，上面的Ajax就是基于xhr对象封装出来的 监听xhr.onreadystatechange事件，里面要注意的两个参数： 监听xhr对象的请求状态 readystate；和服务器响应的状态 status 2.2、使用xhr发起get请求步骤： 创建xhr对象调用xhr.open()函数调用xhr.send()函数监听xhr.onreadystatechange事件 【如果发起请求成功则返回请求的数据资源示例： //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); } }效果图：
步骤： 创建xhr对象调用xhr.open()函数设置Content-Type属性(固定写法)调用xhr.send()函数，同时指定要发送的数据监听xhr.onreadystatechange事件示例： // 创建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); } }效果图：
从上面的效果图可以看出，所有的结果都是字符串的形式展示出来的，但是一般我们在运用其中的数据的时候，这个展示结果就不太直观，所有这里就要进行数据交换格式 数据交换格式就是服务器端和客服端之间进行数据传输与交换的格式；常见的两种数据交换格式是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封装的 发起GET请求 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); }) })效果图：
语法 axios.post('url',{参数}).then(callback) 示例： 发起POST请求 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); }) })效果图：
类似于$.ajax()的函数 语法： axios({ methos:'请求类型' url:'请求的地址' data:{POST数据} params:{GET参数} }).then(callback) 示例： 直接使用axios发起get请求 直接使用axios发起post请求 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); }) })效果图：
JSONP：出现的早，兼容性好（IE兼容低版本IE），是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案，缺点是只支持GET请求，不支持POST请求 上面提到了一个跨域问题，那我们一起来了解了解 4.1.1、跨域同源：两个页面的协议，域名和端口都相同，则两个页面具有相同的源，反正是跨域 同源策略：是浏览器提供的一个安全功能 出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互 浏览器对跨域请求的拦截
由于浏览器同源策略的限制，页面中无法通过Ajax请求非同源的接口数据，但是标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本 JSON的实现原理，就是通过标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接受跨域接口响应回来的数据 JSONP与Ajax之间没有任何的关系 属于js脚本的请求 参数说明： 发起JSONP的数据请求 dataType:'jsonp'发送到服务器的参数名称，默认值为callback 修改：jsonp:'callback'自定义的回调函数名称，默认值为jqueryxxx格式 修改：jsonpCallback:'abc'案例： $(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); } }) })效果图：
那么实现网页与服务器之间的数据交互的方法，我就总结到这里啦
|
【本文地址】
今日新闻 |
推荐新闻 |