Ajax:(Asynchronous JavaScript And Xml)是一种整合了JavaScript、XML、CSS等现有技术
Ajax工作流程:
纯javaScript的Ajax请求
XMLHttpRequest
XMLHttpRequest对象可以提供在不刷新当前页面的情况下向服务器发送异步请求,并接收服务器端的返回结果。
1.创建XMLHttpRequest对象语法
老版本IE(IE5和IE6)
XMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
新版本IE和其他大部分浏览器(推荐使用)
XMLHttpRequest = new XMLHttpRequest();
2.XMLHttpRequest对象常用属性和方法
常用属性
属性名称
说明
readyState
返回请求的当前状态
常用值:
0——未初始化
1——开始发送请求
2——请求发送完成
3——开始读取相应
4——读取响应结束
status
HTTP相应状态码:
200——相应正常
400——错误请求,如语法错误
403——没有访问权限
404——资源不存在
500——服务器内部错误
responseText
以文本形式获取相应值
responseXML
以XML形式获取相应值,并且解析成DOM对象返回
statusText
返回当前请求的相应行状态
onreadystatechange
设置回调函数
常用方法
方法
说明
open(String method,String url,boolean async,String user,String password)
用于创建一个新的HTTP请求
参数method:设置HTTP请求方法,如POST、GET等,不区分大小写
参数url:请求的url地址(如果是get请求,参数在这里拼接)
参数async:可选,指定此请求是否为异步方法,默认为true
参数user:可选,如果服务器需要验证,此处指定用户名,否则弹出验证窗口
参数password:可选,验证中的密码
send(String data)
发送请求到服务器端
参数data:字符串类型,通过此请求发送的数据。POST方式需要指定,GET方式则不指定
abort()
取消当前请求
setRequestHeader(String header,String value)
单独设置请求的某个HTTP头信息
参数header:要指定的HTTP头名称
参数value:要指定的HTTP头名称所对应的值
常用的:setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")
getResponseHeader(String header)
从响应中获取指定的HTTP头信息
参数header:要获取指定的HTTP头
getAllResponseHeaders()
获取相应的所有的HTTP头信息
服务器主要代码(s_1servlet)
request.setCharacterEncoding("utf-8"); response.setHeader("content-Type", "text/html;charset=utf-8"); //读取参数
String mail = request.getParameter("mail"); System.out.println("debug:mail:" +mail); String result = "false"; if (mail.equalsIgnoreCase("qq")) { result = "true"; } //输出结果
PrintWriter out =response.getWriter(); out.print(result); out.flush();
JS代码(j_1)
/** * 创建xmlHttpRequest对象 * * 兼容版本 * * 开发时间:2016-5-18 上午10:00:49 * @author MrFalse */
functioncreateXMLHttpRequest(){ //定义变量
var request=null; if(window.XMLHttpRequest){ request=newXMLHttpRequest(); }else{ //兼容早期IE5、IE6浏览器
request=new ActiveXObject("Microsoft.XMLHTTP"); } returnrequest; } /** * 验证邮箱 * * * 开发时间:2016-5-18 上午10:05:07 * @author MrFalse * @param oInput */
functioncheckUserName(oInput){ //读取输入框的的值
var strUserName=oInput.value; if(strUserName==null||strUserName==""){ userNameMessage.innerHTML="邮箱不能为空"; return; } //创建XMLHttpRequest对象
var xmlHttpRequest=createXMLHttpRequest(); //设置回调函数
xmlHttpRequest.onreadystatechange=function(){ if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ var strReturnString=xmlHttpRequest.responseText; if(strReturnString.indexOf("true")>=0){ userNameMessage.innerHTML="用户名已经被占用"; userNameMessage.className="red"; }else{ userNameMessage.innerHTML="用户名可以使用"; userNameMessage.className="blue"; } } } var url="RegisterServlet"; xmlHttpRequest.open("post",url,true); //设置头信息
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); //参数数据,使用key=value&key=value……的方式
var urlParam="mail="+strUserName; //发送请求
xmlHttpRequest.send(urlParam); }
HTML代码(h_1)
注册页面.blue{
color:blue;
font-weight:normal;
}
.red{
color:red;
font-weight:bold;
}
注册邮箱:*
jQuery实现Ajax
jquery常用Ajax方法
$.ajax() 综合的请求,比较强大,功能较全,但是复杂
$.get() get方式请求,但是带参数时转为post请求
$.post() post方式请求
$.getJSON() 获取服务器返回的json数据
$(selecter).load() 将服务器返回的数据加载到选择器选中的内容中
使用$.ajax()
1.服务器代码使用上面代码(s_1)
2.html代码(h_2)
ajax请求jquery*
3.为h_1添加jquery代码如下
encodeURI(thisobj.value)使用情况
1.get模式时
2.传参是url模式
3.参数中有中文
jq_1
functionrequestxx(thisobj){ //对中文进行uri编码
email=encodeURI(thisobj.value); $.ajax({ url:"RegisterServlet", type:"get", data:"mail="+email, //执行成功的回调函数
success:function(result,textStatus){ if(result.indexOf("true")>=0){ $("#prompt").text("用户名已经被占用"); }else{ $("#prompt").text("用户名可以使用"); } }, //执行失败或错误的回调函数
error:function(){ alert("ajax执行失败"); } }); }
使用$.get()
1.服务器代码使用上面代码(s_1)
2.html代码使用上面代码(h_2)
3.为h_2添加jquery代码如下
jq_2
functioncheck(input){ $.get("RegisterServlet","mail="+input.value,function(result){ if(result.indexOf("true")>=0){ $("#prompt").text("用户名已经被占用"); }else{ $("#prompt").text("用户名可以使用"); } }); }
使用$.post()
1.服务器代码使用上面代码(s_1)
2.html代码使用上面代码(h_2)
3.为h_2添加jquery代码如下
jq_3
functioncheck(input){ $.post("RegisterServlet","mail="+input.value,function(result){ if(result.indexOf("true")>=0){ $("#prompt").text("用户名已经被占用"); }else{ $("#prompt").text("用户名可以使用"); } }); }
使用$.getJSON()
1.服务器代码(s_2Servlet)
request.setCharacterEncoding("utf-8"); //两种响应头都可以使用
response.setHeader("Content-Type", "application/json;charset=utf-8"); //response.setHeader("content-Type", "text/html;charset=utf-8");
PrintWriter out=response.getWriter(); //返回的json格式必须是严格的json格式,否则浏览器无法调用
out.print("{\"name\":\"张三\"}"); out.flush();
2.html代码
h_3
提交
3.为h_2添加jquery代码如下
jq_4
functionclickTest() { $.getJSON("ResponseJSON",function(data) { alert(data.name); }) }
使用$(selecter).load()
1.使用上面服务器代码s_2
2.html代码使用上面代码(h_2)
3.为h_2添加jquery代码如下
jq_5
functioncheck(input){ $("#prompt").load("RegisterServlet","mail="+input.value); }
注意:
一定要注意JSON字符串的书写格式,如果传入的字符串不是JSON格式,如果传入的字符串不是JSON格式或者格式错误,将不能得到正确的值。
使用$.getJSON()方法时,默认从服务器接收到的数据就是JSON对象,不需要再使用$.parseJSON()方法去解析即可使用
$.parseJSON(str)的使用
demo
jqueryParseJSONfunctiontest() { //json的字符串
varjsonStr= '{"name":"张三","age":20}'; //解析成json对象
varjsonObj=$.parseJSON(jsonStr); alert("name:" +jsonObj.name+ "age:" +jsonObj.age); }
测试
result: