jquery_2.3 Ajax操作新

1.jQueryAjax 编程1.1. 通过需求回顾Ajax编程1.1.1.需求：验证用户名是否有效需求：添加用户名的离焦校验html代码JS代码：<script type="text/javascript">window.onload = function(){document.getElementById("username").onblur = function() { // 获得用户名的值var username = this.value;// 判断用户名是否正确if(!username.match("^\\w{4,12}$")) {// 不满足document.getElementById("username_result").innerHTML = "<font color='red'>用户名必须是4~12位字母数字组合</forn>"return;} else {// 合法将数据上传到服务器校验// 第一步：创建对象var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}// 第二步：创建与服务器的连接xmlhttp.open("POST","${pageContext.request.contextPath}/demo1",true) ;xmlhttp.setRequestHeader("Content-type","application/x-www-form-urle ncoded");// 第三步：发送数据xmlhttp.send("username=" + username);// 第四步：成功回调函数xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {document.getElementById("username_result").innerHTML =xmlhttp.responseText;}}}}}</script>服务端代码：问题：如何将responseText 的json格式字符串，转换为JS对象。

eval(“(”+ responseText+”)”);1.2. jquery Ajax的开发jquery提供了6个编写ajax的方法，分成三组：第一组：$.ajax 是jquery提供最基本ajax编程方法，功能强大，代码复杂第二组：为了简化$.ajax编程，提供了load、$.get、$.post(重点)第三组: $.getScript 和$.getJSON 实现ajax的跨域请求1.2.1.$.ajax 的使用$.ajax(options) 是底层级AJAX函数的语法，功能强大语法格式：$.ajax({type: "POST GET", // http请求方式url: "请求地址",data: "name=John&location=Boston", // 发送给服务器的数据dataType：””, //预期服务器返回的数据类型。

如果不指定，jQuery 将自动根据HTTP 包MIME 信息来智能判断jsonp:callback // 解决跨域问题success: function(){...} // 成功回调函数});需求：$.ajax改写用户名离焦校验JS代码：1.2.2.load的使用Load的语法：jquery对象.load(url, param ,callback)⏹url 访问服务器地址⏹param 发送给服务器参数⏹callback 当正常返回后执行回调函数如果param存在，以POST方式请求，如果param 不存在，以GET方式请求需求：load改写用户名离焦校验，Ajax校验用户名是否合法JS代码：1.2.3.$.get和$.post的使用语法：$.get(url, param, callback, type)$.post(url, param, callback, type)⏹url 请求服务器的地址⏹param 发送给服务器参数⏹callback 服务器返回客户端执行success函数，接收data参数（服务器返回数据）⏹type 指定服务器返回数据格式，如果不指定，使用response响应contextType自动识别案例: 点击链接获取服务器端数据HTML代码：JS代码：将list对象转成xml服务器servlet代码：JS代码：$(function(){$("#showProducts").click(function(){// 向服务器索要数据语法： $.get(url, param, callback, type)$.get("${pageContext.request.contextPath}/demo2",function(data){(data);// 将data封装成table，追加到页面中var $table = $("<table border='1'><tr><td>产品名称</td><td>产品价格</td></tr></table>")$(data).find("product").each(function(){var name = $(this).children("name").text();var price = $(this).children("price").text();// 将产品信息封装到tr中var $tr = $("<tr><td>" + name + "</td><td>" + price + "</td></tr>");// 在table中追加tr$table.append($tr);});// 清空div中的内容$("#result").empty();// 在id=result的div中追加 table$("#result").append($table);});});});1.2.4.serialize 和serializeArray 方法使用问题：如何将form的数据以Ajax方式发送到服务器通过serialize 方法，将form参数转换name=value&name=value 格式html代码：<form id="myform">用户名<input type="text" name="username" /><br/>密码<input type="password" name="password" /><br/>爱好<input type="checkbox" name="hobby" value="体育" />体育<input type="checkbox" name="hobby" value="读书" />读书<input type="checkbox" name="hobby" value="音乐" />音乐<br/><input type="button" value="提交" id="mybtn" /></form>需求：将form的数据以Ajax方式发送到服务器1.2.5.综合案例：省市区三级联动html代码：// 当省变化时加载市$("#s1").change(function(){// 清空市$("#s2").empty();$("#s2").append("<option value=''>--请选择市--</option>");// 清空区县$("#s3").empty();$("#s3").append("<option value=''>--请选择区县--</option>");var code1 = $(this).val();$.post("${pageContext.request.contextPath }/demo1",{"pid":code1},fun ction(data){$(data).each(function(){//(this.cityName);var cityname = this.cityName;var codeid = this.codeid;// 将城市名称和城市id组装成optionvar $option = $("<option value='" + codeid + "'>" + cityname + "</option>");// 在省的select后面追加option$("#s2").append($option);});});});// 当市变化时加载区县$("#s2").change(function(){// 清空区县$("#s3").empty();$("#s3").append("<option value=''>--请选择区县--</option>");var code1 = $(this).val();$.post("${pageContext.request.contextPath }/demo1",{"pid":code1},fun ction(data){$(data).each(function(){//(this.cityName);var cityname = this.cityName;var codeid = this.codeid;// 将城市名称和城市id组装成optionvar $option = $("<option value='" + codeid + "'>" + cityname + "</option>");// 在区县的select后面追加option$("#s3").append($option);});});});优化以后的代码：$(function(){// 初始化省loadArea(0,"s1");// 当省变化时加载市$("#s1").change(function(){// 清空市$("#s2").empty();$("#s2").append("<option value=''>--请选择市--</option>");// 清空区县$("#s3").empty();$("#s3").append("<option value=''>--请选择区县--</option>");var code1 = $(this).val();loadArea(code1,"s2");});// 当市变化时加载区县$("#s2").change(function(){// 清空区县$("#s3").empty();$("#s3").append("<option value=''>--请选择区县--</option>");var code1 = $(this).val();loadArea(code1,"s3");});});function loadArea(pid, sid) {$.post("${pageContext.request.contextPath }/demo1",{"pid":pid},funct ion(data){$(data).each(function(){//(this.cityName);var cityname = this.cityName;var codeid = this.codeid;// 将城市名称和城市id组装成optionvar $option = $("<option value='"+ codeid + "'>"+ cityname + "</option>");// 在省的select后面追加option$("#" + sid).append($option);});});}练习：1、重点练习AjaxAJAX 用法Load 用法GET 解析JSON案例POST 解析XML 案例2、DOM 练习全选、select移动3、区分事件绑定和事件委派区别4、事件默认动作阻止和事件传播阻止。