ajax请求原理,AJAX的原理—如何做到异步和局部刷新
ajax请求原理,AJAX的原理—如何做到异步和局部刷新详细介绍
本文目录一览： ajax原理是什么
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
扩展资料：
Ajax这个术语源自描述从基于 Web 的应用到基于数据的应用。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
Ajax可使因特网应用程序更小、更快，更友好。
Ajax 是一种独立于 Web 服务器软件的浏览器技术。 Ajax 基于下列 Web 标准：
JavaScript、XML、HTML与 CSS 在 Ajax 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。Ajax 应用程序独立于浏览器和平台。
Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。
不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。通过 Ajax，因特网应用程序可以变得更完善，更友好。
参考资料：百度百科-ajax（Ajax 开发）
Ajax的工作原理是什么？
【答案】：您好！Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
Ajax的工作原理：相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
ajax的工作原理是什么（附图解）
本篇文章主要和大家讲述ajax的工作原理，具有一定参考价值，感兴趣的朋友可以了解一下，希望对你有所帮助。 Ajax指Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。而实现的原理基础就是：网页DOM对象可以精确地对网页中的部分内容进行操作、XML作为单纯的数据存储载体使得客户端与服务器交换的只是网页内容的数据而没有网页样式等等的附属信息、XMLHttpRequest是与浏览器本身内置的request相互独立的与服务器交互的请求对象。 网页应用Ajax与服务器交互的抽象过程如下图： 过程详解： 1： 要使用Ajax技术，基础中的基础，就是要创建一个XMLHttpRequest对象，无它就没有异步传输的可能：var xmlhttp;if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 2：在网页中为某些事件的响应绑定异步操作：通过上面创建的xmlhttp对象传输请求、携带数据。在发出请求前要先定义请求对象的method、要提交给服务器中哪个文件进行请求的处理、要携带哪些数据、是否异步。 其中，与普通的request提交数据一样，这里也分两种方法：GET/POST xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",); xmlhttp.send();xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Henry&lname=Ford"); 3：服务器收到请求后，把附带的数据作为输入传给处理请求的文件，例如这里：把fname=Henry&lname=Ford作为输入，传给 /try/ajax/demo_get2.php 这个文件。然后文件根据传入的数据做出处理，最终返回结果，通过response对象发回去。客户端根据xmlhttp对象来获取response内容，然后调用DOM对象根据response内容来局部修改网页内容。xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功 { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容 } 其中，response的类型有两种：字符串类型和XML文本。两种回应的不同提取如下：responseText 属性返回字符串形式的响应：document.getElementById("myp").innerHTML=xmlhttp.responseText;如果来自服务器的响应是 XML，需要作为 XML 对象进行解析，使用 responseXML ：xmlDoc=xmlhttp.responseXML; //获取服务器响应的XML文本并转换得到XMLDOM对象txt="";x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容for (i=0;i
<x.length;i++) {txt="txt" + x[i].childnodes[0].nodevalue "
"; } document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去 相关教程：ajax视频教程
ajax请求原理
望采纳
一、Ajax原理是什么
AJAX全称(Async Javascript and XML)，即异步的JavaScript 和XML
是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面
流程图如下：
校长想找班主任汇报工作，就委托秘书去叫班主任自己就接着做其他事情，直到秘书告诉他班主任已经到了，最后班主任跟领导汇报工作
Ajax请求数据流程与“校长想找班主任汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，校长相当于浏览器，响应数据相当于班主任
浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作
二、实现过程
实现Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：
建 Ajax的核心对象 XMLHttpRequest对象
通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
构建请求所需的数据内容，并通过XMLHttpRequest对象的 send() 方法发送给服务器端
XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
接受并处理服务端向客户端响应的数据结果 将处理结果更新到 HTML页面中
2.1创建XMLHttpRequest对象
通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象
const xhr = new XMLHttpRequest();
1
2.2与服务器建立连接
通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接
xhr.open(method, url, [async][, user][, password])
1
参数说明：
method：表示当前的请求方式，常见的有GET、POST
url：服务端地址
async：布尔值，表示是否异步执行操作，默认为true
user: 可选的用户名用于认证用途；默认为null
password: 可选的密码用于认证用途，默认为null
2.3给服务端发送数据
通过 XMLHttpRequest 对象的 send() 方法，将客户端页面的数据发送给服务端
xhr.send([body])
1
body: 在 XHR 请求中要发送的数据体，如果不传递数据则为 null 如果使用GET请求发送数据的时候，需要注意如下：
将请求数据添加到open()方法中的url地址中
发送请求数据中的send()方法中参数设置为null
2.4绑定onreadystatechange事件
onreadystatechange 事件用于监听服务器端的通信状态，主要监听的属性为XMLHttpRequest.readyState ,
关于XMLHttpRequest.readyState属性有五个状态，如下图显示：
只要readyState属性值一变化，就会触发一次readystatechange事件
XMLHttpRequest.responseText属性用于接收服务器端的响应结果
举个例子：
const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
if(request.readyState === 4){ // 整个请求过程完毕
if(request.status >= 200 && request.status <= 300){
console.log(request.responseText) // 服务端返回的结果
}else if(request.status >=400){
console.log("错误信息：" + request.status)
}
}
}
request.open('POST','
request.send()
三、封装
通过上面对XMLHttpRequest对象的了解，下面来封装一个简单的ajax请求
//封装一个ajax请求
function ajax(options) {
//创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
//初始化参数的内容
options = options || {}
options.type = (options.type || 'GET').toUpperCase()
options.dataType = options.dataType || 'json'
const params = options.data
//发送请求
if (options.type === 'GET') {
xhr.open('GET', options.url + '?' + params, true)
xhr.send(null)
} else if (options.type === 'POST') {
xhr.open('POST', options.url, true)
xhr.send(params)
//接收请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let status = xhr.status
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML)
} else {
options.fail && options.fail(status)
}
}
}
}
使用方式如下：
ajax({
type: 'post',
dataType: 'json',
data: {},
url: '
success: function(text,xml){//请求成功后的回调函数
console.log(text)
},
fail: function(status){请求失败后的回调函数
console.log(status)
}
})
ajax及实现原理是什么？
【答案】：Ajax的核心是JavaScript对象XmlHttpRequest，它使您可以使用JavaScript向服务器提出请求并处理响应， 而不阻塞用户，异步请求。
Ajax是什么？工作原理是什么？
Ajax和服务器端技术毫不相关；DOM模型是Ajax最本质的技术；在使用Ajax控件前理解它们的实现；学好JavaScript ；Ajax点缀：CSS 。 观点一：Ajax和服务器端技术毫不相关 严格的说，与传统web开发相比，Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程，因此很多问题也因通信而起。事实上，不论何种Ajax技术，服务器端都是返回的一个纯文本流，再由客户端来处理这个文本。这段文本可以是xml格式，也可以是一个Html片段，也可以是一段JavaScript脚本，或者仅是一个字符串。服务器端仅仅是作为一个数据接口，客户端使用XMLHttpRequest对象来请求这个页面，服务器端在页面内写入结果文本，这个过程和普通的web开发没有任何区别。所不同的只是，客户端在异步获取结果后，不是直接显示在页面，而是由客户端的Javascript脚本处理后再显示在页面。至于各种控件所谓的能返回DataSet对象，Date对象，或者其他的数据类型，都是封装了这个处理过程的结果。 观点二：DOM模型是Ajax最本质的技术 之所以没有把XMLHttpRequest列为最本质的技术，因为本人觉得它实在是太简单了，它只是可以让浏览器在后台请求一个页面，并将其内容交给JavaScript处理。真正的核心应该是：DOM模型，即文档对象模型。在DOM模型里，Html标记都被认为是一个对象，例如：div对象，table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质，可以对一个已经显示于浏览器的页面进行内容的修改，例如增加节点、修改节点位置，删除节点等等。而不仅仅是一个innerHTML属性这么简单，虽然这是一个很有用的属性。 观点三：在使用Ajax控件前理解它们的实现 使用Ajax控件的确可以提高效率，但如果你空中楼阁般使用控件，那就得不偿失了。从一个控件换到另外一个控件又会有一个漫长的学习曲线。所以应该从底层了解其，况且Ajax实在不是什么高深的技术。其实任何东西的最底层其实都是简单的，但如果封装了这些底层的东西，事情会变得复杂和难以理解。以Asp.net为例，它的定制特性可以使得只要在方法前加上[ajax method]类似这样的标志就可以称为一个异步方法，相信这使得Asp.net的Ajax开发显得更加“高效”或者是“神秘”，而更多的事情则被封装了。同样记住一条，任何对服务器端的请求仅仅是返回纯文本，我们不一定要依赖于封装好的处理过程，而完全可以自己来实现。 观点四：学好JavaScript 在大多数人看来，JavaScript总不是那么一种正规的语言，随便copy一段就碰巧能运行，学过c之类的人，一看也能看懂，而且在浏览器中常常有脚本错误提示，所以潜意识觉得总不能付之以大任。事实上，要学好Ajax，这就完全是一种错误的看法。javascript作为一种脚本语言，其语法的确不是很严格，但并不妨碍其完成诸多复杂的任务，没有JavaScript，就没有Ajax。所以本人强烈建议，学Ajax前，一定要好好研究一番JavaScript，一般来讲，如果能顺利看懂prototype框架的代码（如：prototype-1.3.1.js），你的JavaScript水平就基本过关了。同时对DOM模型也可以算有一个基本的了解。 观点五：Ajax点缀：CSS 用JavaScript控制CSS其实很简单，基本上每个DOM对象都有一个style对象，只要把css属性里的"-"去掉，并让随后的字母变为大写就可以作为属性使用了，例如：element.style.backgroundColor="#f00";在css是：选择符 {background-color:#f00}
Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。
虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。
通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：
BackPack
Google Suggest
Google Maps
PalmSphere
所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。
定义Ajax
Adaptive Path公司的Jesse James Garrett这样定义Ajax：
Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：
基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XMLHttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。
Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：
动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。
AJAX的原理—如何做到异步和局部刷新
如何做到异步和局部刷新？下面小编就为大家带来一篇AJAX的原理—如何做到异步和局部刷新。现在分享给大家，也给大家做个参考。Overriew： onReadyStateChange被回调函数赋值，则能实现异步调用，回调函数直接操作DOM，则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢？状态如何change了呢（观察者模式）？则是通过客户端对服务的状态询问（定期轮询）所实现的。详解：1. XMLHttpRequest 负责与服务器端的通讯，其内部有很多重要的属性：readyStatus=4，status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问（类似于客户端会轮询服务器的返回状态，仍然是http短连接,并非长连接的服务器端push）请求状态，如果一切已经就绪（status=200），那么就执行需要的操作。操作一般就是直接操作DOM，所以AJAX能做到所谓的“无刷新”用户体验。2. 那么在AJAX客户端如何做到的异步呢？实际上就是Javascript的回调函数起的作用提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行业务函数：第一行定义了JavaScript回调函数，一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明想要异步执行该请求。一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。回调函数：上面是我整理给大家的，希望今后会对大家有帮助。相关文章：深入浅析Nginx实现AJAX跨域请求问题AjaxToolKit之Rating控件的使用方法基于Ajax技术实现文件上传带进度条
Ajax基于什么技术？其原理是什么？
http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html
这是IBM的一个网站，如果你对AJAX一点都不懂，你可以看一下，只要不白痴，相信你在一小时内能读懂！
很简单。
ajax就是Asynchronous javascript and xml,就是一种异步交互技术，如果用白点的话解释，就是不刷新页面，也能让页面的数据变化。主要还是用JAVASCRIPT技术最多。
原来不是FORM表单提交到服务器，处理后在返回给页面吗，用AJAX技术就是，不用提交表单，JAVASCRIPT把你的数据提交给服务器，然后服务器处理后返回给JAVASCRIPT，他在返回给页面，所以页面不刷新也能实现数据的变化。
ajax基于javascript
就是通过网页脚本 向服务器发送异步的请求
改变同步请求的不便
同步请求 一个请求必须等待到服务器的响应 然后整个页面刷新
异步请求 则不需要等待服务器的响应 因此页面可以实现局部刷新
这样的好处是提供了更好的用户体验
AJAX的经典应用 你只要随便找个网站的注册页面就可以看出
填写资料的时候 只要填写 而不需要提交 页面就会更新内容给出提示
ajax跨域请求json数据有几种方式
使用jquerygetJson进行跨域读取数据
实际getJson式根本原理ajax使用jsonp式
jquery用getJson调用获取远程数据并通json格式返函数原型：
jQuery.getJSON(url,data,success(data,status,xhr))
参数 描述
url 必需规定请求发送哪 URL
data 选规定连同请求发送服务器数据
success(data,status,xhr)
选规定请求功运行函数
额外参数：
response - 包含自请求结数据
status - 包含请求状态
xhr - 包含 XMLHttpRequest 象
该函数简写ajax函数实际等价于：
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
言归传面我看何使用getJson跨域获取数据
html页面示例代码：
$.getJSON("xxx?",
function (data) {
alert(data);
}
);
执行原理：
发送请求需要传callback调函数名服务器端服务器端拿调函数名再返数据用参数形式反客户端客户端能够调