AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)
【前端|AJAX学习笔记】AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
AJAX不是一种新的编程语言,而是一种创建更好更快以及交互性更强的Web应用程序的技术
在2005年,Google通过其Google Suggest使AJAX变得流行起来。
Google Suggest使用AJAX创造出动态性极强的web界面:当您在谷歌的搜索框输入关键字时,JavaScript会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表
就和国内百度的搜索框一样:
文章图片
传统的网页(即不用Ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。使用Ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新
使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面(增加B/S的体验性)
产品链:H5 + 网页 + 客户端 + 手机端(Android,IOS)+ 小程序
利用AJAX可以做:
- 注册时,输入用户名自动检测用户是否已经存在
- 登陆时,提示用户名密码错误
- 删除数据行,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
伪造AJAX - 锐客网 type="text/javascript">
window.onload = function f() {
var myDate = new Date();
document.getElementById("currentTime").innerText = myDate.getTime();
}function loadPage() {
var targetURL = document.getElementById('url').value;
console.log(targetURL)
document.getElementById('iframePosition').src = https://www.it610.com/article/targetURL
}
请输入要加载的网址: id="currentTime">
加载页面的位置:
纯JS实现AJAX不在这里讲解了,直接使用jQuery提供的,更方便学习,避免重复造轮子
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
jQuery提供多个与Ajax有关的方法
通过jQuery Ajax方法,您能够使用HTTP Get 和 HTTP Post从远程服务器上请求文本、HTML、XML或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery不是生产者,而是大自然搬运工
jQuery Ajax本质就是XMLHttpRequest,对他进行了封装,方便调用!
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export