AJAX随笔笔记

Asynchronout JavaScript And Xml 异步的javascript和xml

• 使用XHTML和CSS的基于标准的表示技术
• 使用DOM进行动态显示和交互
• 使用XML和XSLT进行数据交换和处理
• 使用XMLHttpRequest进行异步数据检索
• 使用Javascript将以上技术融合

建议采用功能更齐全的intellij idea开发工具。

笔者用的是eclipse，之前在eclipse安装了AmaterasUML插件后拥有了HTML和JavaScript提示功能的编辑器。但对于JQuery还需要安装另外插件，网上搜了一大波大都是网民们相互之间粘贴复制过时的东西，所谓的链接早就失效了。
JQueryWTP Spket Aptana 三个支持JQuery补全提示的插件都没找到合适的安装方法。

ajax在表单页面HTML中可以省略的方式，直接采用两个输入加上js事件的方式onclick

<!--采用ajax方式不需要使用表单-->
	<input type="text" id="userName"/><br/>
	<input type="button" value="校验" onclick="verify()">
	
	<!--存放服务器返回的信息-->
	<div id="result"></div>

servlet代码中doGet()和doPost()方法进行参数的获取，判断，并返回文本数据。

httpServletReponse.setContentType('text/html;charset=utf-8');
//httpServletReponse.setContentType('text/xml;charset=utf-8'); 返回xml数据

PrintWriter out = httpServletReponse.getWriter();

//取参数
String name = httpServletRequest.getParameter('name');
if(name == null || name.length == 0){
	out.println('用户名不能为空');
}else{
	out.println('....');
	//如果是返回xml方式
	//StringBuilder builder = new StringBuilder();
	//builder.append('<message>');的方式追加拼接字符串的方式
}
//out.println(builder.toString());

针对点击事件，单独建一个verfy.js文件,使用jQuery的

