Ajax

AJAX

1. 简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页。

2. Ajax的基本使用

<input onblur="check()" />
<h1 id="msg"></h1>

		// 创建异步请求对象
		var xmlhttp = new XMLHttpRequest();
		// 设置请求类型、请求地址以及参数、是否异步
		xmlhttp.open("post","HelloServlet",true);
		// 设置请求头部信息
		xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
		// 发送请求
		xmlhttp.send("userName="+$("input").val());
		// 状态监听
		xmlhttp.onreadystatechange = function(){
			// 当状态为4 响应码为200的时则表示请求完成
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				// 获取返回请求结果
				 var result = xmlhttp.responseText;
				 // 根据请求结果进行处理
				 if(result == 1){
				  	$("#msg").text("恭喜你，可以使用此用户名");					 
				 }else{
				 	$("#msg").text("对不起，此用户名已被使用");					 
				 }
			}
		};

后台代码：

		// 获取用户提交的请求参数
		String name = request.getParameter("userName");
        PrintWriter pw = response.getWriter();
        // 当用户名是seven返回字符串0，否则返回字符串1
        if("seven".equals(name)){
            pw.write("0");
        }else{
            pw.write("1");
        }

3. JQuery中的Ajax使用

			// $.ajax 表示jquery中的ajax的调用方式
			$.ajax({
					 "url":"HelloServlet",  // 请求地址
					 "data":"userName="+$("input").val(),  //参数
					 "type":"POST",  // 请求类型
					 "success":function(data){    // 请求成功时的回调函数
						 if(data == 1){
							 $("#msg").text("恭喜你，可以使用此用户名");
						 }else{
							 $("#msg").text("对不起，此用户名已被使用");
						 }
						
					 },
					 "error":function(){  // 请求失败时的回调函数
						
					 } 
				});

后台代码同上。

如果与服务器交互的数据时json格式可使用如下方式：

			/*
				使用 HTTP GET 请求从服务器加载 JSON 编码的数据
				第1个参数为请求地址，第2个参数为请求参数，请3个参数为成功时的回到函数
			*/
			$.getJSON("HelloServlet",{userName:$("input").val()},function(data){
                // 如果返回的json字符串定义了result的键，可以直接通过键取出值进行判断操作
					if(data.result){
						 $("#msg").text("恭喜你，可以使用此用户名");
					 }else{ 
						 $("#msg").text("对不起，此用户名已被使用");
					 }
			});

后台代码：

		// 获取用户提交的请求参数
		String name = request.getParameter("userName");
		PrintWriter pw = response.getWriter();
		if("seven".equals(name)){
			pw.write("{\"result\":false}");
		}else{
			pw.write("{\"result\":true}");
		}