第十章 Jquery和Ajax

Ajax

异步JavaScript和XML,Ajax的核心是XMLHttpReques对象; Ajax实现的关键---发送异步请求, 接收响应以及执行回调函数;

XMLHttpRequest的状态信息

0 －（未初始化）

1 －（载入/正在发送请求）

2 －（载入完成/数据接收）

3 －（交互/解析数据）正在解析响应内容

4 －（后台处理完成）响应内容解析完成

status 状态码：

扫描二维码关注公众号，回复： 3442957 查看本文章

200：请求成功（后台处理结果ok）、

303：重定向

400：请求错误、

401：未授权、

403：禁止访问、

404：文件未找到

500：服务器错误

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>注册</title>
		<script type="text/javascript">
			//JavaScript使用Ajax,网页加载函数
			var xmlhttp;
			window.onload = function() {
				/*
				 *	① 创建异步核心对象XMLHttpRequest
				 *	由于浏览器的版本不同,对Ajax的兼容性不同,所以实际开发的难度相比较高
				 *	目前很多浏览器都支持Ajax,可以直接使用XMLHttpRequest对象,不需要这么复杂进行创建	
				 */	
				try {
					xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {
						try {
							xmlhttp = new XMLHttpRequest();
						} catch (e) {
							alert("您的浏览器不支持AJAX！");
						}
					}
				}
		
			};
						
			// 光标失去时间绑定函数
			function checkName() {
				// ② 设置请求信息,建立与服务器的连接
				xmlhttp.open("post","loginServlet", true);
				// ③ 设置请求头信息	
				xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				// ④ 设置回调函数(发送请求后不等返回结果，由回调函数处理结果)
				xmlhttp.onreadystatechange=doResult;
				// 通过Document对象的方法选择标签,获取标签的value属性值
				var name = document.getElementById("one").value;			
				// ⑤ 异步发送请求---
				xmlhttp.send("name="+name);			
			}		
			// 回调函数
			function doResult(){
				// 服务器的响应
				if(xmlhttp.readyState==4 && xmlhttp.status==200){
					var result = xmlhttp.responseText;
					if(result=="yes"){
						document.getElementById("two").innerHTML="此昵称已被使用";
					}else{
						document.getElementById("two").innerHTML="此昵称可以使用";
					}
				}
			}
		</script>
	</head>
	<%
		/*
			通过Ajax实现,部分请求提交验证; 
			与事件绑定,可达到在注册的时候部分数据在数据库和后台进行验证,进行页面的局部刷新 		
		 */
	%>
	<body>
		<!--主要用于验证Ajax-->
		<form action="#">
			<!--通过JavaScript的事件绑定,达到光标失去时将部分页面提交刷新-->
			昵称:<input id="one" type="text" name="name" onblur="checkName()" /><span id="two" style="color:red;"></span><br />
			<br /> 账号:<input type="text" name="user" /><br />
			<br />
		</form>
	</body>
</html>

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/*
 * 	页面异步提交的数据进行验证并返回结果,由回调函数执行
 */
public class LoginServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		doPost(request, response);

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		// 获取前台发送过来的数据
		String name = request.getParameter("name");
		// 假设数据库已有墨渐生微这个昵称
		if(name.equals("墨渐生微")){
			out.print("yes");
		}else{
			out.write("no");
		}
		
		out.flush();
		out.close();
	}

}

JSON

是一种数据格式，主要用于数据交换

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>JSON</title>
    <script type="text/javascript">
    	// JSON格式字符串--数据格式
    	var json = {"a":"A","b":"B"};
    	document.writeln(json.a);
    	document.writeln(json.b);
    	  	
    	
    	// JS对象
    	var object = {name:'Micro',age:23};
    	document.writeln(object.name);
    	document.writeln(object.age);
    </script>
  </head>
  
  <body>
  </body>
</html>

JQuery和Ajax

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>JQueryAjax的基本方法</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			// 网页加载
			$(function(){
				// 光标失去事件
				$("#one").blur(function(){
					// 获取value属性值
					var name = $(this).val();
					/*
						JQuery:  $.ajax(1,2,3,4);
						1 : 请求类型
						2 : 请求地址
						3 : 传输的数据 key=value
						4 : 回调函数
						1 2 3 4 是一个js对象
					*/
					$.ajax({
						type: "post",
						url:"loginServlet",
						data: "name="+name,
						success : function(result){
							if(result=="yes"){
								// ID选择器设置标签中间层html代码
								$("#two").html("昵称已存在");
							}else{
								// ID选择器设置标签文本内容
								$("#two").text("昵称可以使用");
							}
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<!--主要用于验证Ajax-->
		<form action="#">
			昵称:<input id="one" type="text" name="name" /><span id="two" style="color:red;"></span><br />
			<br /> 账号:<input type="text" name="user" /><br />
			<br />
		</form>
	</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>JQueryAjax的post方法</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			// 网页加载
			$(function(){
				// 光标失去事件
				$("#one").blur(function(){
					// 获取value属性值
					var value = $(this).val();
					/*
						JQuery:  $.post(1,2,3);
						1 : 请求地址
						2 : 传输的数据(js对象)
						3 : 回调函数
					*/
					$.post("loginServlet",{name:value},function(result){
						if(result=="yes"){
							// ID选择器设置标签中间层html代码
							$("#two").html("昵称已存在");
						}else{
							// ID选择器设置标签文本内容
							$("#two").text("昵称可以使用");
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<!--主要用于验证Ajax-->
		<form action="#">
			昵称:<input id="one" type="text" name="name" /><span id="two" style="color:red;"></span><br />
			<br /> 账号:<input type="text" name="user" /><br />
			<br />
		</form>
	</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>JQueryAjax的get方法</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			// 网页加载
			$(function(){
				// 光标失去事件
				$("#one").blur(function(){
					// 获取value属性值
					var value = $(this).val();
					/*
						JQuery:  $.get(1,2,3);
						1 : 请求地址
						2 : 传输的数据(js对象)
						3 : 回调函数
					*/
					$.post("loginServlet",{name:value},function(result){
						if(result=="yes"){
							// ID选择器设置标签中间层html代码
							$("#two").html("昵称已存在");
						}else{
							// ID选择器设置标签文本内容
							$("#two").text("昵称可以使用");
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<!--主要用于验证Ajax-->
		<form action="#">
			昵称:<input id="one" type="text" name="name" /><span id="two" style="color:red;"></span><br />
			<br /> 账号:<input type="text" name="user" /><br />
			<br />
		</form>
	</body>
</html>

serialize()序列化表单内容为字符串

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>序列化</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
		$(function(){
    		$("#one").click(function(){
    			//获取form表单内的所有值，以get方式传参的形式
    			var allValue=$("form").serialize();
    			// 序列化返回字符串格式: name=value&name=value
    			alert(allValue);
    		});
		});
    </script>
  </head>
  
  <body>
  	<form action="#">
  		帐&nbsp;&nbsp;号:<input type="text" name="user" /><br />
  		密&nbsp;&nbsp;码:<input type="text" name="pwd" /><br />
  		确认密码:<input type="text" name="rpwd" /><br />
  		普通按钮:<input type="button" value="确认" id="one" />	
  	</form>
  </body>
</html>

第十章 Jquery和Ajax

猜你喜欢