1、同步交互和异步交互
同步交互
- 客户端向服务器端发送请求—>等待服务器端处理—>处理完毕返回，这个期间客户端不能做任何其他事情。
- 发送方发出数据后，等接收方发回相应以后才发下一个数据包的通讯方式。
异步交互 - 客户端向服务器端发送请求—>等待服务器端处理—>处理完毕返回，这个期间客户端可以做其他事情。
- 发送方发出数据后，不等接收方发回相应，接着发送下个数据包的通讯方式。
2、Ajax的定义
- Ajax被认为是（Asynchronous Javascript and XML的缩写）
- 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。
3、Ajax模型与传统web模型的区别
Ajax模型
- 客户端浏览器向服务器发送请求，请求的是数据。
- 服务器向客户端浏览器相应的是数据。
- 在ajax模型中，客户端浏览器与服务器通信，传递的是数据。
传统web模型 - 客户端浏览器向服务器发送请求，请求的是整个页面
- 服务器相应客户端浏览器的是整个页面
- 在传统的web模型中，客户端浏览器与服务器通信，传递的是整个页面。
4、实现异步交互的技术
- Flash
- Java applet
- 框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面。
- 隐藏的iframe
- XMLHttpRequest:该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。是创建Ajax应用的最佳选择。实际上通常把Ajax当成XMLHttpRequest对象的代名词。
5、Ajax的工作原理
- Ajax的核心是JavaScript对象XmlHttpRequest
- XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理相应，而不阻塞用户。
- 用户的浏览器在执行任务时即装载了Ajax引擎。Ajax引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
- Ajax引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用JavaScript调用Ajax引擎来代替产生一个Http的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给Ajax来执行。
6、Ajax包含的技术
AJAX（Asynchronous JavaScript and XML）并不是一项新技术，其实是多种技术的综合，包括JavaScript、XHTML和CSS、DOM、XML和XMLHttpRequest。
- 服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
- XML是一种描述数据的格式。Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中一种选择。
- XHTML和CSS标准化呈现。
- DOM实现动态显示和交互。
- 使用XMLHTTP组建XMLHttpRequest对象进行异步数据读取。
- 使用JavaScript绑定和处理所有数据。
7、Ajax的优点与缺点
优点：
- 最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
- 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
- 可以把以前一些服务器负担的工作转嫁给客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
- 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点： - AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
- AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
- 对流媒体的支持没有FLASH、Java Applet好。
- 对搜索引擎的支持比较弱。
- 一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。
8、XMLHttpRequest对象
<1>XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
<2>XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准！由于非标准所以实现方法不统一。
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象。
其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
<3>XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。
<4>创建XMLHttpRequest对象
<5>XMLHttpReqeust对象的方法
abort() 停止当前请求。
getAllResponseHeaders() 把http请求的所有响应首部作为键/值对返回。
getResponseHeader(“headerLabel”) 返回指定首部的串值。
open(“method”,“url”) 建立对服务器的调用，method参数可以是GET、POST。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。
send(content) 向服务器发送请求。
setReqeustHeader(“label”,“value”) 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。
<6>XMLHttpRequest对象的属性
onreadystatechange 状态改变的事件触发器
readyState 对象状态(interger)：
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 服务器进程返回数据的文本版本。
responseXML 服务器进程返回数据的兼容DOM的XML文档对象。
status 服务器返回的状态码，如：404 = “文件未找到”、200 = “成功”。
statusText 服务器返回的状态文本信息。
2 Ajax的实现步骤
<1>创建XMLHttpReqeust对象
<2>服务器端向客户端相应(注册监听)
-
XMLHttpRequest对象的onreadystatechange属性
该事件处理函数由服务器触发，而不是用户。
在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState来实现。改变readyState属性是服务器对客户端连接操作的一种方式。
每次readyState属性的改变都会触发readystatechange事件。 -
XMLHttpRequest对象的readyState 属性
readyState 属性表示Ajax请求的当前状态，它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕 -
每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。
readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为 4。 -
XMLHttpRequest对象的status属性
服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
常用状态码及其含义：
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改)
在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里。通过把这个值和200或304比较，可以确保服务器是否已发送了一个成功的响应。
<3>建立客户端与服务器端的通信连接- XMLHttpRequest对象的open ( method, url, asynch ) 方法
XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。 - 如果请求方式是”POST”方式的话，需要再open( )方法后，调用setRequestHeader(header,value)方法
当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。
Ajax请求中，发送首部信息的工作可以由 setRequestHeader完成。
参数header： 首部的名字; 参数value：首部的值。
如果用 POST 请求向服务器发送数据，需要将“Content-type”的首部设置为“application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。
该方法必须在open()之后才能调用。
<4>客户端向服务器端发送请求 - XMLHttpRequest对象的send(data)方法
如果请求方式是”GET”方式的话，send( )方法发送请求数据，服务器端接受不到参数。
如果请求方式是”POST”方式的话，send ( ) 方法发送请求数据，服务器端可以接受参数。
TestServlet.java
public class TestServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType( "text/html" ); PrintWriter out = response.getWriter(); System. out .println("connection server success" ); System. out .println(request.getParameter("a" )); System. out .println(request.getParameter("b" )); System. out .println(request.getParameter("c" )); out. println( "get connection server successful!"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } - XMLHttpRequest对象的open ( method, url, asynch ) 方法
}
web.xml
<? xml version ="1.0" encoding ="UTF-8" ?>< web-app version =“2.5”
xmlns =“http://java.sun.com/xml/ns/javaee”
xmlns:xsi =“http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation =“http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd” >
This is the description of my J2EE component</ description>
This is the display name of my J2EE component</ display-name>
TestServlet</ servlet-name >
app.servlet.TestServlet</ servlet-class >
test.js
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}catch (e){
try{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}catch (e){}
}
}
return xmlHttp;
}
window.onload = function(){
document.getElementById(“ok”).onclick = function(){
//1.创建XMLHttpRequest对象
var xhr = createXmlHttpRequest();
/**
* 2.建立客户端与服务器端的连接
*/
xhr.open(“POST”,“testServlet?timeStamp=” + new Date().getTime() + “&c=9”,true);
//xhr.open(“GET”,“testServlet?timeStamp=” + new Date().getTime() + “&c=9”,true);
//3.客户端向服务器端发送请求数据
//send()如果请求类型是GET方式的话，客户端发送请求数据，服务器端接收不到
//get方式的时候相当于xhr.send(null);
//xhr.send(“a=7&b=8”);
//不过可以通过在xhr.open的servlet路径后面加参数发送数据
//xhr.open(“GET”,“…/testServlet?timeStamp=” + new Date().getTime() + “&c=9”,true);
//这里之所以加上时间参数是为了防止缓存
//如果请求类型是POST方式的话，需要设置请求首部信息
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
xhr.send(“a=7&b=8”);
//4.服务器端向客户端进行响应
xhr.onreadystatechange = function(){
//alert(xhr.readyState);
//由于被触发了多次，所以上面会打印多次
if(xhr.readyState4){
//响应发送回来之后，还要根据Status确定有没有成功
if(xhr.status200){
var data = xhr.responseText;
alert(data);
}
}
}
}
};
index.jsp
<%@ page language =“java” import=“java.util.*” pageEncoding=“UTF-8” %>
执行结果：
Demo1
RegisterServlet.java
public class RegisterServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType( "text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String username = request.getParameter( "username");
System. out.println("username = " +username);
//查询数据库表
if(username==null||"".equals(username)){
out.println( "请输入你的用户名！" );
} else if (username.equals("sa")){
out.println( "该用户名已存在！" );
} else{
out.println( "该用户名可以使用！" );
}
}
}
register.jsp
<%@ page language =“java” pageEncoding=“utf-8” %>
请填写用户注册信息
| 用户名: | < input type="text" name ="username" value="" id="username" > |
| 密码: | < input type="password" name ="psw" value="" > |
| 确认密码: | < input type="password" name ="confpsw" value="" > |
| 出生日期: | < input type="text" name ="birthday" value="" > |
register.jsp
window.onload = function(){
document.getElementById(“checkusername”).onclick = function(){
var username = document.getElementById(“username”).value;
var xhr = createXmlHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseText;
document.getElementById("divcheck").innerHTML = data;
}
}
}
//这里之所以要写上../，是因为此js是在一个webroot下的一个包内
xhr.open("POST","../registerServlet",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+username);
}
}
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}catch (e){
try{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}catch (e){}
}
}
return xmlHttp;
}
Demo2
xmlFile.jsp
<%@ page language =“java” pageEncoding=“utf-8” %>
xmlFile.js
window.onload = function(){
var xhr = createXmlHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
var docXml = xhr.responseXML;
var provinceXmlElements = docXml.getElementsByTagName("province");
var provinceElement = document.getElementById("province");
for(var i=0;i<provinceXmlElements.length;i++){
var provinceXmlElement = provinceXmlElements[i];
var provinceXmlValue = provinceXmlElement.getAttribute("name");
var optionElement = document.createElement("option");
optionElement.setAttribute("value",provinceXmlValue);
var text = document.createTextNode(provinceXmlValue);
optionElement.appendChild(text);
provinceElement.appendChild(optionElement);
}
provinceElement.onchange = function(){
var cityElement = document.getElementById("city");
var optionElements = cityElement.getElementsByTagName("option");
for(var z=1;z<optionElements.length;z++){
cityElement.removeChild(optionElements[1]);
z--;
}
var provinceValue = this.value;
for(var i=0;i<provinceXmlElements.length;i++){
var provinceXmlElement = provinceXmlElements[i];
var provinceXmlValue = provinceXmlElement.getAttribute("name");
if(provinceValue==provinceXmlValue){
var cityXmlElements = provinceXmlElement.getElementsByTagName("city");
for(var j=0;j<cityXmlElements.length;j++){
var cityXmlElement = cityXmlElements[j];
var cityXmlValue = cityXmlElement.text;
var optionElement = document.createElement("option");
optionElement.setAttribute("value",cityXmlValue);
var text = document.createTextNode(cityXmlValue);
optionElement.appendChild(text);
cityElement.appendChild(optionElement);
}
}
}
}
}
}
}
xhr.open("get","../xmlServlet",true);
xhr.send(null);
}
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
XmlServlet.java
public class XmlServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//如果响应数据格式是xml，设置响应首部信息"Content-Type"为"text/xml"
response.setContentType( "text/xml;charset=utf-8");
PrintWriter out = response. getWriter();
out.println( "<china>");
out.println( "<province name='吉林省'>" );
out.println( "<city>长春</city>" );
out.println( "<city>吉林市</city>" );
out.println( "<city>四平</city>" );
out.println( "<city>松原</city>" );
out.println( "<city>通化</city>" );
out.println( "</province>");
out.println( "<province name='辽宁省'>" );
out.println( "<city>沈阳</city>" );
out.println( "<city>大连</city>" );
out.println( "<city>鞍山</city>" );
out.println( "<city>抚顺</city>" );
out.println( "<city>铁岭</city>" );
out.println( "</province>");
out.println( "<province name='山东省'>" );
out.println( "<city>济南</city>" );
out.println( "<city>青岛</city>" );
out.println( "<city>威海</city>" );
out.println( "<city>烟台</city>" );
out.println( "<city>潍坊</city>" );
out.println( "</province>");
out.println( "</china>");
}
}
3 Ajax的数据格式
<1>HTML
- XMLHttpRequest对象的responseText属性
responseText属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
当readyState属性值变成4时,responseText属性才可用，表明Ajax请求已经结束。
- 优点：
从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析。
HTML 的可读性好。
HTML 代码块与innerHTML属性搭配，效率高。
- 缺点：
若需要通过 AJAX 更新一篇文档的多个部分，HTML不合适(拆串)。
innerHTML并非DOM标准。
<2>XML
- XMLHttpRequest对象的responseXML属性
只用服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的。MIME类型必须为text/xml。 - 优点：
XML是一种通用的数据格式。
不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
利用 DOM 可以完全掌控文档。
- 缺点：
如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的。
当浏览器接收到长的XML文件后，DOM解析可能会很复杂。
4 xstrem
1、xstream可以完成javaBean对象与xml格式的转换
<1>导入xpp3_min-1.1.4c.jar、xstream-1.4.4.jar
<2>写bean类
<3>转化为xml类型并且打印出来
City.xml
public class City {
private Integer id ;
private String name ;
public City(Integer id,String name){
this.id = id;
this.name = name;
}
public Integer getId() {
return id ;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name ;
}
public void setName(String name) {
this.name = name;
}
}
Province.xml
public class Province {
private Integer id ;
private String name ;
private List<City> cities ;
public Province(Integer id, String name, List<City> cities) {
this.id = id;
this.name = name;
this.cities = cities;
}
public Integer getId() {
return id ;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name ;
}
public void setName(String name) {
this.name = name;
}
public List<City> getCities() {
return cities ;
}
public void setCities(List<City> cities) {
this.cities = cities;
}
}
Test.java
public class Test {
public static void main(String[] args){
List cities = new ArrayList();
City city1 = new City(1,“长春” );
City city2 = new City(2,“吉林” );
City city3 = new City(3,“四平” );
City city4 = new City(4,“通化” );
cities.add(city1);
cities.add(city2);
cities.add(city3);
cities.add(city4);
List< Province> provinces = new ArrayList< Province>();
Province p1 = new Province (1,"吉林省" ,cities);
provinces.add(p1);
XStream xstream = new XStream();
xstream.alias( "province", Province. class);
xstream.alias( "city", City.class);
xstream.useAttributeFor(Province. class,"id" );
xstream.useAttributeFor( Province.class, "name");
String xml = xstream.toXML(p1);
System. out.println(xml);
}
}
注：利用Person newJoe = (Person)xstream.fromXML(xml)方法可以将XML数据转化为javabean对象。
Ajax笔记
核心内容概述
1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。
2.Ajax传统编程。
3.jQuery框架，九种选择器为核心学习内容
4.JQuery UI插件
5.jQuery Ajax编程
6.jQuery第三方插件
7.反向Ajax编程(彗星)
一、JavaScript基础加强
JavaScript是在浏览器内容运行，无需编译、解释执行动态脚本语言，是一种弱类型语言，所有变量使用var定义。
JavaScript的3个组成部分分别为：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)
1.ECMAScript核心语法
①：代码编写位置
分为内部JS和外部JS【使用src进行引入】
alert(typeof d);
// 通过instanceof判断变量数据类型
alert(d instanceof Object);//falae
alert(a instanceof Object);//falae
var s = new String("abc"); // 对象类型
alert(s instanceof Object);
// alert(“98”==98);// true
// alert("true"true); // false
// alert(1true); // true
var d = 010;// 八进制
var d2 = 0x10; // 十六进制
// match方法 类似 Java中 matches，有区别
// alert(/^\d+KaTeX parse error: Got function '\newline' with no arguments as superscript at position 1: \̲n̲e̲w̲l̲i̲n̲e̲")); // math方法返回的是匹配正则表达式内容，而不是布尔值
// alert(/^\d+$/.exec(“1234abc1234”));// 返回匹配的内容
// Date使用
var date = new Date(); //当前日期
alert(date.toLocaleString());// 返回当地国际化日期格式
var dateStr = date.getFullYear()+"-"+date.getMonth()
+“-”+date.getDate()+" “+date.getHours()+”:“+date.getMinutes()
+”:"+date.getSeconds();
alert(dateStr);
④：Array常用属性方法
push() 加入元素到数组
pop() 从数组移除最后一个元素
reverse()反转
join() 连接数组元素 通过特定内容 返回字符串
sort() 排序
slice() 截取数组中指定元素 从start到end
Demo：
3.ECMAScript核心语法——函数
①：函数定义的三种方式
注意：第二种方式使用越来越多，第三种不常用，第一种常用
②：JavaScript全局函数(内置函数)
一组与编码解码相关的函数
encodeURI()&decodeURI()
encodeURIComponent()&decodeURIComponent()
escape()&unescape()
此块具体内容请参照W3C文档查看。
4.ECMAScript核心——JavaScript面向对象编程
Java是面向对象，写Java程序，写类和对象。JavaScript是基于对象，写Js，不用创建类，使用Js内部已经定义好的对象。
①：定义JavaScript对象的两种方式
方式一：使用已经存在的对象，通过关键字进行创建
var s = new String(“aaaa”);
var o = new Object();
var date = new Date();
// alert(date instanceof Object);// true
// JS对象 类似一个map结构
var arr = new Array(3);
arr[0] = 100;// 使用数组下标 为数组元素赋值
arr['aaa'] = 1000; // 定义对象属性
// alert(arr[‘aaa’]);
arr.showInfo = function(){// 定义对象方法
alert(arr.join(“,”));
};
// arr.showInfo(); //100, ,
Js其实就是一个类似map结构，key为属性名和方法名，value为属性值和方法定义
方式二：通过{}创建
var obj = {
name : ‘张三’,
age : 20,
getName : function(){
// 访问对象属性 通过关键字 this
return this.name;
}
};
// 访问对象 属性 [] 和 .
// alert(obj.name);
// alert(obj[“age”]);
alert(obj.getName());
// 添加一个方法到 obj对象
obj.getAge = function(){
return this.age;
}
alert(obj.getAge());
JavaScript中的对象是通过 new function创建的，在Js中function等同于一个类结构
// 定义类 结构
var Product = function(name,price){
this.name = name; // 保存name的值 到对象属性中
this.price = price;
}
// 基于类结构创建对象，使用new 关键字
var p1 = new Product(“冰箱”,1000);
var p2 = new Product(“洗衣机”,1500);
// alert(p1.name);
// alert(p1.price);
function本身代表一个函数，JavaScript对象通过new function来获得的，理解function就是对象构造函数
②：Object和function的关系
JavaScript中所有引用类型都是对象Object实例 ------- Function instanceOf Object //true
JavaScript 中所有对象都是通过 new Function实例(function) 获得 ------ Object instance Function //true
JavaScript所有对象构造函数都是function实例；JavaScript所有对象都是object实例，function也是object实例。
使用JavaScript的传递性进行推论！
A：function是用来定义一个函数，所有函数实例都是Function对象
B：JavaScript中，所有对象都是通过new function得到的
Var Object = function(){…}
Var String = function(){…}
Var Array = function(){…}
Var Date = function(){…}
结论：所有对象构造器都是Function实例
alert(String instanceOf Function) //true
alert(Object instanceOf Function) //true
C：创建一个对象，需要使用new function
Var s = new String()
Var o = new Object()
Var arr = new Array()
Var date = new Date()
结论：JavaScript中，一切对象都是object实例
alert(s instanceOf Object) //true
alert(Function instanceOf Object) //true
var f = new Function(); // 实例化Function对象
var o = new Object(); // 实例化Object对象
alert(f instanceof Function); // true
alert(f instanceof Object); // true
alert(o instanceof Function); // false
alert(o instanceof Object); // true
③：function原型属性
JavaScript所有对象都由function构造函数得来的 ，通过修改 function构造函数 prototype属性，动态修改对象属性和方法。
④：继承
A：使用原型链完成JavaScript单继承
var A = function(){
this.name = ‘xxx’;
}
var B = function(){
this.age = 20;
}
// 方式一 可以通过 prototype原型完成单继承 B的原型指向A
B.prototype = new A(); // 从A实例中，继承所有属性
var b = new B();
alert(b.name);
// 练习：通过prototype为String类添加一个trim方法
String.prototype.trim = function(){
return this.replace(/(^\s*)(\s*$)/g, "");
}
B：对象冒充完成多继承
var C = function(){
this.info = ‘c’;
}
var D = function(){
this.msg = ‘d’;
}
var E = function(){
// 同时继承C和D
this.methodC = C;
this.methodC();
delete this.methodC;
this.methodD = D;
this.methodD();
delete this.methodD;
this.desc = 'e';
}
var e = new E();
// alert(e.info);
// alert(e.msg);
// alert(e.desc);
⑤：动态方法调用
可以改变this的指向，可以完成对象多继承
// 定义函数
function printInfo(){
alert(this.name);
}
// 属性name 值 张三
var o = {name: '张三'};
// o.printInfo();// 函数不属于对象o
// JS提供动态方法调用两个方法，允许一个对象调用不是属于它自己的方法(call apply)
// printInfo.call(o);
// printInfo.apply(o);
function add(a,b){
this.sum = a+b;
}
// call传 多个参数
// add.call(o,8,10);
// apply 传递参数数组
add.apply(o,new Array(8,10));
// alert(o.sum);
// 动态方法调用 ，实现多重继承，原理就是对象冒充
var A = function(){
this.info = 'a';
}
var B = function(){
// 动态方法调用继承
A.call(this);
}
var b = new B();
alert(b.info);
二、JavaScript浏览器对象BOM
DOM Window 代表窗体
DOM History 历史记录
DOM Location 浏览器导航
DOM Navigator 浏览器信息 不讲
DOM Screen 屏幕 不讲
重点：window、history、location ，最重要的是window对象
1.window对象
Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
window.frames 返回窗口中所有命名的框架
parent是父窗口（如果窗口是顶级窗口，那么parentselftop）
top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）
self是当前窗口（等价window）
opener是用open方法打开当前窗口的那个窗口
①：父子窗体之间的通讯
在页面内嵌入一个iframe，在iframe中提供一个输入项，输入后，在iframe外面窗口中显示内容
显示结果如上图所示，实现思路如下：
子窗体：2.html
主窗体
②：window的open close
④：定时操作setInterval & setTimeout
setInterval：定时任务会重复执行
setTimeout：定时任务只执行一次
在页面动态显示当前时间
学习DOM 编程，从Document对象开始，document代表当前HTML网页文档对象，是window对象一个属性，可以直接使用 ，所有HTML DOM对象都是Document子对象
2.DOM编程开发
window.document 代表整个HTML文档
①：通过document获得Node节点对象
document.forms 获得页面中所有form元素集合
document.body 访问页面中 元素
document.cookie 用JS操作网页cookie信息
全局检索提供了三个重要的方法：
document.getElementById():通过id属性检索，获得Node节点（Element元素）
document.getElementsByName 通过name 属性检索 ，获得NodeList
document.getElementsByTagName 通过标签元素名称 获得NodeList
其中NodeList可以作为数组进行操作
Demo:在每一个h1标签后追加itcast
AAA
BBB
CCC
DDD
②：获得node后 如果node是元素，去里面文本内容 innerHTML (HTML页面内所有元素，一定是HTML 元素，innerHTML 是所有HTML元素通用属性 ) XML 取得一个元素内部文本内容 element.firstChild.nodeValue(看批注32) ③：通过节点Node相对位置关系访问元素 childNodes firstChild lastChild nextSibling parentNode previousSibling 用2种方式打印——明天休息明天休息
var h1 = document.getElementById("h1"); alert(h1.innerHTML);//方式一 alert(h1.firstChild.nodeValue);//方式二 3.DOM元素常见操作 DOM 获取节点：节点查询 参上 DOM 改变节点： 元素属性修改setAttribute(name,value) 内部文本元素的修改 innerHTML DOM 删除节点：removeChild 删除子元素 、removeAttribute(name)删除节点指定属性 * 要删除节点o o.parentNode.removeChild(o) DOM 替换节点：replaceChild：父节点.replaceChild(新节点,被替换节点) ; 如果对于一个已经存在节点，执行 appendChild、 replaceChild都会造成该节点一个移动效果，可以采取先克隆再复制来消除此效果。 DOM 创建节点：document对象提供createElement() 创建元素、createAttribute(name) 创建属性、createTextNode() 创建文本节点 DOM 添加节点 appendChild 父元素.appendChild(新的子节点) ; insertBefore 父节点.insertBefore(新子节点, 已经存在子节点) DOM 克隆节点 源节点.cloneNode(true); 该方法可以返回一个节点的克隆节点， 克隆节点包含原节点的属性和子元素 此节内容有大量的练习，建议大家做写，增强代码的熟练度。
四、JavaScript事件
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在，事件通常可以修饰多种对象。
1.为对象添加事件的2种方式
①：在HTML元素中添加对象的事件
5.键盘事件
使用场景：没有提交按钮，我们一般采用回车进行提交
Demo:
默认事件
这是一个链接事件传播
HTML DOM Event对象 提供preventDefault()用于阻止默认事件的发生， 该方法IE 不支持 ，在IE中使用 returnValue 提供stopPropagation()用与阻止事件传播，该方法IE不支持，在IE中 cancelBubble 五、Ajax编程入门 1.web交互的2种模式对比 ①：2种交互模式的流程②：2种交互模式用户体验
同步交互模式：客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
异步交互模型：客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。
2.Ajax快速入门
①：开发步骤
1).创建XMLHttpRequest对象
2).将状态触发器绑定到一个函数
3).使用open方法建立与服务器的连接
4).向服务器端发送数据
5).在回调函数中对返回数据进行处理
Demo：
②：XMLHttpRequest对象的属性及方法
属性：
1)onreadystateonchange：状态回调函数
2)readystate：对象状态
3)status：服务器返回的http状态码
4)reqsponseText/responseXML：服务器响应的字符串
5)statusText：服务器返回的http状态信息
方法：
1)open:
2)send:
③：客户端向服务器提交数据
1)get方式发送数据
xmlHttp.open(“GET”,“url?key=value”); // 参数已经在url上
xmlHttp.send(null);
2)post方式发送数据
xmlHttp.open(“POST”,“url”); // 不需要写参数
xmlHttp.setRequestHeader(“CONTENT-TYPE”,“application/x-www-form-urlencoded”); // post发送参数前，需要设置编码格式
xmlHttp.send(“name=xxx&pwd=xxx”); // 发送post数据
④：Ajax编程图解
说明：查看时，请将文档放到为180%较为合适！
结合编程图解，我们将第一个案例的代码进行解剖：
3.三种不同服务器响应数据类型编程
常见的服务器响应数据类型：html片段、JSON格式数据、xml格式数据
①：HTML片段的数据处理
练习1：验证用户名是否有效
通过xmlhttp.responseText获得返回数据
通过Dom查找获得元素
调用元素的innerHTML进行操作
说明：三个文件的具体内容请双击方框内的图标即可查看，这里推荐使用Notepad++进行关联
效果图展示：(数据使用list存储，abc和def存在)
注意：在register.html文件中，与服务器建立连接是，url一定要写对，否则返回数据时出现404错误！【“/Ajax/CheckUsernameServlet?username=”】
②：JSON格式数据处理
练习2：通过链接获得table数据，显示 — 返回HTML片段
通过product.jsp 生成HTML片段，返回客户端，客户端Ajax引擎接收，通过innerHTML 将table元素嵌入到页面内部，其思路与案例一类似，这里不做详细介绍。这里需要提出的是第二种解决方案JSON(HTML片段容易造成返回数据带回过多冗余的HTML标签元素)
JSON是一种JavaScript轻量级数据交互格式，主要应用于Ajax编程。易于人阅读和编写，同时也易于机器解析和生成。
格式一： {key:value,key:value,key:value } 键值对直接用 , 分开，键值之间用 : 键本身必须是字符串常量
{name : ‘张三’}
{‘name’:‘张三’}
是等价的。
值加不加引号，是有区别的，不加引号是变量，加引号是常量字符串
格式二： [值1, 值2 ,值3 ] 数组结构
组合后复杂格式
[{name:‘aaa’}, {name:‘bbb’}, {name:ccc}] 表示三个对象数组
JSON应用场景： AJAX请求参数和响应数据
问题： 服务器端如何生成 json格式数据------->>依赖第三方开源类库
③：JSON-lib的使用
是java类库 ，支持javabean map list array转换json格式字符串， 支持将json字符串转换javabean对象(反过来只支持这一种，使用很少)
在使用JSON-lib时必须导入至少5个jar包
开发时我们使用6个jar包，双击json-lib-all.zip即可获取所需jar包。
1）将数组/list集合解析成JSON串
使用JSONArray可以解析Array类型
JSONArray jsonArray = JSONArray.fromObject(list变量);
2）将Javabean/Map解析成JSON串
使用JSONObject可以解析javabean类型
JSONObject jsonObject = JSONObject.fromObject(javabean);
3）对象属性过滤转换JSON串
通过JsonConfig对象配置对象哪些属性不参与转换。
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{“price”});
重构练习2
运行效果：
④：XML格式数据处理
练习3：select完成省级联动
- XStream的使用
问题：服务器端如何将java对象，生成XML格式数据？需要第三方类库支持XStream
XStream is a simple library to serialize objects to XML and back again.
XStream主要完成Java对象的序列化(xstream-1.3.1.jar)以及解析(xpp3_min-1.1.4c.jar) - XStream的核心方法
xStream.toXML(obj)：将对象序列化XML
xStream.fromXML(inputStream/xml片段)：将xml信息解析成对象
xStream.alias(String name,Class)：将类型解析或者序列化时，取一个别名
代码案例：(序列化)
解析xml时，要注意别名的命名规则要与序列化时保持一致！
3) XStream注解
在Javabean中进行注解
把某属性的名称取别名为city：@XStreamAlias(value=“city”)
注解生效：xStream.autodetectAnnotations(true);
@XStreamAsAttribute 设置变量生成属性
@XStreamOmitField 设置变量不生成到XML
@XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量别名
六、jQuery框架
jQuery 1.4 是企业主流版本，从jQuery1.6 开始引入大量新特性。最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性)
jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js
jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大 （主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过）
1.jQuery程序快速入门
window.onload = function() {…}
等价于$(document).ready(function(){…});
①：jQuery基本使用
jQuery可以绑定多个onload函数，而传统模式只能绑定一个函数，后面的会将前面的覆盖掉。
传统Js写法：
jQuery写法：
②：jQuery核心函数
1)jQuery(callback) // 页面onload 函数
2)jQuery(expression, [context]) // 查找指定对象 ------ 九种选择器
3)jQuery(elements) // 将dom对象转换为jQuery对象
- document 是DOM对象 jQuery(document) 成为了jQuery对象
4)jQuery(html, [ownerDocument]) // 将html转换jQuery对象 - jQuery(“
hello
”) ----- 得到 jQuery对象
Demo:
// alert( ( " . i t c a s t " ) . s i z e ( ) ) ; a l e r t ( (".itcast").size()); alert( (".itcast").size());alert((“.itcast”).length);
// 通过index() 打印 id属性为foo 的div标签 是页面内的第几个div标签
alert($("div").index($("#foo")));
});
PAAAA
PBBBB
PCCCC
②：层级选择器
根据祖先、后代、父子关系、兄弟关系 进行选择
ancestor descendant 获取ancestor元素下边的所有元素 $(“form input”)
parent > child 获取parent元素下边的所有直接child 子元素 $(“form > input”)
prev + next 获取紧随pre元素的后一个兄弟元素 $(“label + input”)
prev ~ siblings 获取pre元素后边的所有兄弟元素 $(“form ~ input”)
练习2：
将class属性值为itcast的元素下所有a元素字体变为红色
将class属性值为itcast的元素下直接a元素字体变为蓝色
将div元素后所有兄弟a元素，字体变为黄色，大小变为30px
info p link
p link
link③：基本过滤选择器
:first 选取第一个元素 $(“tr:first”)
:last 选取最后一个元素 $(“tr:last”)
:not(selector) 去除所有与给定选择器匹配的元素 $(“input:not(:checked)”)
:even 选取所有元素中偶数索引的元素，从 0 开始计数 $(“tr:even”) ----- 选取奇数元素
:odd 选取所有元素中奇数索引的元素 ，从0 开始计数 $(“tr:odd”) ------ 选取偶数元素
:eq(index) 选取指定索引的元素 $(“tr:eq(1)”)
:gt(index) 选取索引大于指定index的元素 $(“tr:gt(0)”)
:lt(index) 选取索引小于指定index的元素 $(“tr:lt(2)”)
:header 选取所有的标题元素 如：h1, h2, h3 $(“:header”)
:animated 匹配所有正在执行动画效果的元素
练习3：
设置表格第一行，显示为红色
设置表格除第一行以外 显示为蓝色
设置表格奇数行背景色 黄色
设置表格偶数行背景色 绿色
设置页面中所有标题 显示为灰色
设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色
表格信息
这是一张商品表
| 商品编号 | 商品名称 | 售价 | 数量 |
|---|---|---|---|
| 001 | 冰箱 | 3000 | 100 |
| 002 | 洗衣机 | 2000 | 50 |
| 003 | 热水器 | 1500 | 20 |
| 004 | 手机 | 2188 | 200 |
<div>
slideDown(speed, [callback])
概述
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
参数
speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (可选)FunctionFunction在动画完成时执行的函数
</div>
<div>
fadeOut(speed, [callback])
概述
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数
speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (可选)Function在动画完成时执行的函数
</div>
④：内容过滤选择器
内容选择器是对子元素和文本内容的操作
:contains(text) 选取包含text文本内容的元素 $(“div:contains(‘John’)”) 文本内容含有john 的所有div
:empty 选取不包含子元素或者文本节点的空元素 $(“td:empty”) td元素必须为空
:has(selector) 选取含有选择器所匹配的元素的元素 $(“div:has§”).addClass(“test”); 含有p子元素的div
:parent 选取含有子元素或文本节点的元素 $(“td:parent”) 所有不为空td元素选中
练习4：
设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色
设置没有子元素的div元素 文本内容 ”这是一个空DIV“
设置包含p元素 的 div 背景色为黄色
设置所有含有子元素的span字体为蓝色
jQuery
是 JavaScript一个 轻量级框架⑤：可见性过滤选择器
根据元素的可见与不可见状态来选取元素
:hidden 选取所有不可见元素 $(“tr:hidden”)
:visible 选取所有可见的元素 $(“tr:visible”)
练习5：
为表单中所有隐藏域 添加 class属性，值为itcast
设置table所有 可见 tr 背景色 黄色
设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
| 冰箱 |
| 洗衣机 |
| 热水器 |
⑥：属性过滤选择器
通过元素的属性来选取相应的元素
[attribute] 选取拥有此属性的元素 $(“div[id]”)
[attribute=value] 选取指定属性值为value的所有元素
[attribute !=value] 选取属性值不为value的所有元素
[attribute ^= value] 选取属性值以value开始的所有元素
[attribute $= value] 选取属性值以value结束的所有元素
[attribute *= value] 选取属性值包含value的所有元素
练习6：
设置所有含有id属性的div，字体颜色红色
设置所有class属性值 含有itcast元素背景色为黄色
对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
PPPPPP
⑦：子元素过滤选择器
对某元素中的子元素进行选取
:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始 区别 eq
:first-child 选取第一个子元素
:last-child 选取最后一个子元素
:only-child 选取唯一子元素，它的父元素只有它这一个子元素
练习7：
选择id属性mytable 下3的倍数行，字体颜色为红色
表格 奇数行 背景色 黄色
表格 偶数行 背景色 灰色
只有一个td的 tr元素 字体为 蓝色
| 1 | 冰箱 |
| 2 | 洗衣机 |
| 3 | 热水器 |
| 4 | 电饭锅 |
| 5 | 电磁炉 |
| 6 | 豆浆机 |
| 7 | 微波炉 |
| 8 | 电视 |
| 9 | 空调 |
| 10 | 收音机 |
| 11 | 排油烟机 |
| 12 | 加湿器 |
| 13 电暖气 |
⑧：表单过滤选择器
选取表单元素的过滤选择器
:input 选取所有、、和元素
:text 选取所有的文本框元素
:password 选取所有的密码框元素
:radio 选取所有的单选框元素
:checkbox 选取所有的多选框元素
:submit 选取所有的提交按钮元素
:image 选取所有的图像按钮元素
:reset 选取所有重置按钮元素
:button 选取所有按钮元素
:file 选取所有文件上传域元素
:hidden 选取所有不可见元素
练习8：
对所有text框和password框，添加离焦事件，校验输入内容不能为空
对button 添加 点击事件，提交form表单
密码
性别 男
城市 北京 上海 个人简介 ⑨：表单对象属性过滤选择器 选取表单元素属性的过滤选择器 :enabled 选取所有可用元素 :disabled 选取所有不可用元素 :checked 选取所有被选中的元素，如单选框、复选框 :selected 选取所有被选中项元素，如下拉列表框、列表框 练习9： 点击button 打印radio checkbox select 中选中项的值 性别 ： 男 女
爱好: 体育 读书 音乐 旅游
城市 ： 北京 上海 广州
3.jQuery选择器总结 ①：对象访问核心方法 each(function(){}) 遍历集合 size()/length属性 返回集合长度 index() 查找目标元素是集合中第几个元素 ②：CSS样式操作 css(name,value) css({name:value,name:value}); 同时修改多个CSS样式
基本过滤选择器与 筛选过滤 API功能是相同
$(“tr:first”) 等价于 $(“tr”).first()
③：九种选择器重点
基本选择器和层级选择器 锁定元素
使用属性过滤选择器和内容过滤选择器 具体选中元素
表单操作 :checked :selected 选中 表单选中元素
配置基本过滤选择器，缩小选中的范围
4.jQuery的DOM操作
使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用
①：查询
children([expr]) 获取指定的子元素
find(expr) 获取指定的后代元素
parents([expr]) 获得祖辈元素
parent() 获取父元素
next([expr]) 获取下一个兄弟元素
prev([expr]) 获取前一个兄弟元素
siblings([expr]) 获取所有兄弟元素
在XML 解析中 find 方法使用最多
对查找结果进行遍历操作 each(function(){… }) ，在each函数中可以通过this 获得DOM对象，$(this) 获得jQuery对象
②：属性操作
设置属性 attr(name,value)
读取属性 attr(name)
同时设置多个属性 attr({name:value,name:value… });
attr(“checked”,“true”) 等价于 prop(“checked”)
练习1：
点击一个button，动态设置 div的属性 id name class
尝试能否设置一个不存在的属性？
③：CSS操作
通过attr属性设置/获取 style属性
attr(‘style’,‘color:red’); // 添加style属性
设置CSS样式属性
css(name, value) 设置一个CSS样式属性
css(properties) 传递key-value对象，设置多个CSS样式属性
设置class属性
addClass(class) 添加一个class属性
removeClass([class]) 移除一个class属性
toggleClass(class)如果存在（不存在）就删除（添加）一个类
练习2：
点击button，使一个div的背景颜色变为 黄色
通过toggleClass(class) 实现点击 字体变为紅色，再点击样式还原
④：HTML代码&文本&值操作
读取和设置某个元素中HTML内容
html() 读取innerHTML
html(content) 设置innerHTML
读取和设置某个元素中的文本内容
text() 读取文本内容
text(content) 设置文本内容
文本框、下拉列表框、单选框 选中的元素值
val() 读取元素value属性
val(content) 设置元素value属性
练习3：
传智播客
使用val() 获得文本框、下拉框、单选框选中的value
测试能否通过 val() 设置单选框、下拉框的选中效果 用户名
性别 男 女
城市 北京 上海 广州
设置 val控制radio select checkbox 选中 $("#city").val("广州"); $("input[name='gender']").val(['女']);
练习4：
输出所有select元素下的所有option元素中对应的文本内容
例如:中专^^ 输出—>中专^^
⑤：jQuery添加元素
创建元素
拼接好HTML代码片段 $(html片段) ---- 产生jQuery对象
内部插入：
n
o
d
e
.
a
p
p
e
n
d
(
node.append(
node.append(newNode) 内部结尾追加
n
o
d
e
.
p
r
e
p
e
n
d
(
node.prepend(
node.prepend(newNode) 内部开始位置追加
外部插入：
n
o
d
e
.
a
f
t
e
r
(
node.after(
node.after(newNode) 在存在元素后面追加 – 兄弟
n
e
w
N
o
d
e
.
i
n
s
e
r
t
B
e
f
o
r
e
(
newNode.insertBefore(
newNode.insertBefore(node) 在存在元素前面追加
练习5：
在id=edu下增加大专
⑥：jQuery删除元素
选中要删除元素.remove() ---- 完成元素删除
选中要删除元素.remove(expr) ----- 删除特定规则元素
remove删除节点后，事件也会删除
detach删除节点后，事件会保留 从1.4新API
练习6：
分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在
AAA
练习7：
表格数据添加与删除练习
| 姓名 | 邮箱 | 手机 | 删除 |
|---|
⑦：jQuery复制和替换
复制节点
$(“p”).clone(); 返回节点克隆后的副本，但不会克隆原节点的事件
$(“p”).clone(true); 克隆节点，保留原有事件
替换节点
$(“p”).replaceWith(“ITCAST”); 将所有p元素，替换为"ITCAST“
$(“ITCAST”).replaceAll(“p”); 与replaceWith相反
⑧：全选以及左右移动练习
练习8：
全选练习
全选/全不选
足球 篮球 游泳 唱歌
练习9：
左右移动练习
<input type="button" value="-->" id="chooseToRight" />
<input type="button" value="==>" id="allToRight" />
<input type="button" value="<--" id="chooseToLeft" />
<input type="button" value="<==" id="allToLeft" />
<select id="right" multiple="multiple" size="15">
<option>郑州</option>
</select>
*** live 为满足条件对象，实时追加绑定 、取消live事件用die方法
Demo:
②：事件一次性绑定和自动触发
一次性事件 one(type, [data], fn) 为对象绑定一次性事件，只有一次有效
触发事件 trigger(type, [data]) 触发目标对象指定的事件执行
练习1：
为页面内所有p 元素绑定 一次性事件，点击打印p元素中内容
页面内有两个按钮，点击按钮1， 触发按钮2的 click事件执行
传智播客
③：事件切换
hover(mouseover,mouseout) 模拟鼠标悬停事件
toggle(fn1,fn2,fn3…) ; 鼠标点击一次 触发一个函数
练习1：
编写一个div元素，光标移动上去 字体变为红色，移开后 变为蓝色
建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张
④：事件阻止默认动作和传播
默认动作阻止
$(“a”).click(function(event){
event.preventDefault();
// do something
});
取消事件冒泡
$(“p”).click(function(event){
event.stopPropagation();
// do something
});
信息
七、jQuery的Ajax编程
1.回顾传统Ajax开发步骤
①：创建xmlHttpRequest对象
var xmlHttp = creatHttpRequest();
②：绑定回调函数
xmlHttp.onreadystatechange = function(){……}
③：建立连接
xmlHttp.open(“GET”,”url”);
④：发送数据
xmlHttp.send(null) //GET请求
如果是POST请求需要设置编码格式：
xmlHttp.setRequestHeader(“CONTENT-TYPE”,“application/x-www-form-urlencoded”);
xmlHttp.send(“key=value?key=value”)
⑤：书写回调函数
if(readyState == 4){
if(status ==200){
……
//操作xmlHttp.responseText主要针对返回HTML片段和json
//操作xmlHttp.responseXML主要针对返回XML片段。
}
}
2.jQuery的Ajax开发
jQuery提供了最底层的Ajax调用方法：$.ajax
KaTeX parse error: Expected '}', got '&' at position 52: …ata: "name=John&̲location=Boston….ajax（）进一步的封装方法
l
o
a
d
、
load、
load、get、
p
o
s
t
。
这
三
个
方
法
不
支
持
跨
域
，
post。这三个方法不支持跨域，
post。这三个方法不支持跨域，getJSON、$getScript支持跨域。
①：load方法
load方法是jQuery中最为简单和常用的Ajax方法，处理HTML片段此方法最为合适。
语法
(
"
j
q
u
e
r
y
对
象
"
)
.
l
o
a
d
(
"
u
r
l
"
,
"
d
a
t
a
"
)
;
u
r
l
：
A
j
a
x
访
问
服
务
器
地
址
d
a
t
a
：
请
求
参
数
返
回
内
容
H
T
M
L
片
段
，
自
动
放
入
("jquery对象").load("url","data") ; url：Ajax访问服务器地址 data：请求参数 返回内容HTML片段 ，自动放入
("jquery对象").load("url","data");url：Ajax访问服务器地址data：请求参数返回内容HTML片段，自动放入(“jquery对象”)innerHTML 中(如果返回的数据需要处理，我们可以使用get或者post)
load()方法的传递参数根据参数data来自动自定。如过没有参数的传递，采用GET方式传递，否则采用POST方式
练习一：校验用户名是否存在
此练习在第五章的第三小节有实现代码，这里使用jQuery的方式进行简要的列出核心代码：
$(function(){
// 为用户名添加离焦事件
$(“input[name=‘username’]”).blur(function(){
// 获得当前输入 username
var username = $(this).val();
// 提交Ajax校验
$(“#info”).load(“/Ajax/checkUsername” , {‘username’: username});
});
});
密码
②：get方法和post方法 语法 ： $.get/$.post("url","parameter",function(data){...}); url Ajax访问服务器地址 parameter 代表请求参数 function 回调函数 data 代表从服务器返回数据内容 这里data代表各种数据内容 ： HTML片段、JSON、XML
如果传递参数给服务器使用 $.post , 不需要传参数 可以使用 $.get
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
