在传统的Web应用模式中,页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面的客户端。而在Ajax应用中,页面中的用户的操作将通过Ajax引擎与服务器端进行通信,然后将返回结果提交给客户端页面的Ajax引擎,再由Ajax引擎来决定将这些数据插入到页面的指定位置。

  对于每个用户的行为,在传统的Web应用模式中,将生成一次HTML请求,而在Ajax应用开发模式中,将变成Ajax引擎的一次JavaScript调用。在Ajax应用开发模式中通过JavaScript实现在不刷新整个页面的情况下,对部分数据进行更新,从而降低了网络流量。

  Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。

XMLHTTPRequest对象

  Ajax使用的技术中,最核心的技术是XMLHttpRequest,它是一个具有应用程序接口的JavaScript对象,能够使用超文本传输协议(HTTP)连接一个服务器,是微软公司为了满足开发者的需求,于1999年在IE5.0浏览器中率先推出。现在许多浏览器都对其提供支持,不过实现与IE略有不同。

  通过XMLHttpRequest对象,Ajax可以只和服务器进行数据层面的交换,而不用每次都刷新页面,也不用每次都将数据处理的工作交给服务器来完成,这样既减轻了服务器的负担,又加快了响应速度。

初始化XMLHTTPRequest对象

  1. if(window.XMLHttpRequest){ //非IE浏览器
  2. http_request = new XMLHttpRequest();
  3. }else if(window.ActiveXObject){ //IE浏览器的常见两种IE版本
  4. try{
  5. http_request = new ActiveXObject("Msxml2.XMLHTTP");
  6. }catch(e){
  7. try{
  8. http_request = new ActiveXObject("Microsoft.XMLHTTP");
  9. }catch(e){}
  10. }
  11. }

常用方法

open()

  open()方法用于设置进行异步请求目标的URL、请求方法及其他参数信息。

  1. open("method", "URL", "asyncFlag", "username", "password")
  2. /*
  3. method:用于指定请求的类型:GET或POST
  4. URL:用于指定请求地址,可以使用绝对或相对地址,并且可以传递查询字符串
  5. asyncFlag:可选参数,用于指定请求方式,异步请求为true,同步请求为false,默认情况下是true
  6. username:可选参数,用于指定请求用户名,没有时可省略
  7. password:可选参数,用于指定请求密码,没有时可省略
  8. */

send()

  send()方法用于向服务器发送请求。如果请求声明为异步,该方法将立即返回,否则将等到接受到响应为止。

  1. send(content)
  2. //用于指定发送的数据,可以是DOM对象的实例,输入流或字符串。没有参数需要传递可以设置为null

setRequestHeader()

  setResquestHeader()方法用于为请求的HTTP头设置值,该方法必须在调用open()方法后才能调用

  1. setRequestHeader("header", "value");
  2. //header:用于指定HTTP头 value:设置值

abort()

  用于停止或放弃当前的异步请求

  1. abort()

getResponseHeader()

  用于以字符串的形式返回指定的HTTP头信息

  1. getResponseHeader("headerLabel")

getAllResponseHeaders()

  用于以字符串形式返回完整的HTTP头信息

常用属性

onreadystatechange属性

readyState属性

responseText属性

responseXML属性

status属性

statusText属性

与服务器通信

发送请求

处理响应

解决中文乱码问题

Ajax重构

13. Ajax技术的更多相关文章

  1. JavaScript 13 Ajax技术(未完)

    <body> <!-- 添加文档主体内容 --> <header> <nav>JavaScript - Ajax - 读取XML文件</nav&g ...

  2. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  3. Python全栈开发之路 【第十八篇】:Ajax技术

    Ajax技术 Ajax = 异步 JavaScript 和 XML. Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 1.jQuery的load()方法 jQuery loa ...

  4. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  5. Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)

    Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...

  6. Json介绍与Ajax技术

    AJAX   AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...

  7. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  8. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

  9. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

随机推荐

  1. Replication-Manager

    MYSQL5.7下搭建Replication-Manager 环境说明 在主机1,主机2,主机3上安装MySQL服务端和客户端. 主机1 主机2 主机3 操作系统 CentOS7.4 CentOS7. ...

  2. 【hash表】图书管理

    [哈希和哈希表]图书管理 题目描述 图书管理是一件十分繁杂的工作,在一个图书馆中每天都会有许多新书加入.为了更方便的管理图书(以便于帮助想要借书的客人快速查找他们是否有他们所需要的书),我们需要设计一 ...

  3. [转载]aspnet webapi 跨域请求 405错误

    写了个webapi给同事用ajax调用,配置完跨域以后get请求完全没问题,post就一直报405错误,花了半天时间就是解决不了,后来在网上看到一博主的帖子才知道原来是webapi 默认的web.co ...

  4. JXOI 2018滚粗记

    --Update5.2 成绩出了,见后文 听说省选VAN写游记是传统,本蒟蒻也来发一篇吧. DAY 0 本来以为省选不在JKFZ举行的结果又是在JKFZ,本校作战感觉终究会是好一些吧,和jyh一起向教 ...

  5. (三)创建基于maven的javaFX+springboot项目创建

    创建基于maven的javaFx+springboot项目有两种方式,第一种为通过非编码的方式来设计UI集成springboot:第二种为分离用户界面(UI)和后端逻辑集成springboot,其中用 ...

  6. git clone ssh 时出现 fatal: Could not read from remote repository

    一.问题及解决办法参考: 在 ubuntu 中,要把 GitHub 上的储存库克隆到计算机上时,执行如下命令: git clone git@github.com:USER-NAME/REPOSITOR ...

  7. 批量转换epub书籍为mobi电子书

    kindlegen下载地址: http://kindlegen.s3.amazonaws.com/kindlegen_win32_v2_9.zip 原文: http://blog.sina.com.c ...

  8. JSP中的普通路径写法

    <% String path = request.getContextPath();     String basePath = request.getScheme()+"://&qu ...

  9. Sublime Text 3:自定义语法高亮

    (http://ilkinulas.github.io/programming/2016/02/05/sublime-text-syntax-highlighting.html) 要安装"P ...

  10. SocketClient

    import java.io.BufferedWriter; import java.io.IOException; import java.io.InputStream; import java.i ...