jQuery3

jQuery 中的特殊事件 --  加载 DOM

　　在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload方法, 在 jQuery中使用$(document).ready() 方法.

　　

　　1、ready()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ready.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  </head>
  <body>
	<script type="text/javascript">
		
		/*window.onload=function(){
			alert("传统方式加载");
		}*/
		/*$(document).ready(function(){
			alert("jQuery方式");
		});*/
		
		/*$(function(){
			alert("最简形式");
		});*/
	</script>	  	
  </body>
</html>

　　2、change()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ready.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  </head>
  <body>
	<select>
		<option value="bj">北京</option>	
		<option value="sh">上海</option>	
		<option value="gz">广州</option>
	</select>
	<script type="text/javascript">
		$("select").first().change(function(){
			alert($("option:selected").val());
		});
	</script>	
  </body>
</html>

　　3、unload()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ready.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  </head>
  <body>
	<script type="text/javascript">
		$(document).ready(function(){
			alert("页面加载时触发");
		});
		$(window).unload(function(){
			alert("页面卸载时触发");		
		});
	</script>	
  </body>
</html>

　　4、submit()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ready.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  </head>
  <body>
  	<form action="submit.html" method="post">
		<select>
			<option value="bj">北京</option>	
			<option value="sh">上海</option>	
			<option value="gz">广州</option>
		</select>
		<input type="submit" value="表单提交"/>
	</form>
	<script type="text/javascript">
		$("form").first().submit(function(){
			alert("哈哈");
			return true;
		});
	</script>
  </body>
</html>

jQuery 中的 Ajax

　　JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()

　　load() 方法

　　　　load()方法是 jQuery中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是:   load(url[, data][,callback])

　　　　

　　　　程序员只需要使用 jQuery选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url做为参数传递给 load() 方法即可

　　　　如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的.通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)

　　　　传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式

　　　　对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象
　　　　方法的返回值是 jQuery

　　　　1、load.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>load.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  </head>
  <body>
  	<input type="button" value="基于jQuery的Ajax体验"/>	
  	<hr/>
  	<span></span>
  	<script type="text/javascript">
  		$("input").first().click(function(){
			//alert("click");
  			var url = "/myday33/AjaxServlet?time="+new Date().getTime();
			//var sendData = null;这里为null，或者不写为GET()请求
  			var sendData = {username:'jack' , password:'123456'};//json格式要对，不要加双引号""
  			$("span").first().load(url,sendData,function(backData,textStatus,xhr){
  				//alert("load完毕");
				alert(backData+" : "+textStatus+":"+xhr.readyState);
  			});
  		});
  	</script>
  </body>
</html>

　　　　2、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 AjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException,IOException {
		System.out.println("doGet");
	}

	public void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException,IOException {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println("用户名:" + username);
		System.out.println("密码:" + password);
		String tip = null;
		if("jack".equals(username) && "123456".equals(password)){
			tip = "成功";
		}else{
			tip = "失败";
		}
		response.setContentType("text/xml;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write("<root>");
			pw.write("<res>");
				pw.write(tip);
			pw.write("</res>");
		pw.write("</root>");
	}
}

　　　$.get() (或$.post()) 方法

　　　　$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);

　　　　

　　　　$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;

　　　　　　　　　　　　　　　　　　　　　　textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

　　　　方法的返回值:XMLHttpRequest对象
　　　　$.get()  和 $.post() 方法是 jQuery 中的全局函数

　　　　1、get.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>load.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  </head>
  <body>
  	<input type="button" value="基于jQuery的Ajax体验[get]"/>	
  	<hr/>
  	<span></span>
  	<script type="text/javascript">
  		$("input").first().click(function(){
	  		var url = "/myday33/AjaxServlet?time="+new Date().getTime();
	  		var sendData = {username:"hacket",password:"123456"};
			var xhr = $.get(url,sendData,function(backData,textStatus){
				window.alert(backData+":"+textStatus);
				//var msg = xhr.responseText;
				//$("span").first().html("<b>"+msg+"</b>");
			});
  		});
  	</script>
  </body>
</html>

　　2、AjaxServlet.java

