js ajax异步局部刷新技术底层代码实现
Posted liuoop
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
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>
以上是关于js ajax异步局部刷新技术底层代码实现的主要内容，如果未能解决你的问题，请参考以下文章