13. Ajax技术
在传统的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技术的更多相关文章
- JavaScript 13 Ajax技术(未完)
<body> <!-- 添加文档主体内容 --> <header> <nav>JavaScript - Ajax - 读取XML文件</nav&g ...
- Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
- Python全栈开发之路 【第十八篇】:Ajax技术
Ajax技术 Ajax = 异步 JavaScript 和 XML. Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 1.jQuery的load()方法 jQuery loa ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...
- Json介绍与Ajax技术
AJAX AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...
- 使用ajax技术实现txt弹出在页面上
使用ajax技术实现txt弹出在页面上 使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...
- 《所用到的AJAX技术基础》
来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...
- Ajax技术
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
随机推荐
- django 模块创建 同步数据表 使用方法
1 配置数据库 100行左右 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # 'NAME': 'student ...
- oracle修改TNSLSNR的端口
oracle 服务一启动 TNSLSNR.exe 会占用8080端口,这时,如果我们其他程序需要使用8080端口就会比较麻烦,所以需要改一下端口: 用dba账户登录 CMD>sqlplus sy ...
- 怎样理解 Vue 中的 v-if 和 v-show ?
1. v-if 实现了真正的 条件渲染, 条件为真时, 节点被创建, 相应的监听函数也会生效, 条件为假时, 节点被销毁, 触发事件监听函数不会生效. 而 v-show 只是使用了 display:n ...
- react中数据持久化缓存redux-persist
一.安装redux-persist: npm install redux-persist --save 二..babelrc中增加redux-persist配置: "plugins" ...
- Scala学习十二——高阶函数
一.本章要点 在Scala中函数是”头等公民“(可以作为参数,返回值,赋值给其他); 可以创建匿名函数,通常还会交给其他函数; 函数参数可以给出需要稍后执行的行为; 许多集合方法都接受函数参数,将函数 ...
- (转载)项目中表、类、包、JSP命名规范
对于Java(包括在jsp中)的代码,类名一律用pascal标记法,每个单词的头个字母大写:参数,方法一律用camel标记法,首字母是小写的,能不缩写的都不缩写! 项目名 = 数据库名 ...
- iframe父子页面通信
一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...
- shell中sed的简单使用
sed命令行格式为: sed [-nefri] ‘command’ 输入文本/文件 常用选项: -n∶取消默认的输出,使用安静(silent)模式.在一 ...
- Python 之subprocess模块
Python subprocess模块运行python的时候,我们都是在创建并运行一个进程.像Linux进程那样,一个进程可以fork一个子进程,并让这个子进程exec另外一个程序.在Python中, ...
- kbmMemTable中怎么根据UniqueRecID定位到对应的记录
function TForm5.LocateUniqueRecID(aDataSet: TkbmMWCustomClientQuery; AID: TkbmNativeInt): Boolean; v ...