AJAX原理

随着互联网的发展,交互式的程序,现在越来越多的从C/S专项B/S ,也就是浏览器代替了客户端,这里面就有一个问题,如果我用户的请求很多,难道每一个请求都要进行一次完全刷新才能得到我想要的吗?No,当然不是。这里就要用到好用,众多浏览器支持的AJAX来解决这个问题。

概念

AJAX(AsynchronousJavaScript
and XML ),就是异步js和XML,它不属于新技术,更准确的来说是多种技术的融合,比如CSS、HTML、DOM、JS、XML。

CSS+HTML——网页的标准化;

DOM——动态修改文档的内容和结构;

XML——配置文件,进行数据的交换和处理;

JavaScript——简称JS,绑定上面的技术,使其可以协同工作,一会要讲其中一个非常重要的方法XMLHttpRequest。

如果不用和使用异步操作会怎样?

举个例子:

去图书馆借书,但是你想借的书已经被借出,你就有两种选择:

一种是,一直等待,直到书还了,你再借(相当于用户请求,完全刷新,相当于不用异步操作);

另一种,在图书馆预约,如果有还书,就通知你来借书,同时还可以继续借其他的书(用户请求,服务端进行响应,同时仍然接受用户的其他请求,使用了异步操作)。

利用AJAX最大的目标就是实现解决B/S中浏览器和服务器刷新,缺乏交互性的问题。。以下是AJAX实现交互的流程:

从图中可以看到分为客户端和服务端,用户触发一个事件,创建一个XMLHttpRequest对象,对象向服务端发送请求,请求发出后继续响应用户的其他请求,当服务端接受到请求后,执行返回结果。客户端调用callback()方法,对响应数据进行处理。

核心技术——XMLHttpRequest

要想实现异步操作,XMLHttpReuest是关键。了解一下它。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest是在IE5的时候引进的,它可以实现异步操作,也就是我用这个对象向服务器提出请求和对响应结果进行处理,而且用户仍然可以照常操作,就达到了不完全刷新的效果。

创建XMLHttpRequest 对象

虽然很多浏览器都支持XHR对象,但是各个浏览器也有不同,主要是IE和其他浏览器的区别啦。。

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

<span style="font-size:18px;">var xmlhttp;
function createXMLHttpRequest(){
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
}</span>

解析:先声明一个全局变量xmlhttp,用来存放XHR对象,在createXMLHttpRequest()方法中完成创建过程,根据判断语句知道,如果window.XmlHttpRequest调用返回True,则是实例化一个XMLHttpRequest对象。否则,就证明是IE浏览器,那就通过传递“Microsoft.XMLHTTP”给ActiveObject()来创建XMLHttpRequest对象。。。

向服务器发送请求

向服务器发送请求使用XMLHttpRequest对象的Open()和send()方法。

例子:

<span style="font-size:18px;"><span style="font-size:18px;">xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();</span></span>

open(method,url,async)——规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST;

POST在一下三种情况下使用:

      1. 无法使用缓存文件(更新服务器上的文件或数据库)
      2. 向服务器发送大量数据(POST 没有数据量限制)
      3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

GET比POST简单快速,除了上述三种情况,基本上都可以使用。

  • url:文件在服务器上的位置;
  • async:true(异步)或 false(同步);

send(string)——将请求发送到服务端

  • string:仅用于 POST 请求

利用DOM对服务器响应进行处理

我们利用回调函数进行处理服务器响应的信息,我们要实现异步的效果就是,在服务器响应之后,要让页面无缝更新(不会出现像我们点刷新的时候,而整个页面重新执行),前面说到DOM这个文档对象模型就可以实现动态的对数据进行处理和交换。DOM对象把页面抽象成一个树型结构,它可以对其进行遍历和编辑等,并且将服务器的返回信息更新到相应的结点上,这样用户提交一个请求,根本就感觉不到已经刷新了页面或者刷新了部分页面。

