Ajax技术 - (Asynchronous JavaScript + XML)
Ajax
Ajax = 异步JavaScript和XML,Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。可以再网页不重新加载的情况下,对网页的某部分进行更新。
传统网页(不使用Ajax)如果需要更新内容,必须重新加载整个网页。
注意:Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的web应用程序技术。
Ajax所包含的技术:
① 使用CSS和XHTML来表示
② 使用DOM模型来交互和动态显示
③ 使用XMLHttpRequest来和服务器进行异步通信
④ 使用JavaScript来绑定和调用
AJAX核心是XMLHTTPRequest对象,不同的浏览器创建XMLHTTPRequest对象方法是有差异的。
IE使用ActiveXObject,而其它的浏览器使用XMLHTTPRequest的JavaScript内建对象;
XMLHTTPRequest对象属性:
● onreadystatechange:状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
● readySteat:请求的状态(0-1-2-3-4)
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用
● responseText:服务器的响应,返回数据的文本(内容)
● responseXML:服务器的响应,返回数据的兼容DOM的XML文档对象,这个对象可以解析为一个DOM对象
● responseBody:服务器返回的主题(非文本格式)
● responseStream:服务器返回的数据流
● status:服务器的HTTP状态码(如:404="文件未找到"、200="成功",等等)
● statusText:服务器返回的状态文本信息,HTTP状态码的相应文本(OK或Not Found(未找到) 等等)
XMLHttpRequset对象方法:
● abort():停止当前请求
● getAllResponseHeaders():把HTTP请求的所有响应首部作为键/值对返回
● getResponseHeaders("header"):返回指定首部的串值
● open(method,url,asyncFlag):初始化一个请求,建立对服务器的调用;xmlHttp.open("GET","test.jsp",true)
参数1:设置请求类型(GET或POST),参数2:文件在服务器上的位置;参数3:是否异步处理请求。
● send(content):向服务器发送请求
● setRequestHeaders("header","value"):把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送('post')方法一定要
Ajax使用步骤:
① 创建XMLHttpRequest对象
② 设置请求方式
③ 调用回调函数
④ 发送请求
XMLHttpRequest写法:
//创建XMLHttpRequest对象
var xmlHttp ;
if(window.XMLHttpRequest){ //非IE
xmlHttp = = new XMLHttpRequest();
}else if(window.ActiveXObject){ //IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置请求方式
xmlHttpxhr.open('POST', '/hello.json', true)
//发送. psot数据要放在send里面
xmlHttp.send('username=luoshushu&passwore=123')
xmlHttp.addEventListener('load', function () {
if((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status === 304){
var data = xmlHttp.responseText
console.log(data)
}else{
console.log('出错了')
}
})
ajax标准写法:
$.ajax({
url:"http://www.microsoft.com", //请求的url地址
dataType:"json", //返回格式为json
async:true,//请求是否异步,默认为异步,这也是ajax重要特性
data:{"id":"value"}, //参数值
type:"POST", //请求方式
beforeSend:function(){
//请求前的处理
},
success:function(req){
//请求成功时处理
},
complete:function(){
//请求完成的处理
},
error:function(){
//请求出错处理
}
});
最新文章
- js平滑滚动到顶部,底部,指定地方
- 关于IE7 默认有边框的解决方案
- HDU 4819 Mosaic --二维线段树(树套树)
- 编译android源码官方教程(1)硬件、系统要求
- Oracle “dba_tables”介绍
- 搭建高性能计算环境(八)、应用软件的安装之gromacs
- Android 风格化的 Toggle Buttons
- .net excel利用NPOI导入oracle
- Linux防火墙配置
- 在React+Babel+Webpack环境中使用ESLint
- 18、手把手教你Extjs5(十八)模块记录的拖放删除、拖放复制新增
- abp中文件下载,将内存数据导出到Excel并下载
- 带你一文了解Python中的运算符
- 【BZOJ5300】[CQOI2018]九连环 (高精度,FFT)
- Docker 操作记录
- oracle增删改字段
- Dell服务器Raid5之后安装系统
- windows 批处理恶意脚本
- python-文件基本操作(一) (转载)
- Django之jsonp跨域请求原理
热门文章
- R语言中的线性判别分析_r语言 线性判别分析
- (一)通过JAVA连接SAP (sapjco3.jar在Windows和MacOS上的配置)
- STM32之glossary
- PHP面向对象魔术方法之__call函数
- git -- 项目开发最常用操作记录
- spring boot问题记录(持续更新)
- NEERC 2015 Adjustment Office /// oj25993
- 使用JavaScript分别实现4种样式的九九乘法表(1X1分别在左上、左下、右上、右下)
- Python 变量与数据类型
- Lydsy2017省队十连测