在传统的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对象

if(window.XMLHttpRequest){  //非IE浏览器
http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){ //IE浏览器的常见两种IE版本
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}

常用方法

open()

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

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

send()

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

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

setRequestHeader()

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

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

abort()

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

abort()

getResponseHeader()

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

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. Python 常用单词

    Python常用单词(英文好的人自动忽略) 单词 发音 翻译 作用 print 普润特 打印 显示我们想要查看的内容 input 因普特 输入 获取用户输入的一些内容 int 印特 整型 将有引号的数 ...

  2. Jmeter之Dummy Sampler

    Dummy Sampler(Dummy取样器) Dummy Sampler就像是一个模拟器,需要自己填入请求和响应的信息.(原理类似mock服务) 在没有服务的情况下,测试人员依据Dummy Samp ...

  3. nodejs+gulp+webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  4. IIS--解决64位系统IIS网站发布出现未能加载文件或程序集“...”或它的某一个依赖项。试图加载

    解决64位系统IIS网站发布出现未能加载文件或程序集“...”或它的某一个依赖项.试图加载 ASP.NET MVC 项目发布的在本地IIS后,启动网站出现未能加载文件或程序集“…”或它的某一个依赖项. ...

  5. JS基础_if语句

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. BZOJ5017题解SNOI2017炸弹--玄学递推

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=5017 分析 老师讲课谈到了这道题,课上想出了个连边建图然后乱搞的操作,被老师钦定的递推方 ...

  7. loj 3014「JOI 2019 Final」独特的城市

    loj 我本来是直接口胡了一个意思一样的做法的,但是因为觉得有点假+实现要用并查集(?)就卡了好一会儿... 对于一个点\(x\)来说,独特的点一定在它的最长链上,如果有独特的点不在最长链上,那么最长 ...

  8. sql的关键字

    整理一下sql的关键字,一直都在用,只是很少去整理,所以今天简单整理一下,主要是整理CRUD的一些关键字. 写在前面:sql 不区分大小写 select 简单查询语句 select columnNam ...

  9. cookie、sessionStorage和localStorage区别

    // 数据存储 cookie:生命周期一般是手动设置失效的时间,大小为4k,易用性不高,需要自己封装(封装请看上一篇博客) sessionStorage:生命周期是浏览器关闭接失效,大小为5m或者更大 ...

  10. python之判断和循环

    计算机之所以能做很多自动化的任务,因为它可以自己做条件判断.比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,可以用if语句实现: age = : print ('your age i ...