Ajax --- 客户端与服务器端之间传递数据
Ajax的初步了解:
- AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
- AJAX 优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
- AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行。
Ajax的关键元素:
- JavaScript语言:Ajax技术的主要开发语言
- XML / SON / HTML等:用来封装请求或响应的数据格式
- DOM文档对象模型:通过 DOM 属性或方法修改页面元素,实现页面局部刷新
- CSS:改变样式,美化页面效果,提升用户体验
- Ajax 引擎 :即 XMLHttpRequest 对象,以异步方式在客户端与服务器端之间传递数据
我们通常使用 JQuery 来实现 Ajax,直接使用 $.ajax()方法:
- 前提:要引入 JQuery 依赖,浏览器搜索JQuery cdn 选择百度的即可。
- 这样的优点:可以通过发送 HTTP请求加载远程数据,是 jQuery 最底层的 Ajax 实现,具有较高灵活性。
例子:博客系统 blog_list 中的代码修改 (注意代码注释)
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="js/app.js"></script><script>//从服务器获取数据发送 ajaxfunction getBlogs() {$.ajax({type: 'get',//请求的方法是geturl: 'blog',//请求的URL是blog 对应后端 @WebServlet("/blog");// 获取成功, 则 body 就是一个 js 对象数组. 每个元素就是一个博客success: function (body) {let container = document.querySelector('.container-right');for (let blog of body) {//遍历,和java中的for-each类似//每个 clss=blog 的div 就是一个博客let blogDiv = document.createElement('div');blogDiv.className = 'blog';//构造博客标题let titleDiv = document.createElement('div');titleDiv.className = 'title';//构造博客日期let dateDiv = document.createElement('div');dateDiv.className = 'date';//构造博客摘要 desclet descDiv = document.createElement('div');dateDiv.className = 'desc';//构造查看全文按钮let a = document.createElement('a');a.href = 'blog_detail.html?blogId=' + blog.blogId;//这里表示 如果blogID为null则返回博客列表,如果有id则返回一个博客的详情页a.innerHTML = '查看全文 >>';//>是一个转义字符 表示 '>'//拼装并获得最终结果blogDiv.appendChild(titleDiv);blogDiv.appendChild(dateDiv);blogDiv.appendChild(descDiv);blogDiv.appendChild(a);container.appendChild(blogDiv);//把这个准备好的博客放到 container 中}}});}</script>
Ajax --- 客户端与服务器端之间传递数据相关推荐
- android 不同activity之间传递数据
1> 不同activity之间传递数据: Intent intent=new Intent(); intent.setClass(activity1.this,activity2.class); ...
- Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析 挂载点: Vue实例的el属性对应的id,vue只会 ...
- 在视图控制器之间传递数据
我是iOS和Objective-C以及整个MVC范例的新手,但我坚持以下几点: 我有一个充当数据输入表单的视图,我想给用户选择多个产品的选项. 这些产品在另一个带有UITableViewControl ...
- 不同Activity之间传递数据--Bundle对象和startActivityForResult方法的实现
首先,由于Activity是Android四大组件之一,如果一个应用程序中包含不止一个Activity,则需要在AndroidManifest.xml文件中进行声明. 例如进行如下的声明(程序中包含两 ...
- iphone 使用委托(delegate)在不同的窗口之间传递数据
iphone 使用委托(delegate)在不同的窗口之间传递数据 在IOS里两个UIView窗口之间传递参数方法有很多,比如 1.使用SharedApplication,定义一个变量来传递. 2.使 ...
- vue.js 组件之间传递数据 1
vue.js 组件之间传递数据 框架 浏览数:437 2017-8-21 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据 ...
- android 活动传递数据,如何在Android应用程序的“活动”之间传递数据?
我有一种情况,在通过登录页面登录后,每个activity上都会有一个退出button . 点击sign-out ,我将传递已登录用户的session id以便退出. 谁能指导我如何使session i ...
- 用WM_COPYDATA消息来实现两个进程之间传递数据
文着重讲述了如果用WM_COPYDATA消息来实现两个进程之间传递数据. 进程之间通讯的几种方法: 在Windows程序中,各个进程之间常常需要交换数据,进行数据通讯.常用的方法有 1.使用内存映 ...
- android客户端从服务器端获取json数据并解析的实现代码
2019独角兽企业重金招聘Python工程师标准>>> 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection 代码如下: /** * 从指定的URL中获取 ...
最新文章
- java扫描注解_使用Spring Java注释扫描
- 第 8 章 容器网络 - 051 - 在 overlay 中运行容器
- php设计模式之——建造者模式
- hdu4699-Editor【对顶栈】
- python 混淆矩阵_新手常见的5个Python错误
- 正则表达式查找字符串_如何简单理解正则表达式?只需1分钟就可以看到她优美的舞姿...
- 4K视频在线看,网速跟不上怎么办?
- Scala:函数式编程之下划线underscore
- Raki的读paper小记:Code and Named Entity Recognition in StackOverflow
- PyQt5-网格布局(QGridLayout)-10
- 2D制图实战之仿QQ截图工具
- tracker服务器包含什么信息,tracker服务器
- java sql简易注入测试
- MATLAB时域频域波形显示GUI
- mysql汽车租赁管理系统
- Deep Adversarial Decomposition: A Unified Framework for Separating Superimposed Images
- Matlab textscan
- HDU/4585/ Shaolin STL中map应用
- 如何去掉网页一直点击出现蓝色背景的效果
- Unit 2, TCP header recap