首页
学习
活动
专区
工具
TVP
发布

前端Ajax技术原理

image.png Ajax的工作原理Ajax工作原理其实就是在一个页面的指定位置可以加载另一个页面中所有的输出内容。这样就实现了一个静态页面获取到数据库中所返回的数据信息了。...根据这样的原理所以Ajax实现了静态页面在不刷新整个页面的情况下与服务器通信,减少了用户的等待时间,增强用户体验的友好程度 image.png Ajax工作流程: Ajax通过XmlHttpRequest...image.png ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XHTML来表示。 2....ajax原理和XmlHttpRequest对象 Ajax原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。...要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。 XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术

59800

AJAX 工作原理

1.什么是 AJAX? AJAX 全称为“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),是一种创建交互式网页应用的网页开发技术。...3.AJAX 的工作原理 Ajax 的工作原理相当于在用户和服务器之间加了—个中间层(AJAX 引擎),使用户操作与服务器响应异步化。...并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎自己来做, 只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。...(5).综合 Ajax 引擎,实际上是一个比较复杂的 JavaScript 应用程序,用来处理用户请求,读写服务器和更改 DOM 内容。...Ajax 使 WEB 中的界面与应用分离(也可以说是数据与呈现分离),而在以前两者是没有清晰的界限的,数据与呈现分离的分离,有利于分工合作、减少非技术人员对页面的修改造成的 WEB 应用程序错误、提高效率

95010
您找到你想要的搜索结果了吗?
是的
没有找到

AJAX原理与步骤

HTML5学堂:而今,AJAX技术已经成为JavaScript的重要组成部分,提到AJAX,最核心的两个词语是“局部刷新”和“异步加载”。在本文当中,主要介绍AJAX是什么以及其操作的基本步骤。...AJAX是四个单词的简写,其中Asynchronous【发音:[eiˈsiŋkrənəs]】即异步的意思,异步的链接可以同时发起多个,并且不会阻止JS代码执行。...AJAX发展到现在,不但可以发起异步链接,也可以发起同步链接。只是异步相对同步用到的更多。...为何有了AJAXAJAX出现之前,注册是非常痛苦的一件事,当时互联网刚刚在中国兴起,网络下载速度普遍在十K出头,而且互联网产品都还不是很成熟,当时注册需要填非常多的没有用的项。...出于这样“糟糕”的用户体验影响,AJAX就横空出世了~~~ AJAX的基本步骤 1 创建请求 var xhr = new XMLHttpRequest(); 构造函数实例化 2 确定发送方式和地址 xhr.open

93460

你真正的了解AjaxAjax技术简述

Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。...Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来使用所有的这些技术,使得古老的B/S方式的Web开发焕发了新的活力,迎来了第二个春天...这对于Ajax技术的普及、降低 Ajax应用部署和维护的成本是非常重要的。 此外,随着浏览器的发展,更多的技术还会被添加进Ajax技术体系之中。...除了Ajax,还包括有Flash等等技术。 与1990年代末的DHTML相比,Ajax更加强调符合真正的Web标准的开发方式。Ajax对于现有的基于Web标准的技术的利用程度比 DHTML高出了很多。...除了上述这些公司之外,Google公司不可不提,因为正是他们率先采用Ajax技术建造出了一大堆非常出色的应用,才将Ajax技术引到了聚光灯下。

89540

Ajax技术详解(上)

背景知识介绍 01 - 背景知识引入 我们知道,在没有ajax技术之前,客户端若要与服务端进行数据交互,它的大概流程是:客户端发起一个http请求(也可能是其他的请求)然后处于等待状态,等到服务端将数据发送给客户端...很明显,完全可以,其实这就是一个ajax操作。...所以基于这些对用户不友好的操作,ajax技术横空出世。借用MDN上的一句话: ?...其实缓存在chrome中也不是特别严重,但是大家也都知道世界上有一个东西叫做IE6,我们还是得再某些情况下清一下缓存的,一句话说缓存的工作原理就是:它是根据url缓存的,换句话说,对于同一个url只缓存一次...进阶 01 - ajax的问题 //回调多次 $.ajax({ url:xxx, dataType:'json', success(data){ $.ajax({

