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 οnkeyup="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 οnkeyup="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>

转载于:https://www.cnblogs.com/LiuOOP/p/11096407.html

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

php后台登录页修改成ajax,使用php后台给自己做一个页面路由，配合ajax实现局部刷新。(示例代码)...
今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...
Ajax实现局部刷新
Ajax实现局部刷新前言一. Ajax是什么? 二.实现方式: 1.原生的JS实现方式(了解) 2.JQeury实现方式 1. $.ajax() 2. $.get():发送get请求(ajax的简 ...
ajax局部刷新 php,PHP中ajax的局部刷新
最近做的项目用php5开发,现在将使用的局部刷新总结下: 1,使用情况是:我点击本页面,要使本页面的某块局部刷新: 本页面通过这种方式包含局部页面: function localRef(){ var ...
ajax异步请求刷新layui表格
ajax异步请求刷新Layui表格数据今天遇到一个小问题,向后端传一个bean插入到数据库后,在前端页面同步显示.刚开始直接用from表单把数据传给后台进行插入操作,但是这样前端不能及时接收到后端完 ...
java局部刷新_HTML页面局部刷新的实现代码
这篇文章主要介绍了HTML页面局部刷新的实现代码的相关资料,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 事件响应刷新:有请求才会刷新 1.通过 ...
ajax 上传文件实例,Ajax异步上传文件实例代码分享
非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: Index $(function() { $(':button').click(function () { var formDat ...
1.Ajax局部刷新技术概述，底层原理，全局刷新的例子
文章目录 Ajax 0.第四阶段概述本阶段课程内容: 哪些感觉比较难? 1.全局刷新和局部刷新 2.异步对象 3.Ajax 4.Ajax中使用异步对象 (1)创建异步对象 (2)给异步对象绑定事件 ...
js 只刷新ajax,JS实现AJAX局部刷新（附代码）
这次给大家带来JS实现AJAX局部刷新(附代码),JS实现AJAX局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下. AJAX即"Asynchronous Javascript An ...
HTML发送异步请求,使用原生JS发送ajax异步请求
Ajax Ajax: Asynchronous javaScript and xml (异步的JavaScript和xml技术).当我们向服务器发起请求的时候,服务器不会像浏览器响应整个页面,而是只有 ...

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