学习完了以上的XHR原理,基本上就知道了是如何实现客户端和服务器异步操作的了。本篇偏向理论性,一个技术的掌握还需要多多实现,下一篇就是对AJAX进行一下练习。。

时间: 2024-10-15 03:18:03

AJAX原理的相关文章

JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)

一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发送请求 - 服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容 Ajax工作原理 获取Ajax对象 二.Ajax对象属性和方法 异步对象的属性和方法 onreadystatechange - onreadystatecha

ajax原理总结附简单实例及其优点

在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 详情请移步Ajax: A New Approach to Web Applications [原理] 简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面

封装ajax原理

封装ajax原理 首先处理 用户如果不传某些参数,设置默认值 type默认get 默认url为当前页 默认async方式请求 data数据默认为{} 处理用户传进来的参数对象 遍历,拼接成key=value&key=value形式,加入数组 通过XMLHttpRequest对象创建xhr,早期的IE浏览器不支持XMLHttpRequest对象,通过var xhr = new ActiveXObject('Msxm12.XMLHTTP')创建 判断用户请求的方法 get:将数据拼接在url后面,

Ajax 原理过程 同步与异步区别 优缺点

ajax原理过程                                                                                                                                        利用XMLHttpRequest对象发送简单请求的基本步骤:1)创建XMLHttpRequest对象实例2)设定XMLHttpRequest对象的回调函数,利用onreadystatechange属性3)设定请求

AJAX原理总结

AJAX全称 Asynchronous JavaScript and XML(异步的JavaScript 和XML) 同步和异步 异步传输是面向字符的传输,单位是字符 同步传输是面向比特,单位是帧,传输时要求接收方和发送方的时钟是保持一致的. 通过XMLHTTPRequest理解AJAX AJAX原理简单地说就是通过XMLHTTPRequest来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作DOM而刷新页面. XMLHTTPRequest对象属性 ![XMLHTTPRe

Ajax原理与图解

Ajax原理 Ajax 的全称是Asynchronous JavaScript and XML. Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请求数据. 实现原理图如下: 代码: <script type="text/javascript">   var xmlHttp=null;   try   {       xmlHttp=new 

什么是ajax,ajax原理是什么 ,优缺点是什么

AJAX工作原理及其优缺点 1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML+CSS来标准化呈现:使用XML和XSLT进行数据交换及相关操作:使用XMLHttpRequest对象与Web服务器进行异步数据通信: 使用Javascript操作Document Object Model进行动态显示及交互: 使用JavaScript绑定和处理所有数据.

浅析ajax原理与用法

1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建 动态网页的技术,目的是显示动态局部刷新.通过XMLHttpResponse对象来向服务器发起异步请求,从服务器获取数据. (1) 异步的javascript: 使用javaScript语言及功能向服务器发起请求,当服务器处理完请求之后,自动执行 javaScript回调函数.(客户端可以不需要等到服务器响应才能运行) (2) XML是一种标记语言,

大话AJAX原理

大话AJAX原理 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来.常见运用场景有表单验证是否登入成功.百度搜索下拉框提示和快递单号查询等等.Ajax目的:提高用户体验,较少网络数据的传输量 二.Ajax原理是什么 在解释Ajax原理之前,我们不妨先举个“领导想找小李汇报一下工作

一张图搞懂Ajax原理

本文整理在,我的github上.欢迎Star. 原理 说起ajax,就不得不说他背后的核心对象XMLHttpRequest,而说到XMLHttpRequest我觉得,从它的readyState状态说起是最好的切入点. 个人觉得,只要弄清楚了readyState的这几个状态,其实ajax的原理也就算弄清楚了.为了更方便您理解,笔者特意画了一张状态图. 您只需要看懂这张图ajax原理,您就算通关了:并且很难忘记. 首先let xhr = new XMLHttpRequest();,新建一个XMLHt