ajax实战教程

ajax实战教程相关知识

• 【React 模仿大众点评 webapp】实战教程 - 文档目录总结

  总结所有章节的文档 【React.js模仿大众点评webapp】实战教程（1）搭建 webpack+React 开发环境 【React.js模仿大众点评webapp】实战教程（2）React 基础 【React.js模仿大众点评webapp】实战教程（3）React 性能优化方案 【React.js模仿大众点评webapp】实战教程（4）React-router 【React.js模仿大众点评webapp】实战教程（5）redux基础 【React.js模仿大众点评webapp】实战教程（6）使用fetch 【React.js模仿大众点评webapp】实战教程（7）开发首页 【React.js模仿大众点评webapp
• CMake实战教程

  CMake实战教程 前言 在学习CMake之前，一直都是自己在手敲Makefile文件，当项目的文件一旦多了起来，自己手动写Makefile就不是那么好玩了，也曾经了解了一下autotools，但是seeed的柱哥说有CMake这个东西，所以我就去学习了，也在网上搜过对比，下面的一句话让我果断放弃了autotools： CMake产生的晚，解决了很多autotools工具的问题 其实吧，简单来说CMake就是生成Makefile的自动化构建工具（自动生成Makefile文件，不需要我们自己写Makefile），引用一句官方的描述就是： CMake 是一个跨
• 【React.js模仿大众点评webapp】实战教程（6）使用fetch

  fetch 获取/提交数据，以及开发环境下的数据 Mock 源码地址： 购买实战课程后，在播放视频页面右侧可查看到章节源代码。 在 jQuery 开发时代，jQuery 已经为我们封装了非常优雅的 ajax 函数，并且针对各个浏览器都做了很好的兼容，非常棒。但是如果你用 React vue 或者 angular 去开发 webapp 时候，你还会再为了一个 ajax 去集成 jQuery 吗？这是一个问题。 另外一个问题，JavaScript 中的 ajax 很早之前就有一个诟病————复杂业务下的 callback 嵌套的问题。如
• git 入门教程之实战 git

  实战 git git 是一款分布式版本控制系统,可以简单概括: 不要把鸡蛋放在一个篮子里,你的一举一动都在监视中. 实战场景 你作为某项目的其中一员或者负责人,和小伙伴们一起开发,大家既有着各自分工互不干扰,也有着相互合作,最终每个人的劳动成果汇聚成最后的项目,愉快完成项目! 要求 理解 git 的工作流程,懂得实际工作中如何交流合作 掌握 git 常用操作,工具为我所有,进而提高工作效率 独当一面,最好能够独自解决使用git 过程中遇到的问题 主动分享经验,能够教会别人如何使用 git

ajax实战教程相关课程

• Django开发企业实战 面向就业/升职（中高级教程） 从实际需求分析开始，实现当今主流知识问答应用的功能，包括动态、文章、问答、私信、消息通知、搜索、个人中心，打造企业级知识问答网站，由此完整学习Python后端开发技术栈。从零开发到阿里云上线，讲解企业项目开发的全过程。

  讲师：Jack 高级 806人正在学习

• Ajax实战案例之列表渲染 本课程通过一个简单的例子，由浅入深，循序渐进的介绍了Ajax的相关概念、原理、实现方式和应用方法，了解Ajax开发模式与动态网站是如何制作的。感受Ajax对传统交互带来的优势，学习如何提升用户体验并完成复杂应用交互。课程涉及前端、前端模板、express、JSON、axios库等相关内容，是非常适合Ajax学习的入门课程。

  讲师：西门老舅 入门 6898人正在学习

• PHP+Mysql+Ajax实现分页 分页一直是一个强需求，本课程首先从MySQL的角度讲解了分页的实现，其次介绍了PHP如何原生操作MySQL，然后介绍了前端AJAX的使用，最后通过开发一个分页实例来串联之前所讲。希望大家通过对本课程的学习能更好的理解分页的原理以及如何通过PHP

  讲师：wulekong 中级 9045人正在学习

