Ajax

AjaxAsynchronous Javascript And XML(异步JavaScript和XML)。

Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,这使得程序能够更快地回应用户的操作。

Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的web应用程序的技术。

C/S(Client/Server)即"客户端/服务器"模式

增加B/S的体验性

B/S(Browser/Server)即"浏览器/服务器"模式:未来的主流


在2005年。Google通过其Google Suggest使Ajax变得流行起来。

Google Suggest使用Ajax创造出动态性极强的web界面:当你在谷歌的搜索框输入关键字时,JavaScript会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。


传统的网页(即不用Ajax技术的网页),想要更新内容或者提交一个表单都需要重新加载整个网页。

使用Ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。

使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的web用户界面。


利用Ajax可以做:

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

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

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


使用前端标签来伪造Ajax。iframe标签:

 <!DOCTYPE html>
 <html>
  <head>
  <meta charset="UTF-8">
  <title>伪造Ajax</title>
  </head>
  <script type="text/javascript">
  function loadpage(){
  var targetUrl=document.getElementById('url').value;
  document.getElementById('iframePosition').src=targetUrl;
  }
  </script>
  <body>
  <div>
  <p>请输入要加载的网址:</p>
  <p>
  <input type="text" id="url" value="https://www.bilibili.com/video/BV1Kt411u7BV/?spm_id_from=autoNext"/>
  <input type="button" value="提交" onclick="loadpage()"/>
  </p>
  </div>
  <div>
  <h3>加载页面的位置:</h3>
  <iframe style="width: 100%;height: 600px;" id="iframePosition"></iframe>
  </div>
  </body>
 </html>
 ​
 $.ajax({
  url:待载入页面的url地址(json字符串),
  type:请求方式('get','post'),
  dataType: 传回到客户端的数据格式"json",
  data:待发送的key/value参数,
  success:载入成功时回调函数function(data--封装了服务器返回的数据,status--状态){
  ...
 }
 });

day03-了解ajax的更多相关文章

  1. 前端复习之Ajax,忘完了

    1 * Day01: 2 * Ajax 3 * Asynchronous JavaScript and XML 4 * 直译中文 - JavaScript和XML的异步 5 * (不严格的定义)客户端 ...

  2. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  3. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  4. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  5. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  6. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  7. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  8. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  9. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  10. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

随机推荐

  1. tf.metrics 使用过程中发现的一些问题

    起因是看到了这么一个帖子: http://www.cocoachina.com/cms/wap.php?action=article&id=86347 简短来说就是下面的代码   运行起来结果 ...

  2. python之理解super及MRO列表 ( 示例版 )

    例子   1: class A0: def pri(self): super().pri() print("A0") class A1(A0): def pri(self): su ...

  3. 【转载】 Linux Hang Task 简介

    原文地址: https://gohalo.me/post/linux-kernel-hang-task-panic-introduce.html --------------------------- ...

  4. 域名所有权验证 —— DNS TXT 域名验证

    参考: https://help.aliyun.com/zh/cdn/getting-started/verify-the-ownership-of-a-domain-name https://blo ...

  5. 首次配置成功rllab运行环境,给出anaconda下的配置

    name: rllab channels: - defaults dependencies: - _libgcc_mutex=0.1=main - _openmp_mutex=5.1=1_gnu - ...

  6. 2022 CCF推荐会议列表(国际会议列表)

    2019年版本的CCF推荐会议和期刊: https://www.ccf.org.cn/Academic_Evaluation/By_category/2022-12-02/780280.shtml 2 ...

  7. 用DolphinScheduler轻松实现Flume数据采集任务自动化!

    转载自天地风雷水火山泽 目的 因为我们的数仓数据源是Kafka,离线数仓需要用Flume采集Kafka中的数据到HDFS中. 在实际项目中,我们不可能一直在Xshell中启动Flume任务,一是因为项 ...

  8. CF1697C

    C. awoo's Favorite Problem 首先,检查两个字符串中所有字母的计数是否相同. 然后考虑下面的重述.字符串s中的字母 b是静止的.而字母a和c则在字符串中移动.第一种移动是将字母 ...

  9. curl可以访问虚拟机资源,但是宿主机浏览器不能访问

    如果想从宿主机访问到虚拟机内的php,需要关闭宿主机的代理,并且设置虚拟机内的防火墙不要屏蔽宿主机的ip. 设置虚拟机防火墙方法: 查找宿主机IP:win+r,输入ipconfig 打开虚拟机,输入s ...

  10. Linux 上的 AppImage、Snap、Flatpak 之间的区别和联系

    AppImage.Snap 和 Flatpak 是三种用于在 Linux 系统上分发和安装软件的包管理格式.它们都有助于解决软件依赖问题,使得应用程序可以在不同的 Linux 发行版上更容易地安装和运 ...