Ajax技术
Ajax技术
Ajax(Asynchronous JavaScript and XML)是运用JavaScript和扩展语言(XML)实现浏览器与服务器通信的一种技术。
Ajax技术简介
Ajax实现浏览器与服务器异步交互技术 ,用户请求不需要刷新整个页面只需刷新局部页面,就能实现数据交互。主要设计以下几种技术。
- 使用XHTML(HTML)和CSS构建标准化的展示层
- 使用DOM进行动态显示和交互
- 使用XML和XSLT进行数据交换和操作
- 使用XMLHttpRequest异步获取数据
- 使用JavaScript将所有元素绑定。
XMLHttpRequest对象
XMLHttpRequest对象是Ajax技术的核心技术之一。这个对象需要用JavaScript来创建。
XMLHttpRequest对象的创建
不同的浏览器创建方式不同
var xmlHttpRequest = null //声名XMLHttpRequest对象
if(window.XMLHttpRequest){ //Mozilla,Safari,Opera,IE7等浏览器创建
xmlHttpReqeust = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE较新版本创建
}catch(e){
try{
xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");//IE较老版本
}catch(e){}
}
}
XMLHttpRequest的方法和属性
- open(String request-type,String url,Boolean asynch,String name,String password):用于建立到服务器的连接。
- request-type:发送请求的类型。get或post
- url:要连接的服务器URL
- asynch:若使用异步连接则为true,否则为false。默认true。
- name:若需要身份验证,则指定用户名。
- password:若需要密码,则指定密码。
- 通常使用前三个参数
- send(String content):向服务器发送请求。
- context:发送的内容
- setRequestHeader(String label,String value):发送请求前设置请求头。
- label:若open()方法发送的请求类型为POST,则等于:“Content-type”。
- value:若open()方法发送的请求类型为POST,则等于:“application/x-www-form-urlencoded”)。
- readyState属性:返回HTML的就绪状态。
- 0:请求没有建立,open()方法没有调用。
- 1:请求已经建立,open()方法已调用,但请求没有发送,send()方法没有调用。
- 2:请求已发送,send()方法已经调用,但请求正在处理中。这里可以从响应得到内容的头部。
- 3:请求已经处理,但服务器还没有响应。
- 4:响应已经完成。
- status属性:返回服务器响应的状态码。
- 200:一些顺利。
- 404:页面不存在。
- 403/401:所访问的数据受到保护或者禁止访问。
- onreadystatechange属性:用于指定XMLHTTPRequest对象的状态改变函数。
- responseText和responseXML属性:XMLHTTPRequest对成功返回的信息。
- responseText:服务器返回的请求响应为文本,可将传回的信息当作字符串处理。
- responseXML:服务器返回的XML类型的响应,可将传回的信息当XML文档使用。
XMLHttpRequest对象的运行周期
- Ajax应用从XMLHTTPRequest对象的创建开始。
- XMLHttpRequest对象发送完成。服务器有没有响应,需通过readyState属性判断。当readyState属性发生改变时,可onreadystatechange属性指定事件处理函数,这个函数称为回调函数。
- readyState=4&&status=200时,则表示服务器响应完成,且是正确的响应。
Ajax使用思路
- 创建XMLHttpRequest对象
- 指定响应处理函数
- 发送HTTP请求
- 处理服务器返回的信息
JavaScript创建Ajax技术
- Java Web 根目录 WebRoot目录下新建一个JS文件夹,创建一个Ajax.js文件,并且写下如下代码。
//声名XMLHttpRequest对象
var xmlHttpRequest = null;
//创建XMLHttpRequest对象函数
function createXHR(){
try{
xmlHttpRequest = new XMLHttpRequest();
}catch(e1){
var msxmlhttp=new Array("Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP");
for(var i=0;i<msxmlhttp.length;i++){
try{
xmlHttpRequest = new ActiveObject(msxmlhtt[i]);
if(xmlHttpRequest!=null){break;}
}catch(e2){}
}
}
if(xmlHttpRequest==null){
alert("不能创建Ajax对象");
}
}
//发送客户端的请求函数
//url:请求的服务器地址
//param:需要传递的参数
//method:请求的方式(get/post)
//handler:回调函数
function sendRequest(url,param,method,handler){
createXHR();
if(!xmlHttpRequest) return false;
xmlHttpRequest.onreadystatechange=handler;
if(method=="GET"){
//GET方式,可以直接传递参数,且不需要修改请求头。
xmlHttpRequest.open(method,url+'?'+params,true);
xmlHttpRequest.send(null);
}
if(method=="POST"){
//POST方式,需要修改请求头,且在send()方法中传递参数。
xmlHttpRequest.open(method,url,true);
xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttpRequest.send(params);
}
}
案例——异步表单验证用户名及其密码
index.jsp
Servlet:FormCheck.java
案例——实现级联列表
业务处理Servlet:List.java
接受传递过来的省份,返回城市列表
视图页面JSP:select.jsp
选择省份传递后台:
内嵌JS函数:
@syl 2021/06/30 15:48 晴 25° 抽烟