package cn.zengfansheng.jquery.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 AjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException,IOException {
		
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println("用户名:" + username);
		System.out.println("密码:" + password);
		String tip = null;
		if("hacket".equals(username) && "123456".equals(password)){
			tip = "成功";
		}else{
			tip = "失败";
		}
		response.setContentType("text/xml;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write("<root>");
			pw.write("<res>");
				pw.write(tip);
			pw.write("</res>");
		pw.write("</root>");
	}

	public void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException,IOException {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println("用户名:" + username);
		System.out.println("密码:" + password);
		String tip = null;
		if("hacket".equals(username) && "123456".equals(password)){
			tip = "成功";
		}else{
			tip = "失败";
		}
		response.setContentType("text/xml;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write("<root>");
			pw.write("<res>");
				pw.write(tip);
			pw.write("</res>");
		pw.write("</root>");
	}
}

　　序列化元素

　　jQuery为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.

1 var xmlHpptReq=$.get("base01.jsp",{username:"aa",psw:“111"});
2 var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());
使用 serialize() 方法可以自动完成对参数的 url编码
因为该方法作用于 jQuery对象, 所以不光只要表单能使用, 其它选择器选取的元素也能使用它. 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>load.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.6.js"></script>
  </head>
  <body>
  	<form id="formID">
	  	用户名：<input type="text" name="username"/><br/>
	  	密码：<input type="password" name="password"/><br/>
  	</form>
  	<input type="button" value="基于jQuery的Ajax请求[post]"/>	
  	<hr/>
  	<span></span>
  	<script type="text/javascript">
  		$("input").last().click(function(){
  			var url = "/day33/AjaxServlet?time="+new Date().getTime();
  			//var sendData = {username:$("#usernameID").val(),password:$("#passwordID").val()};
  			var sendData = $("#formID").serialize();  
  			
  			
  			
			var xhr = $.post(url,sendData,function(){
				var xmlDocument = xhr.responseXML;
				$("span").first().html($(xmlDocument).find("res").text());
			});
  		});
  	</script>
  </body>
</html>

　　JQuery 加载并解析 XML

　　JQuery可以通过 $.get() 或 $.post() 方法来加载 xml.

　　

　　JQuery解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历

1、html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>load.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  </head>
  <body>
  	<script type="text/javascript">
		$(document).ready(function(){
			$.get("test.xml",function(xmlDocument){
				alert($(xmlDocument).find("res").text());//ie和firefox不一致
			});
		});
  	</script>
  </body>
</html>

　　2、xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<res>
		成功
	</res>
</root>

　　总结：

 1 *1 jQuery中常用事件
 2    1)特殊事件，在面页加载时执行，无需等候所有的<html>元素加载完毕。
 3     
 4 *2 基于jQuery的Ajax操作
 5    1)load(url/sendData/回调函数)
 6      如果没有发送参数到服务端，load()方法默认以GET方式发达，
 7      如果有发送参数到服务端，load()方法默认以POST方式发达，
 8      注意，发送的参数一定要符合json格式，标志是{},[{},{}]
 9    2)回调函数有三个方法
10     backData：以HTML字符串的形式服务端返回的数据    
11     textStatus：服务端返回的信息“success/error/notmodify/timeout”
12        *xhr：通过他，可以取得xhr.responseXML/xhr.responseText/xhr.readyState/...
13         返回值是jQuery对象
14    3)$.get(url,sendData,回调方法,回传的类型)    
15       回调函数有二个方法
16     backData：以HTML字符串的形式服务端返回的数据    
17     textStatus：服务端返回的信息“success/error/notmodify/timeout”
18         返回值是XMLHttpRequest对象
19    4)$.post(url,sendData,回调方法,回传的类型)    
20       回调函数有二个方法
21     backData：以HTML字符串的形式服务端返回的数据    
22     textStatus：服务端返回的信息“success/error/notmodify/timeout”
23         返回值是XMLHttpRequest对象
24    5)使用serialize()能将jQuery对象中的参数自动转成Json格式的字符串参数，注意要为表单元素取一个name属性
25     var sendData = $("#formID").serialize();            
26     
27    6)使用jQuery的插件
28      a)将插包导入工程的WebRoot/WebContent目录下 
29      b)写一个html或jsp页面，导入jquery核心包，导入插件相关的js和css文件
30      c)在页面加载时触发事件$(document).ready(function)({....})
31
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hacket/p/3073401.html