web20jquery23 Ajax操作新.docx

web20jquery23 Ajax操作新.docx

《web20jquery23 Ajax操作新.docx》由会员分享，可在线阅读，更多相关《web20jquery23 Ajax操作新.docx（14页珍藏版）》请在冰点文库上搜索。

web20jquery23Ajax操作新

1.jQueryAjax编程

1.1.通过需求回顾Ajax编程

1.1.1.需求：

验证用户名是否有效

需求：

添加用户名的离焦校验

html代码

用户名:

JS代码：

//页面加载完成后执行

$（function（）{

//需求：

添加用户名的离焦校验

document.getElementById（"username"）.onblur=function（）{

//获取用户输出的用户信息

varusername=this.value;

//alert（username）;

//校验格式是否正确必须是4~12的字母数字下滑线的组合

if（!

username.match（"^\\w{4,12}$"））{

//如果校验格式不正确,马上提示用户格式不合法

document.getElementById（"username_result"）.innerHTML="用户名必须是4~12位的字母数字下划线的组合!

";

return;

}else{

//如果校验格式正确,去数据库查询该用户名是否存在,在结果span中显示后台返回的信息

//创建核心对象

varxmlhttp;

if（window.XMLHttpRequest）{//codeforIE7+,Firefox,Chrome,Opera,Safari

xmlhttp=newXMLHttpRequest（）;

}

else{//codeforIE6,IE5

xmlhttp=newActiveXObject（"Microsoft.XMLHTTP"）;

}

xmlhttp.onreadystatechange=function（）{

if（xmlhttp.readyState==4&&xmlhttp.status==200）{

document.getElementById（"username_result"）.innerHTML=xmlhttp.responseText;

}

};

xmlhttp.open（"POST","${pageContext.request.contextPath}/demo1",true）;

xmlhttp.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）;

xmlhttp.send（"username="+username）;

}

};

}）;

用户名:

服务端代码：

publicclassDemo1ServletextendsHttpServlet{

publicvoiddoGet（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{

doPost（request,response）;

}

publicvoiddoPost（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{

//需求:

校验用户名是否合法

//模拟数据库的假数据

Listlist=newArrayList（）;

list.add（"admin"）;

list.add（"liuyan"）;

//防止出现中文乱码

request.setCharacterEncoding（"utf-8"）;

//获得用户名

Stringusername=request.getParameter（"username"）;

response.setContentType（"text/html;charset=utf-8"）;

//校验

if（list.contains（username））{

//查到了用户名返回改用户名已经被占用

response.getWriter（）.println（"用户名已经存在,换一个!

"）;

}else{

//没查到此用户名可以使用

response.getWriter（）.println（"用户名可以使用!

"）;

}

}

}

问题：

如何将responseText的json格式字符串，转换为JS对象。

eval（“（”+responseText+”）”）;

1.2.jqueryAjax的开发

jquery提供了6个编写ajax的方法，分成三组：

第一组：

$.ajax是jquery提供最基本ajax编程方法，功能强大，代码复杂

第二组：

为了简化$.ajax编程，提供了load、$.get、$.post（重点）

第三组:

$.getScript和$.getJSON实现ajax的跨域请求

1.2.1.$.ajax的使用

$.ajax（options）是底层级AJAX函数的语法，功能强大

语法格式：

$.ajax（{

type:

"POSTGET",//http请求方式

url:

"请求地址",

data:

"name=John&location=Boston",//发送给服务器的数据

dataType：

””,//预期服务器返回的数据类型。

如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断

jsonp:

callback//解决跨域问题

success:

function（）{...}//成功回调函数

}）;

需求：

$.ajax改写用户名离焦校验

JS代码：

//页面加载完成后执行

$（function（）{

//需求：

添加用户名的离焦校验

$（"#username"）.blur（function（）{

//获取用户输出的用户信息

varusername=$（this）.val（）;

alert（username）;

//校验格式是否正确必须是4~12的字母数字下滑线的组合

if（!

username.match（"^\\w{4,12}$"））{

//如果校验格式不正确,马上提示用户格式不合法

$（"#username_result"）.html（"用户名必须是4~12位的字母数字下划线的组合!

"）;

return;

}else{

//如果校验格式正确,去数据库查询该用户名是否存在,在结果span中显示后台返回的信息

$.ajax（{

type:

"POST",

url:

"${pageContext.request.contextPath}/demo1",

data:

"username="+username,

success:

function（msg）{//msg值得是服务器返回的数据

$（"#username_result"）.html（"ajax:

:

:

"+msg）;

}

}）;

}

}）;

}）;

1.2.2.load的使用

Load的语法：

jquery对象.load（url,param,callback）

⏹url访问服务器地址

⏹param发送给服务器参数

⏹callback当正常返回后执行回调函数

如果param存在，以POST方式请求，如果param不存在，以GET方式请求

需求：

load改写用户名离焦校验，Ajax校验用户名是否合法

JS代码：

//页面加载完成后执行

$（function（）{

//需求：

添加用户名的离焦校验

$（"#username"）.blur（function（）{

//获取用户输出的用户信息

varusername=$（this）.val（）;

//校验格式是否正确必须是4~12的字母数字下滑线的组合

if（!

username.match（"^\\w{4,12}$"））{

//如果校验格式不正确,马上提示用户格式不合法

$（"#username_result"）.html（"用户名必须是4~12位的字母数字下划线的组合!

"）;

return;

}else{

//如果校验格式正确,去数据库查询该用户名是否存在,在结果span中显示后台返回的信息

varurl="${pageContext.request.contextPath}/demo1";

$（"#username_result"）.load（url,{"username":

username}）;

}

}）;

}）;

1.2.3.$.get和$.post的使用

语法：

$.get（url,param,callback,type）

$.post（url,param,callback,type）

⏹url请求服务器的地址

⏹param发送给服务器参数

⏹callback服务器返回客户端执行success函数，接收data参数（服务器返回数据）

⏹type指定服务器返回数据格式，如果不指定，使用response响应contextType自动识别

案例:

点击链接获取服务器端数据

HTML代码：

void（0）"id="showProducts">显示商品信息

还没有显示数据