1.9K20

Ajax工作原理及概述

Ajax AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。...工作原理 Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。...并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。...提高Web程序的性能 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。 缺点 破坏浏览器前进,后退按钮的正常 开发和调试工具缺乏。 对搜索引擎的支持比较弱。 破坏了程序的异常机制。...采用了ajax技术,真正url地址下面看到的和我在这个url地址下看到的内容是不同的 一些手持设备(如手机、PDA等)现在还不能很好的支持ajax

87020

Ajax技术全解(3)

Ajax技术全解 之三 Ajax适用场景 1.表单驱动的交互 传统的表单提交,在文本框输入内容后,点击按钮,后台处理完毕后,页面刷新,再回头检查是否刷新结果正确。...Ajax不适用场景 1.部分简单的表单 虽然表单提交可以从Ajax获取最大的益处,但一个简单的评论表单极少能从Ajax得到什么明显的改善。而一些较少用到的表单提交,Ajax则帮不上什么忙。...4.替换大量的文本 使用Ajax可以实现页面的局部刷新,但是如果页面的每个部分都改变了,为什么不重新做一次服务器请求呢? 5.对呈现的操纵 Ajax看起来像是一个纯粹的UI技术,但事实上它不是。...它实际上是一个数据同步、操纵和传输的技术。对于可维护的干净的web应用,不使用Ajax来控制页面呈现是一个不错的主意。...铭铭 收集 资料来源: Ajax技术开发应用

1.7K30

Ajax技术的优缺点

使用AJAX技术, 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。...javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。...n DWR的实现原理是通过反射,将java翻译成javascript,然后利用回调机制,从而实现了javascript调用Java代码 16,介绍一下Prototype的$()函数,$F()函数,$...类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。...事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。 AJAX的应用使用支持以上技术的web浏览器作为运行平台。

2.2K30

AJAX 原理与 CORS 跨域

作者:赵帅强 原文: https://segmentfault.com/a/1190000011549088 ajax作为前端开发必需的基础能力之一,你可能会使用它,但并不一定懂得其原理,以及更深入的服务器通信相关的知识...下面我们来聊一聊 ajax相关的东西,包括 xhr/xdr/ajax/cors/http的一部分内容,其中会抛弃一些被弃用的历史包袱,如IE6/7等。...Ajax的出现 2005年, JesseJamesGarrett提出了Ajax技术,其全称为 AsynchronousJavascriptandXML,Ajax的核心是 XMLHttpRequest对象...在此之前,其实这种技术已经存在并被一些人实现,但并没有流行也没有被浏览器支持。不过在此之后,IE5第一次引入 XHR对象,并支持 ajax技术,后续被所有浏览器支持。...Content-Type HTTP请求方法: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods Javascript高级程序设计 第21章(Ajax

1.2K21

Web前端-Ajax基础技术(下)

Web前端-Ajax基础技术(下) Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问。...Microsoft.XMLHTTP'); 模板引擎: artTemplate: https://aui.github.io/art-template/ art-template是一个简约,超快的模板引擎,采用作用域声明的技术来优化模板渲染速度....ajaxStop() 在ajax请求完成时执行一个处理函数 .ajaxSuccess() 绑定一个函数当ajax请求成功完成时执行 jQuery.ajax() 执行一个异步的http(ajax)请求...'; document.body.appendChild(script); jsonp原理: json是借助script标签发送跨域请求的技巧。...原理是在客户端借助script标签请求服务端的一个动态网页,服务端的这个动态网页返回一段带有函数调用的javascript全局函数调用的脚本,将原本需要返回给客户端的数据传递进去。

2.5K30

Ajax工作原理及实例「建议收藏」

3、ajax所包含的技术 ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。  1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。...4、ajax原理和XmlHttpRequest对象   Ajax原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面...要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。 XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。...并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。   现在,我们对ajax原理大概可以有一个了解了。...2、安全问题 技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

60710
领券