function verify(){
	//1.获取输入框的属性值
	var userName = $(#userName).val();

	//2.将文本框获取的值发送给服务器
	$.get('AJAXServer?name='+userName,null,callback);
	
}

//回调函数
function callback(data){
	//3.接收服务器返回的数据
	alert(data);
	
	//4.将服务器返回的数据动态的显示在页面上
	$(#result).html(data);
}

使用XMLHttpRequest对象进行AJAX异步数据交互
不再使用JQuery库来引进HTML来操作
verify2.js

function verify(){
	var userName = document.getElementById('userName').value;
	
	var xmlhttp;
	if(window.XMLHttpRequest){//FireFox,Mozillar,Opera,Safari,IE7,IE8浏览器
		xmlhttp = new XMLHttpRequest();
		//对某些特定内部的mozillar浏览器的BUG进行修正
		if(xmlhttp.overrideMimeType){
			xmlhttp.overrideMimeType('text/xml');
		}
	}else if(window.ActiveXObject){//IE6,IE5...
		//两个可以创建XMLHTTPRequest对象的空间名称，第一个版本较新
		var activeName = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
		for(var i = 0;i<activeName.length;i++){
			try{//创建成功终止循环，失败捕捉异常继续循环
				xmlhttp = new ActiveXObject(activeName[i]);
				break;
			}catch(e){}
		}
	}
	if(!xmlhttp){
		alert('对象创建失败');
		return;
	}else{
		alert(xmlhttp);
	}	

	//注册回调函数
	xmlhttp.onreadystatechange = callback;

	//请求方式，url请求地址，异步
	xmlhttp.open('GET','AJAXServer?name='+userName,true);

	//发送数据
	xmlhttp.send(null);
}

function callback(){
	//判断对象是否交互完成
	if(xmlhttp.readState ==4){
		//判断http的交互是否成功
		if(xmlhttp.status == 200){
			//获取服务器端返回的数据(纯文本数据)
			var responseText = xmlhttp.reponseText;
			document.getElementById('result').innerHTML = responseText;
		}
	}
}

post方式请求

xmlhttp.open('POST','AJAXServer',true);
//post需要自己设置请求头
xmlhttp.setRequestHeader("ContenyType","application/x-www-form-urlencoded");

接收XML格式的服务数据

function callback(){
	if(xmlhttp.readState ==4){
		if(xmlhttp.status == 200){
			//获取服务器端返回的数据(XML数据)
			var domObj = xmlhttp.reponseXML;
			//<message>123</message> 根据标签获取123
			var messageNodes = domObj.getElementByTagName('message');
			//message标签中的文本在dom中是子结点
			var textNode = messageNodes[0].firstChild;
			var responseMessage = textNode.nodeValue; 
			
			document.getElementById('result').innerHTML = responseText;
		}
	}
}

总结：AJAX应用步骤

1. 建立XMLHttpRequest对象
2. 设置回调函数
3. 使用open方法与服务器建立链接
4. 向服务器端发送数据
5. 在回调函数针对不同响应状态进行处理

注意点：

1. 不同浏览器下XMLHttpRequest对象的不同的建立方式
2. 设置回调函数时不要加括号
3. open方法三个参数的含义，另外需要注意GET方式和POST方式服务器地址的不同写法
4. GET和POST方式send的参数不同之处，以及POST方式下send之前需要设置请求头信息工作
5. 如何判断正确的响应数据已经返回，如何获取响应数据内容。

jQuery处理XML

var userName = $('#userName').val();

//将文本框的数据发送给服务器servlet
var obj = {name:"jordan",age:20};
//使用jquery的XMLHTTPrequest对象get请求的封装
$.ajax({
	type:'POST',
	url:'AJAXXMLserver',
	data:'name='+userName,
	dataType:'xml',
	success:callback
});

function callback(data){
	var jqueryObj = $(data);//dom对象转化为jquery
	var messsage = jqueryObje.children();
	var text = message.text();

	var resultObje = $("#result");
	resultObje.html(text);
}

关于页面和服务器交换，如果请求的路径都一样对于一些浏览器造成只访问缓存，而没有进行和服务器的交互

//在服务端中加入请求次数的获取，记录请求次数
Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
int temp = 0;
if(inte == null){
	temp = 1;
}else{
	temp = inte.intValue() + 1;
}
httpServletRequest.getSession().setAttribute('total',temp);

对于IE浏览器出现请求缓存的情况,比如用于校验时换图片。

function verify(){
	var url = 'AJAXServer?name='+$("#userName").val();
	url = convertURL(url);
	$.get(url,null,function(data){
		$('#result').html(data);
	});
}

//给url增加时间戳，表示每次请求的地址不同，从而避免读取缓存而无法与服务器交互
function converURL(url){
	var timetamp = (new Date()).valueOf();//获取时间戳

	//拼接时间戳到url上
	if(url.indexOf('?') >= 0){
		url = url + '&t=' +timetamp;
	}else{
		url = url + '?t=' + timetamp;
	}	
	return url;
}

页面输入框输入中文，返回的是乱码问题。

//去到页面数据后，对数据进行字符转换
String newName = new String(name.getBytes('iso8859-1'),'UTF-8');

以上方式解决了fireFox浏览器中文乱码问题，但对于IE依然未解决。

在上述方式的基础上，然后修改js代码encodeURI

var url = 'AJAXServer?name=' + encodeURI($('#userName').val());

第二种方式是：
页面中做两次encodeURI 包含关系
服务端String name = URLDecoder.decode(name,“UTF-8”);

跨域访问的问题
IE：访问跨域页面可以给出提示，用户确认后会访问
FireFox不允许

浏览器端:调用open方法之前判断要连接的地址是不是以http开头，如果是则认为要访问的是跨域资源，首先将当前的url的?变成&，避免原url有参数新的url地址解析错误，url之后的内容表示要访问的跨域资源地址。

function converURL(url){
	if(url.substring(0,7) == "http://"){
		url = url.replace("?","&");
		url = "Proxy?url" + url;
	}
	return url;
}