Ajax学习全套(最全最经典)

2019-09-14 06:56:32丽君

ajax简介

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

Ajax包括:

 •XHTML和CSS

•使用文档对象模型(Document Object Model)作动态显示和交互

 •使用XML和XSLT做数据交互和操作

 •使用XMLHttpRequest进行异步数据接收

利用AJAX可以做:

 •注册时,输入用户名自动检测用户是否已经存在。

 •登陆时,提示用户名密码错误

 •删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。

ajax伪造

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

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

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>伪造AJAX</title>
  </head>
  <body>
    <div>
      <p>请输入要加载的地址:<span id="currentTime"></span></p>
      <p>
        <input id="url" type="text" />
        <input type="button" value="提交" onclick="LoadPage();">
      </p>
    </div>
    <div>
      <h3>加载页面位置:</h3>
      <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
    </div>
    <script type="text/javascript">
      window.onload= function(){
        var myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.getTime();
      };
      function LoadPage(){
        var targetUrl = document.getElementById('url').value;
        document.getElementById("iframePosition").src = targetUrl;
      }
    </script>
  </body>
</html>

原理是这样的,设置一个提交按钮,再设置一个输入框,当我们输入一个网址的时候,在当前的页面加载输入网址的页面信息,呈现在iframe框里,这样就能做到不刷新URL来提交不同的信息。