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>
原文地址：https://www.cnblogs.com/LiuOOP/p/11096407.html
时间： 2024-08-02 20:42:34