ajax

• ajax:
• 一.原生ajax的用法
  • 代码
• 二.jquery的ajax用法
  • 代码

ajax:

什么是ajax:(Asynchronous javascript and xml)
ajax是一种用来改善用户体验的技术,其实质上是使用XMLHttpRequest对象异步的向服务器发送请求.
服务器返回部分数据,而不是返回并刷新整个页面,以页面无刷新的效果更新页面中的局部内容

ajax提高的页面的交互度,提高了用户的体验度
减少网络流量

一.原生ajax的用法

步骤如下:

1. html页面或jsp页面中出发某个事件,调用js方法
2. 编写js方法
   • a.创建XMLHttpRequest对象
     -ie浏览器器
     -非ie浏览器
   • b.调用open方法
     参数1:提交的方式
     参数2:提交到服务器url
     参数3:true异步,false同步
   • c.给XMLHttpRequest对象注册onreadystatechange事件
     判断readyState的值是4,和status的是值是200,然后获取服务端传递回来的xml或json或文本,然后dom编程,更改html页面或jsp页面的局部内容
   • d.如果是post提交,还要添加一个消息头

xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");  

• e.调用send方法发送请求

如何获取,创建ajax对象(XMLHttpRequest对象)

    var xmlHttpRequest;
    function createXMLHttpReqest(){
		if(window.XMLHttpRequest){
			//非ie浏览器
			xmlHttpRequest=new XMLHttpRequest();
		}else{
			//ie浏览器
			xmlHttpRequest=new ActiveXObject("Miscrosoft.XMLHTTP");
		}
	}
	等价于
	function createXMLHttpReqest(){
		if("ActiveXObject" in window || window.ActiveXObject){
			//ie浏览器
			xmlHttpRequest=new ActiveXObject("Miscrosoft.XMLHTTP");
		}else{
			//非ie浏览器
			xmlHttpRequest=new XMLHttpRequest();
		}
	}

介绍xmlHttpRequest对象的属性和方法

• abort() 取消请求 xmlHttpRequest.abort();
• getAllResponseHeader();获取响应的所有的http头信息
• getReponseHeader();获取指定http头
• open(method,url,异步/同步) 创建请求
• send() 发送请求
• setRequestHeader() 设置请求http头
• onreadystatechange 发生任何状态的变化时的事件
• readyState:请求的状态
• 0:尚未初始化
• 1:正在发送请求
• 2:请求完成
• 3:请求成功,正在接收数据
• 4:接收数据成功
• status:服务端返回的http请求,响应回来状态码
• 200:成功
• 400:错误的请求
• 404:资源未找到
• 405:service方法调用错误
• 500:服务端java代码异常
  注意
  readyState==4 && status==200时才成功
  responseText 服务端返回的文本
  responseXML 服务端返回的xml

调用open方法

1. 请求方式get

xmlHttpRequest.open("get","XXXServlet",true);  

true:异步
false:同步

1. 请求方式是post

xmlHttpRequest.open("post","XXXServlet",true);  
xmlHttpRequest.setRequestHeader("content-type","applicatoin/x-www-form-urlencoded");  

注意:
setRequestHeader的作用:因为http协议要求发送post请求时,必须有content-type消息头,但默认情况ajax对象不会添加该 消息头,所以需要调用此方法添加消息头
发送请求:
get方式:xmlHttpRequest.send(null);
post方式:xmlHttpRequest.send(name=value&name1=value1…);

注意写法:

• post方式传递数据到服务器用send方法传递参数
• get方式传递数据到服务器用法:
  xmlHttpRequest.open(“get”,”xxxServlet?name=value&name1=value1”,true);
  用ajax对象给服务器传递数据时,如果参数中带有中文,可以能会有乱码

代码

var xmlHttpRequest;
function createXMLHttpRequest(){
	if(window.XMLHttpRequest){
		//非ie浏览器
		xmlHttpRequest=new XMLHttpRequest();
	}else{
		//ie浏览器
		xmlHttpRequest=new ActiveXObject("Miscrosoft.XMLHTTP");
	}
}
//ajax异步请求访问数据库,检测用户名是否存在
function doCheckName(){
	createXMLHttpRequest();
	//获取文本框的值
	var uname=document.forms[0].userName.value;
	alert(uname);
	//调用open方法
	xmlHttpRequest.open("get","CheckNameServlet?uname="+uname,true);
	//如果是post提交必须添加下面的语句
	//xmlHttpRequest.setRequestHeader("content-type","applicatoin/x-www-form-urlencoded");
	//给xmlHTTPRequest对象注册onreadystatechange事件
	xmlHttpRequest.onreadystatechange=function(){
		//alert("aa-->"+xmlHttpRequest.readyState);
		handStateChange();
	};
	//发送请求CheckNameServlet?username=aa,此时才请求servlet
	xmlHttpRequest.send(null);
}
function handStateChange(){
	if(xmlHttpRequest.readyState==4){
		if(xmlHttpRequest.status==200){
			//获取服务端响应的文本信息
			var responseText=xmlHttpRequest.responseText;
			//把得到的文本做dom编程,修改html页面中的局部内容
			var span_ele=document.getElementById("uname");
			//清除span_ele元素的第一个节点内容
			if(span_ele.hasChildNodes()){
				span_ele.removeChild(span_ele.childNodes[0]);
			}
			//根据响应回来的文本创建文本节点对象
			var txt_node=document.createTextNode(responseText);
			var submit_ele=document.getElementById("submit");
			//{"message":"用户名可用","status":1} json字符串-->json对象
			var JsonObj=JSON.parse(responseText);
			if(JsonObj.status=="0"){
				submit_ele.setAttribute("disabled","disabled");
			}else{
				submit_ele.removeAttribute("disabled");
			}
			span_ele.appendChild(txt_node);
		}
	}
}

二.jquery的ajax用法

1. load()方法:将服务器返回的数据字节添加到符合的的节点之上
   语法: $obj.load(请求的地址,请求的参数);
   请求的参数:
   方式一:
   “username=tom&age=22”
   方式二:
   {“username”:”tom”,”age”:22}
   有请求参数时,load方法发送post请求,否则发送get请求
2. get()方法:发送get请求 ** **语法:
   $.get(请求的地址,请求的参数,回调函数,服务器返回的数据类型); 说明: 回调函数添加的参数时服务器返回的数据
   服务器返回的数据类型:
   html:html文本
   text:文本
   json:json的数据
   xml:xml的数据
   script:javascript脚本

3. post()方法:发送post请求
   语法:
   $.post(请求的地址,请求的参数,回调函数,服务器返回的数据类型);
   说明: 回调函数添加的参数时服务器返回的数据
   服务器返回的数据类型: html:html文本
   text:文本
   json:json的数据
   xml:xml的数据
   script:javascript脚本

4. ajax()方法:发送异步提交 语法:
   $.ajax({});
   说明:{}内可以设置的选项参数
   • url:请求的地址
   • type:请求的方式(get,post,put,delete等)
   • data:请求的参数
   • dataType:服务器返回的数据类型
   • success:服务器处理正常对应的回调函数
   • error:服务器出错对应的回调函数
   • async:true(缺省),当值为false时发送同步请求

代码

function doCheckName(){
	//获取文本框中的数据
	var uname=$("form input[name=userName]").val();
	alert("uname-->"+uname);
	//发送ajax异步请求
	$.ajax({
		url:"CheckNameServlet",
		type:"post",
		data:{"uname":uname},
		dataType:"json",
		success:function(result){
			//alert(result.msg)
			alert(result.status+"  "+result.message)
		},
		error:function(){
			alert("请求失败!");
		}
	});
}