jquery_2.3 Ajax操作新.doc

jQueryAjax 编程 通过需求回顾Ajax编程 需求：验证用户名是否有效 需求：添加用户名的离焦校验 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, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); } // 第二步：创建与服务器的连接 xmlhttp.open(POST,${pageContext.request.contextPath}/demo1,true); xmlhttp.setRequestHeader(Content-type,application/x-www-form-urlencoded); // 第三步：发送数据 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+”)”); jquery Ajax的开发 jquery提供了6个编写ajax的方法，分成三组： 第一组：$.ajax 是jquery提供最基本ajax编程方法，功能强大，代码复杂 第二组：为了简化$.ajax编程，提供了load、$.get、$.post(重点) 第三组: $.getScript 和 $.getJSON 实现ajax的跨域请求 $.ajax 的使用 $.ajax(options) 是底层级AJAX函数的语法，功能强大 语法格式： $.ajax({ type: POST GET, // http请求方式 url: 请求地址, data: name=Johnlocation=Boston, // 发送给服务器的数据 dataType：””, //预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断 jsonp:callback // 解决跨域问题 success: function(){...} // 成功回调函数 }); 需求：$.ajax改写用户名离焦校验 JS代码： load的使用 Load的语法 ： jquery对象.load(url, param ,callback) url 访问服务器地址 param 发送给服务器参数 callback 当正常返回后 执行回调函数 如果 param存在，以POST方式请求， 如果param 不存在，以GET方式请求 需求：load改写用户名离焦校验，Ajax校验用户名是否合法 JS代码： $.get和$.post的使用 语法 ： $.get(url, param, callback, type) $.post(url, param, callback, type) url 请求服务