您的位置:首页 - 教程 - jQuery - 正文
初识Ajax技术
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_1  servlet)
 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
  */
 function createXMLHttpRequest(){
     //  定义变量
     var request=null;
     if(window.XMLHttpRequest){
         request=new XMLHttpRequest();
     }else{
         //  兼容早期IE5、IE6浏览器
         request=new ActiveXObject("Microsoft.XMLHTTP");
     }
     return request;
 }
 /**
  * 验证邮箱
  * 
  * 
  * 开发时间:2016-5-18 上午10:05:07
  * @author MrFalse
  * @param oInput
  */
 function checkUserName(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)
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>注册页面</title>
 <script type="text/javascript" src="register.js"></script>
 <style type="text/css">
 
 .blue{
     color: blue;
     font-weight: normal;
 }
 
 .red{
     color: red;
     font-weight: bold;
 }
 </style>
 </head>
 <body>
     <form action="">
         <p>注册邮箱:<input type="text" onblur="checkUserName(this);"/>*<span id="userNameMessage"></span></p>
     </form>
 </body>
 </html>

 

 

 
jQuery实现Ajax
    jquery常用Ajax方法
$.ajax()  综合的请求,比较强大,功能较全,但是复杂
$.get() get方式请求,但是带参数时转为post请求
$.post() post方式请求
$.getJSON() 获取服务器返回的json数据
$(selecter).load() 将服务器返回的数据加载到选择器选中的内容中
    使用$.ajax()
        1.服务器代码使用上面代码(s_1)
        2.html代码(h_2)
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>ajax请求jquery</title>
 </head>
 <body>
     <form action="">
         <p><input type="text" name="email" id="email" onblur="requestxx(this);"/>
               <span id="prompt">*</span>
        </p>
     </form>
 </body>
 </script>
 </html>
        3.为h_1添加jquery代码如下
 
encodeURI(thisobj.value)使用情况
1.get模式时
2.传参是url模式
3.参数中有中文
jq_1
 <!-- 导入jquery库 -->
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
     function requestxx(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执行失败");
             }
         });
     }
 </script>

 

        使用$.get()
        1.服务器代码使用上面代码(s_1)
        2.html代码使用上面代码(h_2)
        3.为h_2添加jquery代码如下
jq_2
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
     function check(input){
         $.get("RegisterServlet","mail="+input.value,function(result){
             if(result.indexOf("true")>=0){
                 $("#prompt").text("用户名已经被占用");
             }else{
                 $("#prompt").text("用户名可以使用");
             }
         });
     }
 </script>
        
使用$.post()
        1.服务器代码使用上面代码(s_1)
        2.html代码使用上面代码(h_2)
        3.为h_2添加jquery代码如下
jq_3
 <script type="text/javascript">
     function check(input){
         $.post("RegisterServlet","mail="+input.value,function(result){
             if(result.indexOf("true")>=0){
                 $("#prompt").text("用户名已经被占用");
             }else{
                 $("#prompt").text("用户名可以使用");
             }
         });
     }
 </script>
        
使用$.getJSON()
        1.服务器代码(s_2 Servlet)
 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
 <button onclick="clickTest()">提交</button>
        3.为h_2添加jquery代码如下
jq_4
 <script type="text/javascript">
     function clickTest() {
         $.getJSON("ResponseJSON",function(data) {
             alert(data.name);
         })
     }
 </script>
使用$(selecter).load() 
            1.使用上面服务器代码s_2
            2.html代码使用上面代码(h_2)
            3.为h_2添加jquery代码如下
jq_5
 <script type="text/javascript">
     function check(input){
         $("#prompt").load("RegisterServlet","mail="+input.value);
     }
 </script>

 

注意:
  1. 一定要注意JSON字符串的书写格式,如果传入的字符串不是JSON格式,如果传入的字符串不是JSON格式或者格式错误,将不能得到正确的值。
  2. 使用$.getJSON()方法时,默认从服务器接收到的数据就是JSON对象,不需要再使用$.parseJSON()方法去解析即可使用
        $.parseJSON(str)的使用
demo
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>jqueryParseJSON</title>
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
     function test() {
         //json的字符串
         var jsonStr = '{"name":"张三","age":20}';
         //解析成json对象
         var jsonObj = $.parseJSON(jsonStr);
         alert("name:" + jsonObj.name + "age:" + jsonObj.age);
     }
 </script>
 </head>
 <body>
     <button onclick="test()">测试</button>
 </body>
 </html>
result:
 
 
 
 

评论: