js(三) ajax异步局部刷新技术底层代码实现

ajax 异步 javaScript and xml

开发五步骤:

1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery

2. 找到连接, http的method方法 GET|POST PUT DELETE

3. 注册监听器有数据返回之后,就会自动调用该方法（不是一次 3次）

4. 发送请求 POST　PUT delete 请求数据

5. 处理请求

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>Insert title here</title>
 8 <style>
 9 * {
10     margin: 0;
11     padding: 0
12 }
13 </style>
14 </head>
15 <body>
16     <input onkeyup="tips(this)">
17     <div id="tip"></div>
18     <script>
19         function tips(th) {
20             //创建对象
21             var req = new XMLHttpRequest();
22             //打开链接
23             req.open("GET", "tips.jsp?k=" + th.value);
24             //注册监听器
25             req.onreadystatechange = function() {
26                 //0.1.2.3.4 5中状态 我们只需要4(请求完成 )来接收返回来的数据即可 其他情况选择忽略
27                 if (req.readyState == 4) {
28                     //当页面状态200代表请求成功 
29                     if (req.status == 200) {
30                         //将传回来的值因为包括页面中的空格，所以利用分割字符串
31                         var arr = req.responseText.split(",");
32                         //循环拼接字符串成ul输出
33                         var str = "<ul>";//头
34                         for (var i = 0; i < arr.length; i++) {
35                             str += "<li>" + arr[i] + "</li>";//中间的li
36                         }
37                         str += "<ul>";//尾
38                         //获取页面tip盒子输出值
39                         document.getElementById("tip").innerHTML = str;
40 
41                     }
42                 }
43             }
44             //发送请求
45             req.send();
46         }
47     </script>
48 </body>
49 </html>

当我们提交类型为POST时，要注意：

1.open打开连接的方式要为(第一个参数)post并且(第二个参数)url为链接地址：

 req.open("POST","tips.jsp");

2.设置请求头：

    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

3.发送请求的时候写上传输的值：

 req.send("k="+th.value);

源码：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>Insert title here</title>
 8 <style>
 9 * {
10     margin: 0;
11     padding: 0
12 }
13 </style>
14 </head>
15 <body>
16 <input onkeyup="tips(this)">
17 <div id="tip"></div>
18 <script>
19   function tips(th) {
20     //创建对象
21     var req=new XMLHttpRequest();
22     //打开链接
23     //req.open("GET","tips.jsp?k="+th.value);
24     req.open("POST","tips.jsp");
25     //设置请求头
26     req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
27     //注册监听器
28     req.onreadystatechange=function(){
29       if(req.readyState==4){
30         if(req.status==200){
31             //将传回来的值因为包括页面中的空格，所以利用分割字符串
32             var arr = req.responseText.split(",");
33             //循环拼接字符串成ul输出
34             var str = "<ul>";//头
35             for (var i = 0; i < arr.length; i++) {
36                 str += "<li>" + arr[i] + "</li>";//中间的li
37             }
38             str += "<ul>";//尾
39             //获取页面tip盒子输出值
40             document.getElementById("tip").innerHTML = str;
41 
42         }
43       }
44     }
45     req.send("k="+th.value);
46   }
47 
48 </script>
49 </body>
50 </html>

View Code

ajax+jquery：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>
 8 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
 9 <script>
10 $(function(){
11     $("input").keyup(function(){
12         //console.log($(this).val());
13         //$.get("tips.jsp?k="+$(this).val(),function(data){
14         $.post("tips.jsp","k="+$(this).val(),function(data){    
15             var arr = data.split(",");
16             var str = "<ul>";
17             for(var i=0;i<arr.length;i++){
18                 str+="<li>"+arr[i]+"</li>";
19             }
20             str+="</ul>";
21             $("#tips").html(str);
22         });
23     })    
24 })
25 </script>
26 <style>
27 *{margin:0;padding:0}
28 ul li{
29     
30     list-style:none;
31 }
32 </style>
33 </head>
34 <body>
35     <input>
36     <div id="tips"></div>
37 </body>
38 </html>

posted @ 2019-06-27 13:17 刘认真阅读(689) 评论(0) 编辑收藏举报

刷新页面返回顶部

刘认真