河南中医药大学：《Web前端开发》课程教学资源（项目实训）第五讲 数据交互开发

Web前端开发项目实训 第5讲:数据交互开发 18337149582/ fengshunlei@51xuewebcn 201712

Web前端开发项目实训 第5讲：数据交互开发 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12 1

2 本讲主要内容 口接口 ¤本课程数据交互接口 AAⅩ 口JS○N 口 JSONP

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 本讲主要内容  接口  本课程数据交互接口  AJAX  JSON  JSONP 2

3 1接口 ¤AP( Application Programming Interface,应用程序编程接口) 些预先定义的函数,目的是提供应用程序与开发人员基于某软件或 硬件得以访问一组例程的能力,而又无需访问源码,或理解內部工 作机制的细节。 百度百科

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.接口  API（Application Programming Interface,应用程序编程接口）是一 些预先定义的函数，目的是提供应用程序与开发人员基于某软件或 硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工 作机制的细节。 ——百度百科 3

4 1接口 口阿里云接口市场 ahttps://market.aliyun.com/1111promotion?utm_medium=text&u tm_source=baidu&utm_campaign =sjsc&utm_content=se_3696 16 口微信公众平台 ahttps://mp.weixinqq.com/ ¤微博开放平1 ahttp://open.weibocom/?sudaref=www.baidu.com&display=0& recode=6102

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.接口  阿里云接口市场 ◼ https://market.aliyun.com/1111Promotion?utm_medium=text&u tm_source=baidu&utm_campaign=sjsc&utm_content=se_3696 16  微信公众平台 ◼ https://mp.weixin.qq.com/  微博开放平台 ◼ http://open.weibo.com/?sudaref=www.baidu.com&display=0& retcode=6102 4

5 2.本课程数据交互接口 口AP文档 Web前开发顺目实训课程口 AP口调用示 公共接口 AP接口调用示例 顶目口 调用示例

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 2.本课程数据交互接口  API文档 5

6 2.本课程数据交互接口 口身份校验 Token,每个接口调用时,均需传递 Token参数。 参数 SenuM UserName string 姓名全拼 返回示例 event1+1° 返回参数说眼 event 结果,0:失败:1:成功 string

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 2.本课程数据交互接口  身份校验 ◼ Token，每个接口调用时，均需传递Token参数。 6

7 BAJAX 口什么是AAX? AJAX( Asynchronous Javascript And XML )=E JavaScript 和XM AJAⅩ是一种用于创建快速动态网页的技术。 ■通过在后台与服务器进行少量数据交换,AAX可以使网页实现 异步更新。这意味着可以在不重新加载整个网页的情况下,对网 页的某部分进行更新

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 3.AJAX  什么是AJAX？ ◼ AJAX （Asynchronous Javascript And XML）= 异步 JavaScript 和 XML。 ◼ AJAX 是一种用于创建快速动态网页的技术。 ◼ 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现 异步更新。这意味着可以在不重新加载整个网页的情况下，对网 页的某部分进行更新。 7

8 BAJAX 口 jQuery的AAX $. ajax( t url:http://www.url.com/api,7/请求的u1地址 ax //xml、html async //请求是否异步,默认为异步,这也是ajax重要特性 data alue”},//参数值 t ,//请求方式 beforeSend: function o( //请求前的处理 success: fund //请求成功时处理 }, complete: function o( //请求完成的处理 error: function ot

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 3.AJAX  jQuery的AJAX ◼ $.ajax 8

9 GET方法 请注意,查询字符串(名称/值对)是在GET请求的URL中发送的 /test/demo form. asp?namel=value1&name 2=value2 有关GET请求的其他一些注释 ·GET请求可被缓存 ·GET请求保留在浏览器历史记录中 ET请求可被收藏为书签 ·GET请求不应在处理敏感数据时使用 ·GET请求有长度限制 GET请求只应当用于取回数据 PoST方法 请注意,查询字符串(名称/值对)是在POST请求的HTTP消息主体中发送的 Post /test/demo form asp Http/1.1 Host: w3schools. com name l=value1&name2=value2 有关POST请求的其他一些注释 ·POST请求不会被缓存 POsT请求不会保留在浏览器历史记录中 ·PoST不能被收藏为书签 POST请求对数据长度没有要求

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 9

10 BAJAX 口 jQuery的AAX $get 使用GET方式来进行异步请求 http:// 青藤园’, 1, functio ata, state) /这里显示从服务器返回的数据 alert( data /这里显示返回的状态 alert( state )

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 3.AJAX  jQuery的AJAX ◼ $.get 使用GET方式来进行异步请求 10