一小时掌握Ajax
人生,一站有一站的风景,一岁有一岁的味道,你的年龄应该成为你生命的勋章而不是你伤感的理由。
什么是AJAX?
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。
Google Suggest 使用 AJAX 创造出动态性极强得 web 界面:当您在谷歌的搜索框输入关键字时,
JavaScript会把这些字符发到服务器,然后服务器会返回一个搜索建议的列表。
就和国内的百度的搜索框一样:
传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。
使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。
使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
C/S
增加B/S的体验性
B/S:未来的主流,并且会爆发式的持续增长;
产品链:H5 + 网页 + 客户端 + 手机端(Android、IOS)+ 小程序
利用AJAX可以做什么?
注册时,输入用户名自动检测用户是否已经存在。
登陆时,提示用户名密码错误。
删除数据行时,将行ID发送到后台,后台的数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
伪造Ajax
我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>伪造Ajax</title>
</head>
<body>
<script type="text/javascript">
window.onload = function f(){
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getFullYear() + '-' + myDate.getMonth() + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds();
}
function loadPage(){
var targetURL = document.getElementById('url').value;
console.log(targetURL);
document.getElementById('iframePosition').src = targetURL;
}
</script>
<div>
<p>请输入要加载的地址:<span id="currentTime"></span></p>
<p>
<input type="text" id="url" value="https://uland.taobao.com/">
<input type="button" value="提交" onclick="loadPage()">
</p>
</div>
<div>
<h3>
加载页面的位置:
</h3>
<iframe style="width: 100%;height: 500px" id="iframePosition">
</iframe>
</div>
</body>
</html>
jQuery Ajax
纯JS实现Ajax我们不去讲解,这里直接使用jQuery提供的,更方便学习,避免重复造轮子,有兴趣的同学可以去了解下本质XMLHttpRequest!
Ajax 的核心式XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
jQuery 提供多个与AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery 不是生产者,而是大自然的搬运工。
jQuery Ajax 本质就是 XMLHTTPRequest,对他进行了封装,方便调用!
使用jQuery需要先导入jQuery的js文件;点击 jQuery官网 下载
我们来看下他的方法;
Ajax总结
使用jQuery需要导入jQuery,使用Vue导入Vue,两个都不用,自己原生态实现
三部曲
- 编写对应处理的Controller,返回消息或者字符串或者json格式的数据;
- 编写ajax请求
- url:Controller请求
- data:键值对
- success:回调函数
- 给Ajax绑定事件,点击 click,失去焦点 onblur,键盘弹起 keyup