ajax原理ajax的运行原理详细点的

ajax原理时间:2021-09-06 阅读:()

ajax的执行原理与一般页面有何不同

最重要的不同是ajax是异步调用，和之前的post以及get请求等同步调用是不一样的，异步调用能实现的效果还有局部刷新效果，而不用重新发送整个页面。

ajax的核心对象是XMLHttpReques，是微软最先实现在IE中的。

ajax的运行原理是什么些

Ajax的工作原理相当于在用户器之间加了—个中间层,使用户操作与服务器响应异步化。

并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求.

Ajax的实现原理

表单将获取的数据发给一些javascript代码而不是服务器，javascript代码得到数据后通过一个request对象将数据发送到服务器。

也就是异步通讯！

ajax是什么及其工作原理

原理这个东西我不懂。

只知道ajax就是一种无刷新的技术，比如现在你有一个网页：在一个文本框里面输入一些东西，当点击一个按钮时把数据实时的显示在网页上面。

在没有Ajax的时候只能重新刷新一次页面才能显示内容，但是用了ajax以后就能不用刷新，而是点击了按钮以后同步的显示数据。

.net ajax 的原理

关于ajax的名字 ajax的全称是AsynchronousJavaScriptandXML，其中，Asynchronous是异步的意思，它有别于传统web开发中采用的同步的方式。

 4、关于同步和异步 异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

 具体来说，异步传输是将比特分成小组来进行传送。

一般每个小组是一个8位字符，在每个小组的头部和尾部都有一个开始位和一个停止位，它在传送过程中接收方和发送方的时钟不要求一致，也就是说，发送方可以在任何时刻发送这些小组，而接收方并不知道它什么时候到达。

一个最明显的例子就是计算机键盘和主机的通信，按下一个键的同时向主机发送一个8比特位的ASCII代码，键盘可以在任何时刻发送代码，这取决于用户的输入速度，内部的硬件必须能够在任何时刻接收一个键入的字符。

这是一个典型的异步传输过程。

异步传输存在一个潜在的问题，即接收方并不知道数据会在什么时候到达。

在它检测到数据并做出响应之前，第一个比特已经过去了。

这就像有人出乎意料地从后面走上来跟你说话，而你没来得及反应过来，漏掉了最前面的几个词。

因此，每次异步传输的信息都以一个起始位开头，它通知接收方数据已经到达了，这就给了接收方响应、接收和缓存数据比特的时间；在传输结束时，一个停止位表示该次传输信息的终止。

按照惯例，空闲（没有传送数据）的线路实际携带着一个代表二进制1的信号。

步传输的开始位使信号变成0，其他的比特位使信号随传输的数据信息而变化。

最后，停止位使信号重新变回1，该信号一直保持到下一个开始位到达。

例如在键盘上数字“1”，按照8比特位的扩展ASCII编码，将发送“00110001”，同时需要在8比特位的前面加一个起始位，后面一个停止位。

 同步传输的比特分组要大得多。

它不是独立地发送每个字符，每个字符都有自己的开始位和停止位，而是把它们组合起来一起发送。

我们将这些组合称为数据帧，或简称为帧。

 数据帧的第一部分包含一组同步字符，它是一个独特的比特组合，类似于前面提到的起始位，用于通知接收方一个帧已经到达，但它同时还能确保接收方的采样速度和比特的到达速度保持一致，使收发双方进入同步。

 帧的最后一部分是一个帧结束标记。

与同步字符一样，它也是一个独特的比特串，类似于前面提到的停止位，用于表示在下一帧开始之前没有别的即将到达的数据了。

 同步传输通常要比异步传输快速得多。

接收方不必对每个字符进行开始和停止的操作。

一旦检测到帧同步字符，它就在接下来的数据到达时接收它们。

另外，同步传输的开销也比较少。

例如，一个典型的帧可能有500字节（即4000比特）的数据，其中可能只包含100比特的开销。

这时，增加的比特位使传输的比特总数增加2.5%，这与异步传输中25%的增值要小得多。

随着数据帧中实际数据比特位的增加，开销比特所占的百分比将相应地减少。

但是，数据比特位越长，缓存数据所需要的缓冲区也越大，这就限制了一个帧的大小。

另外，帧越大，它占据传输媒体的连续时间也越长。

在极端的情况下，这将导致其他用户等得太久。

 了解了同步和异步的概念之后，大家应该对ajax为什么可以提升用户体验应该比较清晰了，它是利用异步请求方式的。

打个比方，如果现在你家里所在的小区因某种情况而面临停水，现在有关部门公布了两种方案，一是完全停水8个小时，在这8个小时内完全停水，8个小时后恢复正常。

二是不完全停水10个小时，在这10个小时内水没有完全断，只是流量比原来小了很多，在10个小时后恢复正常流量，那么，如果是你你会选择哪种方式呢？显然是后者。

 5、ajax所包含的技术 大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。

它由下列技术组合而成。

 1.使用CSS和XHTML来表示。

 2.使用DOM模型来交互和动态显示。

 3.使用XMLHttpRequest来和服务器进行异步通信。

 2.使用javascript来绑定和调用。

 在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

 6、ajax原理和XmlHttpRequest对象 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