ajax实战教程相关教程

• Flask 项目实战 1: 功能介绍 在 Flask 教程的最后，讲解一个涉及多个 Flask 知识点的综合案例，一个功能完整的 Web 应用程序 —— 待做清单。该综合案例较大，将其分为 3 个部分：Flask 项目实战 1：功能介绍；Flask 项目实战 2：后端实现；Flask 项目实战 3：前端实现。本小节首先介绍了待做清单的功能，然后讲解了程序的总体结构。
• 课程导读 本系列是 MySQL 系列教程之一，源自一线资深 DBA 多年的实战经验总结和 MySQL 数据库的使用心得，基于 MySQL 官方版本，本系列共分为 《MySQL 入门教程》、以及《MySQL 进阶教程》两门教程，本教程是《MySQL 进阶教程》。下面我们来看下这两门教程的不同之处：MySQL 入门教程主要面向 MySQL 的初学者，介绍了 MySQL 的发展史、MySQL 的安装与配置、MySQL 的基础维护、MySQL 支持的数据类型、SQL 基础、常用函数等内容。如果你对 MySQL 基础掌握的不是很牢固的话建议你先去学习基础课程之后再来学习这门进阶教程。而这门进阶教程主要面向 MySQL 的 DBA 和开发人员，内容包括 MySQL 架构组成、MySQL 存储引擎、索引、锁、MySQL 事务、备份与恢复、MySQL 复制、高可用架构、监控、优化等内容。本教程内容实用丰富，通俗易懂，讲解由浅入深，还结合大量来自一线的工作案例，拥有较高的实战性和可操作性。本教程适合 MySQL 初学者、数据库管理人员、数据库开发人员及其他数据库从业人员阅读，同时也适合作为相关数据库培训机构的教材。
• 2. xpath 解析实战 lxml 是 Python 中的一个解析库，支持 HTML 和 XML 的解析，支持 XPath 解析方式，而且解析效率非常高。本节将安装该模块解析 html 文本并提取相应的数据。[store@server2 ~]$ sudo pip3 install lxmlWARNING: Running pip install with root privileges is generally not a good idea. Try `pip3 install --user` instead.Collecting lxml Downloading http://mirrors.cloud.aliyuncs.com/pypi/packages/55/6f/c87dffdd88a54dd26a3a9fef1d14b6384a9933c455c54ce3ca7d64a84c88/lxml-4.5.1-cp36-cp36m-manylinux1_x86_64.whl (5.5MB) 100% |████████████████████████████████| 5.5MB 82.9MB/s Installing collected packages: lxmlSuccessfully installed lxml-4.5.1我们先准备好素材，也就是要解析的 HTML 文档。为了更有代入感，我直接使用慕课网 wiki 页面的数据进行操作，获取数据的方式如下图所示：获取慕课网 wiki 页面的 HTML 数据最后保存到一个 test.html 文本，然后我们要准备一段 Python 代码：from lxml import etreetree = etree.parse('test.html', etree.HTMLParser(encoding='utf8'))def print_result(exp, results): print('xpath表达式为:{}，其匹配结果为:'.format(exp)) for res in results: print(res.strip()) print('')def test_xpath_expression(exp): results = tree.xpath(exp) print_result(exp, results)将这个 Python 文件命名为 test_xpath.py 和 test.html 放在同一级目录下：[store@server2 ~]$ lsshen test.html test_xpath.py接下来我们就可以进行激动人心的测试了，来完成一个简单的实验：慕课网 wiki 页面数据获取第一个实验的目标就是拿到 javascript 分类下的教程的三个数据：标题、总节数以及访问次数。通过 F12 查看相关的 HTML 结构，我们可以通过如下的 Xpath表达式获取相应的数据：Python 3.6.8 (default, Apr 2 2020, 13:34:55) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linuxType "help", "copyright", "credits" or "license" for more information.>>> from test_xpath import test_xpath_expression>>> exp1 = '//h2[@class="language-title"]/text()'>>> test_xpath_expression(exp1)xpath表达式为://h2[@class="language-title"]/text()，其匹配结果为:JavaScriptHTML & CSS服务器开发工具其他后端语言基础应用框架应用基础应用Python Web 开发MySQL接下来看一看元素的结构：javascript 专栏的节点结构可以看到 javascript 专栏标题是 h2 节点，这个节点同级下有一个 div，它下面的四个 div 节点正是那四个专栏。我们首先匹配下这四个专栏元素：>>> exp1 = '//h2[contains(text(), "JavaScript")]/following-sibling::div/div[@class="course-card"]'>>> test_xpath_expression(exp1)xpath表达式为://h2[contains(text(), "JavaScript")]/following-sibling::div/div[@class="course-card"]，其匹配结果为:<Element div at 0x7f7015bf8808><Element div at 0x7f700c656788><Element div at 0x7f700c6567c8><Element div at 0x7f700c656808>那么我们来进一步分析每个 div 内部如何得到教程标题、总节数以及访问次数这些数据：获取教程数据可以看到，在前面找到 div 节点的基础上在往下两层，找到 class 属性值为 text 的 div 节点，所有的数据都在这个节点中：标题：上面找到的 div 节点下的第一个 a 节点的文本值；教程总节数：上面找到的 div 节点下的第一个 p 节点下第一个 span 元素的文本值；总访问次数：上面找到的 div 节点下的第一个 p 节点下第二个 span 元素的文本值；这样我们就能进行写出提取相应数据的 Xpath 路径表达式了，测试如下：>>> exp1 = '//h2[contains(text(), "JavaScript")]/following-sibling::div/div[@class="course-card"]/child::div/div[@class="text"]/a[1]/text()'>>> test_xpath_expression(exp1)xpath表达式为://h2[contains(text(), "JavaScript")]/following-sibling::div/div[@class="course-card"]/child::div/div[@class="text"]/a[1]/text()，其匹配结果为:Javascript 入门教程TypeScript 入门教程Vue 入门教程Ajax 入门教程>>> exp2 = '//h2[contains(text(), "JavaScript")]/following-sibling::div/div[@class="course-card"]/child::div/div[@class="text"]/p/span[1]/text()'>>> test_xpath_expression(exp2)xpath表达式为://h2[contains(text(), "JavaScript")]/following-sibling::div/div[@class="course-card"]/child::div/div[@class="text"]/p/span[1]/text()，其匹配结果为:56小节38小节39小节9小节>>> exp3 = '//h2[contains(text(), "JavaScript")]/following-sibling::div/div[@class="course-card"]/child::div/div[@class="text"]/p/span[2]/text()'>>> test_xpath_expression(exp3)xpath表达式为://h2[contains(text(), "JavaScript")]/following-sibling::div/div[@class="course-card"]/child::div/div[@class="text"]/p/span[2]/text()，其匹配结果为:9832354736281800接下来我们整理下 Python 代码，将整个 wiki 页面上的教程都解析出来，并将数据整理成 json 格式。预期最后的结果应该是这样的：{ '前端开发': { 'JavaScript': [ {'title': 'JavaScript入门教程', 'total_chapters': 56, 'total_visited': 9001}, {...}, {...}, {...} ], 'HTML & CSS': [ ... ] } '服务端相关': { }, ...}这样的难度再次增加，其核心的获取数据的过程和上面一致。后面获取其他数据的结果过程不作分析，大家有兴趣仔细研究下代码，然后动手实操。话不多说，上代码：# 代码文件：test_xpath2.pyfrom lxml import etreedef get_direction_data(direction_tree): """ 获取一个方向下的课程数据 :return: """ direction_data = {} cards = direction_tree.xpath('.//div[@class="language-card"]') for card in cards: title = card.xpath('.//h2[@class="language-title"]/text()')[0] course_list = card.xpath('.//div[@class="course-card"]') courses = [] for course in course_list: course_title = course.xpath('.//div[@class="text"]/a[1]/text()')[0] course_total_chaps = course.xpath('.//div[@class="text"]/p/span[1]/text()')[0] course_total_visit_count = course.xpath('.//div[@class="text"]/p/span[2]/text()')[0] courses.append({ 'course_title': course_title.strip(), 'course_total_chaps': course_total_chaps.strip(), 'course_total_visit_count': int(course_total_visit_count.strip()) }) direction_data[title] = courses return direction_datadef get_all_data(): """ 解析慕课网wiki数据 :return: """ result = {} html = etree.parse('test.html', etree.HTMLParser(encoding='utf8')) directions = html.xpath('//div[@class="direction-con"]') for direction in directions: # 提取方向key,注意一定要有点号，表示从当前元素开始提取 direction_name = direction.xpath('./div[@class="title-con"][1]/text()') if direction_name: result[direction_name[0]] = get_direction_data(direction) return result运行的结果如下：[store@server2 ~]$ python3Python 3.6.8 (default, Apr 2 2020, 13:34:55) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linuxType "help", "copyright", "credits" or "license" for more information.>>> from test_xpath2 import get_all_dat>>> get_all_data(){'前端开发': {'JavaScript': [{'course_title': 'Javascript 入门教程', 'course_total_chaps': '56小节', 'course_total_visit_count': 9832}, {'course_title': 'TypeScript 入门教程', 'course_total_chaps': '38小节', 'course_total_visit_count': 3547}, {'course_title': 'Vue 入门教程', 'course_total_chaps': '39小节', 'course_total_visit_count': 3628}, {'course_title': 'Ajax 入门教程', 'course_total_chaps': '9小节', 'course_total_visit_count': 1800}], 'HTML & CSS': [{'course_title': 'CSS3 入门教程', 'course_total_chaps': '32小节', 'course_total_visit_count': 1512}, {'course_title': 'Less 入门教程', 'course_total_chaps': '22小节', 'course_total_visit_count': 364}, {'course_title': '雪碧图入门教程', 'course_total_chaps': '24小节', 'course_total_visit_count': 915}]}, '服务端相关': {'服务器': [{'course_title': 'Nginx 入门教程', 'course_total_chaps': '24小节', 'course_total_visit_count': 4500}, {'course_title': 'HTTP 入门教程', 'course_total_chaps': '16小节', 'course_total_visit_count': 456}, {'course_title': 'Docker 入门教程', 'course_total_chaps': '25小节', 'course_total_visit_count': 1067}, {'course_title': 'Shell 入门教程', 'course_total_chaps': '17小节', 'course_total_visit_count': 2060}, {'course_title': 'Linux 入门教程', 'course_total_chaps': '25小节', 'course_total_visit_count': 1430}], '开发工具': [{'course_title': 'Gradle 入门教程', 'course_total_chaps': '12小节', 'course_total_visit_count': 1121}, {'course_title': 'Vim 入门教程', 'course_total_chaps': '14小节', 'course_total_visit_count': 1491}, {'course_title': 'RESTful 规范教程', 'course_total_chaps': '13小节', 'course_total_visit_count': 1316}, {'course_title': 'Markdown 入门教程', 'course_total_chaps': '31小节', 'course_total_visit_count': 733}, {'course_title': 'Maven 入门教程', 'course_total_chaps': '17小节', 'course_total_visit_count': 155}, {'course_title': 'GitHub 入门教程', 'course_total_chaps': '9小节', 'course_total_visit_count': 261}], '其他后端语言': [{'course_title': 'C 语言入门教程', 'course_total_chaps': '45小节', 'course_total_visit_count': 1933}, {'course_title': 'Go 入门教程', 'course_total_chaps': '36小节', 'course_total_visit_count': 691}, {'course_title': 'Ruby 入门教程', 'course_total_chaps': '26小节', 'course_total_visit_count': 410}]}, 'Java': {'基础应用': [{'course_title': 'Java 入门教程', 'course_total_chaps': '39小节', 'course_total_visit_count': 5229}, {'course_title': 'Android 入门教程', 'course_total_chaps': '29小节', 'course_total_visit_count': 553}, {'course_title': '算法入门教程', 'course_total_chaps': '11小节', 'course_total_visit_count': 628}], '框架应用': [{'course_title': 'Spring Boot 入门教程', 'course_total_chaps': '25小节', 'course_total_visit_count': 4861}, {'course_title': 'Spring 入门教程', 'course_total_chaps': '21小节', 'course_total_visit_count': 850}, {'course_title': 'Hibernate 入门教程', 'course_total_chaps': '23小节', 'course_total_visit_count': 619}, {'course_title': 'MyBatis 入门教程', 'course_total_chaps': '23小节', 'course_total_visit_count': 895}]}, 'Python': {'基础应用': [{'course_title': 'Python 入门语法教程', 'course_total_chaps': '24小节', 'course_total_visit_count': 3617}, {'course_title': 'Python 原生爬虫教程', 'course_total_chaps': '19小节', 'course_total_visit_count': 2001}, {'course_title': 'Python 进阶应用教程', 'course_total_chaps': '29小节', 'course_total_visit_count': 726}], 'Python Web 开发': [{'course_title': 'Django 入门教程', 'course_total_chaps': '33小节', 'course_total_visit_count': 668}, {'course_title': 'NumPy 入门教程', 'course_total_chaps': '21小节', 'course_total_visit_count': 152}]}, '数据库': {'MySQL': [{'course_title': 'MySQL 入门教程', 'course_total_chaps': '32小节', 'course_total_visit_count': 3638}, {'course_title': 'SQL 入门教程', 'course_total_chaps': '47小节', 'course_total_visit_count': 2406}]}}是不是实现了预期效果？爬取网页，解析数据的过程和这个类似。掌握好今天的内容，你就已经掌握了爬虫的一个核心步骤。
• Consul 实战 上两小节我们介绍了 MGR 和 ProxySQL 的部署，接下来我们继续从实战角度，学习这套高可用架构的最后部分：Consul 实战。
• Vim 实战 这节我们会结合一个开发实战贯穿我们之前所学的 Vim 知识点。
• 实现 ajax function ajax(options) { const { url, method, data, params, success, error } = options; const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { // readyState为4的时候已接收完毕 if (xhr.readyState === 4) { // 状态码200表示成功 if (xhr.status === 200) { console.log(xhr.responseText); success.call(this, xhr.responseText); } else { console.log(xhr.status); error.call(this, xhr.status) } } }; // get 请求 if (method === 'get' || method === 'GET') { if (typeof params === 'object') { // params拆解成字符串 params = Object.keys(params).map(function (key) { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); } url = params ? `${url}?${params}` : url; xhr.open(method, url, true); xhr.send(); } // post 请求 if (method === 'post' || method === 'POST') { xhr.open(method, url, true); xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); xhr.send(JSON.stringify(params)); }}使用 promise 进行封装function ajax(url, method, params) { return new Promise((resolve, reject) => { // 创建XMLHttpRequest对象 const xhr = new XMLHttpRequest(); // 状态改变时的回调 xhr.onreadystatechange = function () { // readyState为4的时候已接收完毕 if (xhr.readyState === 4) { // 状态码200表示成功 if (xhr.status === 200) { resolve(xhr.responseText); } else { reject(xhr.status); } } }; // ... });}

ajax实战教程相关搜索

ajax android a href abap abap开发 abort absolutelayout abstractmethoderror abstracttablemodel accept access access教程 accordion accumulate acess action actionform actionlistener activity addeventlistener

查看更多慕课网实用课程