1.Ajax
1.认识Ajax1.Ajax应用采用异步请求模式,不用每次请求都重新加载页面。
发送请求后不需要等待服务器响应,而是可以继续原来的操作,在服务器响应完成后,浏览器再将响应展示给用户。
2.Ajax简介
Ajax并不是一种全新的技术,而是整合了JavaScript、XML、CSS等几种现有技术而成。
Ajax的关键元素包括以下内容:
1.JavaScript语言:Ajax技术的主要开发语言
2.XML/JSON/HTML等:用来封装请求或响应的数据格式
3.DOM(文档对象模型):通过DOM属性或方法修改页面元素,实现页面局部刷新。
4.CSS:改变样式,美化页面效果,提升用户体验度。
3.XMLHttpRequest
XMLHttpRequest对象可以提供在不刷新当前页面的情况下向服务器端发送异步请求,并接收服务器端的返回结果,从而实现局部更新当前页面的功能。
1.创建XMLHttpRequest对象语法
老版本IE(IE5和IE6)
XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
新版本IE和其他大部分浏览器(推荐使用)
XMLHttpRequest = new XMLHttpRequest();
2.XMLHttpRequest对象常用属性和方法
XMLHttpRequest
属性名称 说明
返回请求的当前状态,常用值:
0--未初始化
1--开始发送请求
readyState 2--请求发送完成
3--开始读取响应
4--读取响应结束
status 返回当前请求的HTTP状态码
常用值:
200--正确返回
404--找不到访问对象
responseText 以文本形式获取响应值
responseXML 以XML形式获取响应值,并且解析成DOM对象返回
statusText 返回当前请求的响应行状态
onreadystatechange 返回回调函数
XMLHttpRequest的常用方法
方法名称 说明
open(String method,String url, 用于创建一个新的HTTP请求
boolean async,String user 参数method:设置HTTP请求方法,如POST、GET等,对大小写不敏感;
,String password) 参数url:请求的URL地址
参数async:可选,指定此请求是否为异步方法,默认为true
参数user:可选,如果服务器需要验证,此处需要指定用户名;否则,会弹出验证窗口
参数password:可选,验证信息中的密码,如果用户名为空,此值将被忽略
send(String date) 发送请求到服务器端:
参数date:字符串类型,通过此请求发送的数据。此参数值取决于open方法中的method参数。如果method值为"POST",需要指定该参数,如果method值为"GET",该参数为null。
abort() 取消当前请求
setRequestHeader(String header, 单独设置请求的某个HTTP
String value) 参数header:要指定的HTTP头名称
参数value:要指定的HTTP头名称所对应的值
getResponseHeader(String header) 从响应中获取指定的HTTP头信息,
参数header:要获取的指定HTTP头
getAllResponseHeaders() 获取相应的所有HTTP头信息
4.使用Ajax发送请求
1.使用Ajax发送GET请求及处理响应
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest){ //返回值为true时说明是新版本IE或其他浏览器
xmlHttpRequest= new XMLHttpRequest();
}else{ //返回值为false时说明是老版本IE浏览器(IE5和IE6)
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
//3.初始化XMLHttpRequest组件
var url="server.jsp?name="+name; //服务器端URL地址,name为用户名文本框获取的值
xmlHttpRequest.open("GET",url,true);
//4.发送请求
xmlHttpRequest.send(null);
//回调函数callBack中处理服务器响应的关键代码
function callBack(){
if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200){
var result = xmlHttpRequest.responseText;
//省略将服务器返回的文本数据显示到页面的代码
}
}
注意:如果send()方法不设值,在不同的浏览器下可能存在不兼容问题。
2.使用Ajax发送POST请求及处理响应
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest){ //返回值为true时说明是新版本IE或其他浏览器
xmlHttpRequest= new XMLHttpRequest();
}else{ //返回值为false时说明是老版本IE浏览器(IE5和IE6)
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
//3.初始化XMLHttpRequest组件
var url="server.jsp; //服务器端URL地址,name为用户名文本框获取的值
xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var date = "name="+name;//需要发送的数据信息,name为用户名文本框获取的值
//4.发送请求
xmlHttpRequest.send(date);
//回调函数callBack中处理服务器响应的关键代码
function callBack(){
if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200){
var result = xmlHttpRequest.responseText;
//省略将服务器返回的文本数据显示到页面的代码
}
}
GET与POST方式实现Ajax的区别
发送方式 初始化XMLHttpRequest对象 发送请求
GET 指定XMLHttpRequest对象的open()方法 指定XMLHttpRequest对象的send()方法中的date参数为null
中的method参数为"GET"
POST 1.指定XMLHttpRequest对象的open()
方法中method参数为"POST"
2.指定XMLHttpRequest对象要请求的HTTP 指定XMLHttpRequest对象的send()方法中的date参数的值,
头信息,该HTTP请求头信息为固定写法。 即该请求需要携带的具体数据。
2.使用jQuery实现Ajax
1.$.ajax()方法$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的Ajax实现,具有较高灵活性。
语法:
$.ajax([settings]);
参数settings:$.ajax()方法的参数列表,用于配置Ajax请求的键值对集合。
$.ajax()常用参数表
参数 说明
String url 发送请求的地址,默认为当前页地址
String type 请求方式(POST或GET,默认为GET)
Number timeout 设置请求超时时间
Object date或String date 发送到服务器的数据
String dateType 预期服务器返回的数据类型,可用类型有XML、HTML、Script、JSON、JSONP、Text
function beforeSend(XMLHttpRequest xhr) 发送请求前调用的函数
参数xhr:可选,XMLHttpRequest对象
function complete(XMLHttpRequest xhr, 请求完成后调用的函数(请求成功或失败时均调用)
String ts) 参数xhr:可选,XMLHttpRequest对象;ts:可选,描述请求类型的字符串
function success(Object result,String ts) 请求成功后调用的函数:
参数result:可选,由服务器返回的数据
参数ts:可选,描述请求类型的字符串
function error(XMLHttpRequest xhr,Sring 请求失败时被调用的函数
en,Exception e) 参数xhr:可选,XMLHttpRequest对象
参数en:可选,错误信息
参数e:可选,捕获的异常对象
boolean global 默认为true,表示是否触发全局Ajax事件
示例:
$.ajax({
url:url, //要提交的URL路径
type:"GET", //发送请求的方式
data:data, //要发送到服务器的数据
dataType:"text", //指定传输的数据格式
success:function(result){ //请求成功后要执行的代码
//省略将服务器返回的文本数据显示到页面的代码
},
error : function(){ //请求失败后要执行的代码
alert("用户名验证时出现错误,请联系管理员!");
}
});
2.其他Ajax方法
1.$.get()方法
$.get()方法是jQuery封装的发送HTTPGET请求从服务器加载数据的Ajax方法,具体语法如下。
$.get(url,data,success(resp,status,xhr),dataType);
2.$.post()方法
$.post()是jQuery封装的发送HTTPPOST请求从服务器加载数据的Ajax方法,具体语法如下。
$.post(url,data,success(resp,status,xhr),dataType);
3.load()
load()方法通过发送Ajax请求从服务器加载数据,并把返回的数据放置到指定的元素中,具体语法如下。
$(selector).load(url,data,function(result,status,xhr));
3.认识JSON
1.JSON是一种轻量级的数据交换格式。它基于JavaScript的一个子集,采用完全独立于语言的文本格式。1.定义JSON对象
语法:var JSON对象 = {key:value,key:value,...};
2.定义JSON数组
语法:var JSON数组 = {value,value,...};
2.$.getJSON(url,data,success(result,status,xhr))