一步步理解ajax

什么是ajax?

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

但是现在这样扣字眼理解起来，实际上是很没有意义的，因为现在一般用json来传递数据。因此，ajax的一种更好的解释是:用js来实现页面的局部刷新。

AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

学习ajax，需要掌握的基础：

如何获取xhr对象？保证浏览器兼容性？
xhr.readyState的状态有几种？
open send responseText
配置各种参数
项目文件夹开启一个服务器

利用AJAX可以做：

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。（博客园）

先来个模仿ajax的东西！

Ajax伪造

iframe就是我们常用的iframe标签：<iframe>。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长宽高。

因此，iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>伪造ajax</title>
   <link rel="stylesheet" type="text/css" href="">
   <style>
   #myDiv{
         margin-bottom:20px;
   }
   </style>
</head>
<body>
    
    <div>
        <p>请输入要加载的地址：<span id="currentTime"></span></p>
        <p>
            <input type="text" id="url">
            <input type="button" value="提交" onclick="loadPage();"></input>
        </p>
    </div>
    <div>
        <h3>加载页面的位置:</h3>
        <iframe id="iframePosition" frameborder="0" style="width:100%;height:500px;"></iframe>
    </div>
    



    <script>
        window.onload = function(){
            var today = new Date();
            document.getElementById('currentTime').innerText = +today;
        };
        function loadPage(){
            var targetUrl = document.getElementById('url').value;
            document.getElementById('iframePosition').src = targetUrl;
        }
        
    </script>
</body>
</html>

View Code