这其中最关键的一步就是从服务器获得请求数据。

要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。

 XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。

简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。

达到无刷新的效果。

 所以我们先从XMLHttpRequest讲起，来看看它的工作原理。

 首先，我们先来看看XMLHttpRequest这个对象的属性。

 它的属性有： onreadystatechange每次状态改变所触发事件的事件处理程序。

 responseText从服务器进程返回数据的字符串形式。

 responseXML从服务器进程返回的DOM兼容的文档数据对象。

 status从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪） statusText伴随状态码的字符串信息 readyState对象状态值 0(未初始化)对象已建立，但是尚未初始化（尚未调用open方法） 1(初始化)对象已建立，尚未调用send方法 2(发送数据)send方法已调用，但是当前的状态及http头未知 3(数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 4(完成)数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据 但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。

这个差异主要体现在IE和其它浏览器之间。

下面是一个比较标准的创建XMLHttpRequest对象的方法。

 functionCreateXmlHttp() { //非IE浏览器创建XmlHttpRequest对象 if(window.XmlHttpRequest) { xmlhttp=newXmlHttpRequest(); } //IE浏览器创建XmlHttpRequest对象 if(window.ActiveXObject) { try { xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try{ xmlhttp=newActiveXObject("msxml2.XMLHTTP"); } catch(ex){} } } } functionUstbwuyi() { vardata=document.getElementById("username").value; CreateXmlHttp(); if(!xmlhttp) { alert("创建xmlhttp对象异常！"); returnfalse; } xmlhttp.open("POST",url,false); xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.getElementById("user1").innerHTML="数据正在加载..."; if(xmlhttp.status==200) { document.write(xmlhttp.responseText); } } } xmlhttp.send(); } 如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。

然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。

 对于XmlHttpRequest的两个方法，open和send，其中open方法指定了： a、向服务器提交数据的类型，即post还是get。

 b、请求的url地址和传递的参数。

 c、传输方式，false为同步，true为异步。

默认为true。

如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。

我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。

 Send方法用来发送请求。

 知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。

并且它完全是一种客户端的技术。

而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

 现在，我们对ajax的原理大概可以有一个了解了。

我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。

这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。

至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。

ajax的运行原理详细点的

AJAX是异步交互，在客户端与服务器只加引入一个媒介，从改变了同步交互过程中“处理--等待--处理--等待”的模式。

浏览器在执行任务时即装载了Ajax引擎。

该引擎室js编写的，通常位于页面的框架中，负责转发客户端和服务器之间的交互。

另外，通过js调用AJAX引擎，可以使得页面不在被整体刷新，而仅仅更新用户需要的部分，不但避免了“白屏”现象，还大大节省了带快，加快了 web浏览的速度。

AJAX的组成部分：是由4中技术组成的。

JAVAScript:是通用的脚本语言，用来嵌入在某种应用之中。

AJAX应用程序是用JAVASCRIPT编写的。

CSS:CSS为WEB页面元素提供了可视化样式的定义方法。

AJAX应用中，用户界面的样式可以通过CSS独立修改。

DOM:通过JS修改DOM，AJAX应用程序可以再运行时改变用户界面，或者局部更新页面中的某个节点 XMLHttpRequest:XMLHttpRequest对象允许Web程序员从WEB服务器以后台的方式获取数据。

数据的格式通常是XML，或者是文本

1.创建对象：【基本上是AJAX中创建异步对象的通用方法】 var xmlHttp;//全局变量（异步对象在整个页面进程中都能用到所以定义为全局变量） function createXMLHttpRequest(){//创建异步对象的函数 if(window.ActionXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } } 2.利用对象来连接服务器。

【建立请求】 1.利用open（）方法简历一个请求，并想服务器发送：open（method,URL,asynchronou,user,Password） asynchronous:是一个布尔值，表示是否为异步请求，默认值为异步请求true； eg:xmlHttp.open("GET","**.ASPS",true); 2.在请求发送后，要用readyState属性来判断目前请求的情况，如果属性变了，就会触动onreadystatechange事件。

通常的代码： xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4){//数据接收成功 //do something } } 通常情况下，不但需要判断请求的状态，还需要判断服务器返回的相应的状态status 因此上述代码改为： xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){//数据接收成功并切请求成功 //do something } } 3.发送请求： send(body); body为要想服务器发送的数据，其格式为查询字符串的形式。

eg:var body="myName=lee&age=100"; 【注意：】如果在open中指定的是GET方式。

则这些参数作为查询字符串提交，如果指定的是post方式，则作为HTTP的POST方法提交。

对于send（）方法方法而言，body参数是必需的，如果不发送任何数据，则可以使用xmlHttp.send(null); 【特别的】：如果使用POST方法进行提交请求，那么在发送前必须使用如下的语句来设置HTTP的头，语法如下： xmlHttp.setRequestHeader("Content-Type";"application/x-www-form-urlencoded"); 可以对返回值做如下处理： alert("服务器返回："+xmlHttp.responseText); IE浏览器会自动缓存异步通信的结果，解决的办法是每次url的地址不相同。

Firefox不存在这个问题。

eg: var sUrl=new Date().getTime();//地址不断变化 xmlHttp.open("GET",sUrl,true);

展开全文