AJAX学习笔记
Posted 想成为大师啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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用户界面（增加B/S的体验性）
产品链：H5 + 网页 + 客户端 + 手机端（android，ios）+ 小程序
利用AJAX可以做：
- 注册时，输入用户名自动检测用户是否已经存在
- 登陆时，提示用户名密码错误
- 删除数据行，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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.getTime();
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://www.baidu.com/">
<input type="button" value="提交" onclick="loadPage()">
</p>
</div>
<div>
<h3>加载页面的位置:</h3>
<iframe style="width: 100%;height: 500px" id="iframePosition"></iframe>
</div>
</body>
</html>
纯JS实现AJAX不在这里讲解了，直接使用jQuery提供的，更方便学习，避免重复造轮子
Ajax的核心是XMLHttpRequest对象（XHR）。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
jQuery提供多个与Ajax有关的方法
通过jQuery Ajax方法，您能够使用HTTP Get 和 HTTP Post从远程服务器上请求文本、HTML、XML或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery不是生产者，而是大自然搬运工
jQuery Ajax本质就是XMLHttpRequest，对他进行了封装，方便调用！
以上是关于AJAX学习笔记的主要内容，如果未能解决你的问题，请参考以下文章