初识Ajax技术

Posted 享智同行

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识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)
 1 request.setCharacterEncoding("utf-8");
 2 response.setHeader("content-Type", "text/html;charset=utf-8");
 3 // 读取参数
 4 String mail = request.getParameter("mail");
 5 System.out.println("debug:mail:" + mail);
 6 String result = "false";
 7 if (mail.equalsIgnoreCase("qq")) {
 8     result = "true";
 9 }
10 // 输出结果
11 PrintWriter out = response.getWriter();
12 out.print(result);
13 out.flush();

 


JS代码(j_1)
 1 /**
 2  * 创建xmlHttpRequest对象
 3  * 
 4  * 兼容版本
 5  * 
 6  * 开发时间:2016-5-18 上午10:00:49
 7  * @author MrFalse
 8  */
 9 function createXMLHttpRequest(){
10     //  定义变量
11     var request=null;
12     if(window.XMLHttpRequest){
13         request=new XMLHttpRequest();
14     }else{
15         //  兼容早期IE5、IE6浏览器
16         request=new ActiveXObject("Microsoft.XMLHTTP");
17     }
18     return request;
19 }
20 /**
21  * 验证邮箱
22  * 
23  * 
24  * 开发时间:2016-5-18 上午10:05:07
25  * @author MrFalse
26  * @param oInput
27  */
28 function checkUserName(oInput){
29     //  读取输入框的的值
30     var strUserName=oInput.value;
31     if(strUserName==null||strUserName==""){
32         userNameMessage.innerHTML="邮箱不能为空";
33         return;
34     }
35     //  创建XMLHttpRequest对象
36     var xmlHttpRequest=createXMLHttpRequest();
37     //  设置回调函数
38     xmlHttpRequest.onreadystatechange=function(){
39         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
40             var strReturnString=xmlHttpRequest.responseText;
41             if(strReturnString.indexOf("true")>=0){
42                 userNameMessage.innerHTML="用户名已经被占用";
43                 userNameMessage.className="red";
44             }else{
45                 userNameMessage.innerHTML="用户名可以使用";
46                 userNameMessage.className="blue";
47             }
48         }
49     }
50     var url="RegisterServlet";
51     xmlHttpRequest.open("post",url,true);
52     //  设置头信息
53     xmlHttpRequest.setRequestHeader("Content-Type",
54             "application/x-www-form-urlencoded;charset=utf-8");
55     //  参数数据,使用key=value&key=value……的方式
56     var urlParam="mail="+strUserName;
57     //发送请求
58     xmlHttpRequest.send(urlParam);
59 }

 


HTML代码(h_1)
 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>注册页面</title>
 6 <script type="text/javascript" src="register.js"></script>
 7 <style type="text/css">
 8 
 9 .blue{
10     color: blue;
11     font-weight: normal;
12 }
13 
14 .red{
15     color: red;
16     font-weight: bold;
17 }
18 </style>
19 </head>
20 <body>
21     <form action="">
22         <p>注册邮箱:<input type="text" onblur="checkUserName(this);"/>*<span id="userNameMessage"></span></p>
23     </form>
24 </body>
25 </html>

 

 

 
jQuery实现Ajax
    jquery常用Ajax方法
$.ajax()  综合的请求,比较强大,功能较全,但是复杂
$.get() get方式请求,但是带参数时转为post请求
$.post() post方式请求
$.getJSON() 获取服务器返回的json数据
$(selecter).load() 将服务器返回的数据加载到选择器选中的内容中
    使用$.ajax()
        1.服务器代码使用上面代码(s_1)
        2.html代码(h_2)
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>ajax请求jquery</title>
 6 </head>
 7 <body>
 8     <form action="">
 9         <p><input type="text" name="email" id="email" onblur="requestxx(this);"/>
10               <span id="prompt">*</span>
11        </p>
12     </form>
13 </body>
14 </script>
15 </html>
        3.为h_1添加jquery代码如下
 
encodeURI(thisobj.value)使用情况
1.get模式时
2.传参是url模式
3.参数中有中文
jq_1
 1 <!-- 导入jquery库 -->
 2 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 3 <script type="text/javascript">
 4     function requestxx(thisobj){
 5         //对中文进行uri编码
 6         email=encodeURI(thisobj.value);
 7         $.ajax({
 8             url:"RegisterServlet",
 9             type:"get",
10             data:"mail="+email,
11             //执行成功的回调函数
12             success:function(result,textStatus){
13                 if(result.indexOf("true")>=0){
14                     $("#prompt").text("用户名已经被占用");
15                 }else{
16                     $("#prompt").text("用户名可以使用");
17                 }
18             },
19             //执行失败或错误的回调函数
20             error:function(){
21                 alert("ajax执行失败");
22             }
23         });
24     }
25 </script>

 

        使用$.get()
        1.服务器代码使用上面代码(s_1)
        2.html代码使用上面代码(h_2)
        3.为h_2添加jquery代码如下
jq_2
 1 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 2 <script type="text/javascript">
 3     function check(input){
 4         $.get("RegisterServlet","mail="+input.value,function(result){
 5             if(result.indexOf("true")>=0){
 6                 $("#prompt").text("用户名已经被占用");
 7             }else{
 8                 $("#prompt").text("用户名可以使用");
 9             }
10         });
11     }
12 </script>
        
使用$.post()
        1.服务器代码使用上面代码(s_1)
        2.html代码使用上面代码(h_2)
        3.为h_2添加jquery代码如下
jq_3
 1 <script type="text/javascript">
 2     function check(input){
 3         $.post("RegisterServlet","mail="+input.value,function(result){
 4             if(result.indexOf("true")>=0){
 5                 $("#prompt").text("用户名已经被占用");
 6             }else{
 7                 $("#prompt").text("用户名可以使用");
 8             }
 9         });
10     }
11 </script>
        
使用$.getJSON()
        1.服务器代码(s_2 Servlet)
1 request.setCharacterEncoding("utf-8");
2 //两种响应头都可以使用
3 response.setHeader("Content-Type", "application/json;charset=utf-8");
4 //response.setHeader("content-Type", "text/html;charset=utf-8");
5 PrintWriter out=response.getWriter();
6 //返回的json格式必须是严格的json格式,否则浏览器无法调用
7 out.print("{\\"name\\":\\"张三\\"}");
8 out.flush();
        2.html代码
h_3
1 <button onclick="clickTest()">提交</button>
        3.为h_2添加jquery代码如下
jq_4
1 <script type="text/javascript">
2     function clickTest() {
3         $.getJSON("ResponseJSON",function(data) {
4             alert(data.name);
5         })
6     }
7 </script>
使用$(selecter).load() 
            1.使用上面服务器代码s_2
            2.html代码使用上面代码(h_2)
            3.为h_2添加jquery代码如下
jq_5
1 <script type="text/javascript">
2     function check(input){
3         $("#prompt").load("RegisterServlet","mail="+input.value);
4     }
5 </script>

 

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

以上是关于初识Ajax技术的主要内容,如果未能解决你的问题,请参考以下文章

ajax技术初识与应用

初识ajax

初识AJAX

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

SpringMVC学习笔记6:Ajax初识