AjaxJSONjQuery.docx
《AjaxJSONjQuery.docx》由会员分享，可在线阅读，更多相关《AjaxJSONjQuery.docx（47页珍藏版）》请在冰点文库上搜索。
AjaxJSONjQuery
Ajax
1.ajax是什么？
asynchronousjavascriptandxml：
异步的javascript和xml
是为了解决传统web应用当中“发送请求-等待响应”这种模式的弊端【浏览器在发送完请求之后，只能等待服务器的响应，用户不能做其它的操作，浏览器发送完请求，会抛弃整个页面，等待服务器返回新的页面，也就是说，浏览器和服务器之间交互的数据量很大，不能够做到按需获取数据】而创建的技术。
该技术的本质是：
通过浏览器内置的一个对象（XmlHttpRequest）异步地向服务器发送请求，（所谓异步，指的是浏览器并没有抛弃整个页面，用户仍然可以操作原有的页面，也就是，不是通过表单提交的方式向服务器发送请求），服务器在处理完请求之后，返回数据给XmlHttpRequest对象，通过javascript可以获取XmlHttpRequest中的数据，然后，使用该数据更新页面。
整个过程当中，用户不用等待服务器的响应。
传统的交互方式：
表单提交发请求，浏览器①将表单中的数据打包发送给服务器②将DOM树销毁，等待服务器返回一个新的页面。
浏览器与服务器之间的交互是通过一个一个的页面进行的，显然这样会导致数据量很大。
2.ajax编程
①XmlHttpRequest对象
该对象由浏览器实现（该实现并没有标准化），在创建该对象时，要区分浏览器。
1）如何创建该对象
varxmlHttpRequest=null;
if（（typeofXMLHttpRequest）!
='undefined'）//非IE浏览器
{
xmlHttpRequest=newXMLHttpRequest（）;
}
else{//IE浏览器
xmlHttpRequest=newActiveXObject（'Microsoft.XMLHttp'）;
}
通过实践发现新版本的IE也实现了XmlHttpRequest对象！
2）该对象的重要属性
responseText：
获取服务器响应的文本数据。
responseXml：
获取服务器响应的xml数据。
status：
获取服务器返回的状态码（比如200）。
readyState：
获取XmlHttpRequest与服务器通讯的状态（0,1,2,3,4,分别描述不同的状态）。
0：
（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）
1：
（初始化）对象已建立，尚未调用send方法
2：
（发送数据）send方法已调用。
3：
（数据传送中）已接收部分数据，此时，数据不完整。
4：
（响应结束），此时，可以通过responseText/responseXml获取数据了。
②编程步骤：
step1获取XmlHttpRequest对象
step2使用XmlHttpRequest对象
发送请求：
1）.get请求
varurl="some?
username=zs";
xmlHttpRequest.open（'get',url,true）;//建立连接
get：
请求方式，可以是get/post，大小写都可以。
url：
请求的地址,如果有请求参数，加在url之后。
true：
表示发送的是异步请求。
false表示同步请求，跟表单提交一样。
xmlHttpRequest.onreadystatechange=fun1;/*在fun1函数中获取数据，更新界面*/
/*注册一个回调函数，用于处理服务器的响应。
*/
/*fun1监听readstatechange事件，xmlHttpRequest对象与服务器通讯过程当中，会经历5个状态，每当状态发生改变，就会产生该事件。
可以在fun1中，编写代码更新页面。
*/
xmlHttpRequest.send（null）;//发送数据
//只有调用send方法，才开始发送数据。
//对于get请求，参数必须是null。
2）.post请求
与get请求步骤基本一样，
xmlHttpRequest.open（"POST",url,true）;
xmlHttpRequest.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
因为post方式提交需要http请求数据包。
step3在服务器端编写相应代码处理请求。
在服务器端，一般不需要返回完整的html页面，只需要返回部分的数据。
step4在回调函数中（即fun1），通过xmlHttpRequest获取数据，然后更新页面。
例：
实现用户名是否存在验证；服务器端的servlet和jsp文件，需要配置web.xml文件
publicclassAjaxTestextendsHttpServlet{
publicvoidservice（HttpServletRequestrequest,
HttpServletResponseresponse）throwsServletException,IOException{
PrintWriterout=response.getWriter（）;
System.out.println（"serviceexecutevaliusername..."）;
Stringusername=request.getParameter（"username"）;
if（username.equals（"zs"））{
out.print（"exist"）;
}else{
out.print（"ok"）;
}
}
}
| username: name="username"onblur="fun1（）;"/> red;">
|
| password:
|
|
3.ajax编程中的中文问题
①当采用get方式向服务器发送请求时，IE采用gb2312/gbk来编码，而firefox采用utf-8来编码。
解决方案：
step1：
encodeURI（url地址）:
采用utf-8来编码url。
step2：
URIEncoding="utf-8"
②采用post方式向服务器发送请求时，不管是ie/firefox,都会采用utf-8来编码。
解决方案：
step1：
request.setCharacterEncoding="utf-8"
综合例
<%@pagecontentType="text/html;charset=utf-8"pageEncoding="utf-8"%>
functiongetXmlHttpRequest（）{
varxmlHttpRequest=null;
if（（typeofXMLHttpRequest）!
='undefined'）
{//非ie浏览器
xmlHttpRequest=newXMLHttpRequest（）;
}else{//ie浏览器
xmlHttpRequest=newActiveXObject（'Microsoft.XMLHttp'）;
}
returnxmlHttpRequest;
}
functionvaliusername（）{
varxmlReq=getXmlHttpRequest（）;
varurl="valiusername.do?
username="+$F（'username'）;
xmlReq.open（"get",encodeURI（url）,true）;/*指定使用utf-8进行编码*/
xmlReq.onreadystatechange=function（）{
if（xmlReq.readyState==4）{
if（xmlReq.status==200）{/*没有系统错误的情况*/
varresText=xmlReq.responseText;
$（'username_msg'）.innerHTML=resText;
}else{
$（'username_msg'）.innerHTML='systemerror';
}
}else{
$（'username_msg'）.innerHTML='checking...';
}
}
xmlReq.send（null）;
}
/*-----------------------------------------采用post方式---------------------------------------------*/
functionvaliusername2（）{
varxmlReq=getXmlHttpRequest（）;
varurl='valiusername.do';
xmlReq.open（'post',url,true）;
xmlReq.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
xmlReq.onreadystatechange=function（）{
if（xmlReq.readyState==4）{
if（xmlReq.status==200）{
varresText=xmlReq.responseText;
$（'username_msg'）.innerHTML=resText;
}else{
$（'username_msg'）.innerHTML='系统错误';
}
}else{
$（'username_msg'）.innerHTML='checking...';
}
}
xmlReq.send（'username='+$F（'username'））;
}
30pt;">
用户名:
red;"id="username_msg">
年龄: