Java Web Ajax技术

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的方法和属性

  1. open(String request-type,String url,Boolean asynch,String name,String password):用于建立到服务器的连接。
  • request-type:发送请求的类型。get或post
  • url:要连接的服务器URL
  • asynch:若使用异步连接则为true,否则为false。默认true。
  • name:若需要身份验证,则指定用户名。
  • password:若需要密码,则指定密码。
  • 通常使用前三个参数
  1. send(String content):向服务器发送请求。
  • context:发送的内容
  1. setRequestHeader(String label,String value):发送请求前设置请求头。
  • label:若open()方法发送的请求类型为POST,则等于:“Content-type”。
  • value:若open()方法发送的请求类型为POST,则等于:“application/x-www-form-urlencoded”)。
  1. readyState属性:返回HTML的就绪状态。
  • 0:请求没有建立,open()方法没有调用。
  • 1:请求已经建立,open()方法已调用,但请求没有发送,send()方法没有调用。
  • 2:请求已发送,send()方法已经调用,但请求正在处理中。这里可以从响应得到内容的头部。
  • 3:请求已经处理,但服务器还没有响应。
  • 4:响应已经完成。
  1. status属性:返回服务器响应的状态码。
  • 200:一些顺利。
  • 404:页面不存在。
  • 403/401:所访问的数据受到保护或者禁止访问。
  1. onreadystatechange属性:用于指定XMLHTTPRequest对象的状态改变函数。
  2. responseText和responseXML属性:XMLHTTPRequest对成功返回的信息。
  • responseText:服务器返回的请求响应为文本,可将传回的信息当作字符串处理。
  • responseXML:服务器返回的XML类型的响应,可将传回的信息当XML文档使用。

XMLHttpRequest对象的运行周期

  1. Ajax应用从XMLHTTPRequest对象的创建开始。
  2. XMLHttpRequest对象发送完成。服务器有没有响应,需通过readyState属性判断。当readyState属性发生改变时,可onreadystatechange属性指定事件处理函数,这个函数称为回调函数。
  3. readyState=4&&status=200时,则表示服务器响应完成,且是正确的响应。

Ajax使用思路

  1. 创建XMLHttpRequest对象
  2. 指定响应处理函数
  3. 发送HTTP请求
  4. 处理服务器返回的信息

JavaScript创建Ajax技术

  1. 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
Java Web Ajax技术Java Web Ajax技术
Servlet:FormCheck.java
Java Web Ajax技术

案例——实现级联列表

业务处理Servlet:List.java
接受传递过来的省份,返回城市列表Java Web Ajax技术

视图页面JSP:select.jsp
选择省份传递后台:
Java Web Ajax技术
内嵌JS函数:
Java Web Ajax技术

@syl 2021/06/30 15:48 晴 25° 抽烟

上一篇:Android学习笔记(十)——ListView的使用(上)


下一篇:JavaScript Day 4