ajax 异步 javaScript and xml

开发五步骤:

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

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

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

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

5. 处理请求

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style>

 * {

     margin: 0;

     padding: 0

 }

 </style>

 </head>

 <body>

     <input onkeyup="tips(this)">

     <div id="tip"></div>

     <script>

         function tips(th) {

             //创建对象

             var req = new XMLHttpRequest();

             //打开链接

             req.open("GET", "tips.jsp?k=" + th.value);

             //注册监听器

             req.onreadystatechange = function() {

                 //0.1.2.3.4 5中状态 我们只需要4(请求完成 )来接收返回来的数据即可 其他情况选择忽略

                 if (req.readyState == 4) {

                     //当页面状态200代表请求成功

                     if (req.status == 200) {

                         //将传回来的值因为包括页面中的空格，所以利用分割字符串

                         var arr = req.responseText.split(",");

                         //循环拼接字符串成ul输出

                         var str = "<ul>";//头

                         for (var i = 0; i < arr.length; i++) {

                             str += "<li>" + arr[i] + "</li>";//中间的li

                         }

                         str += "<ul>";//尾

                         //获取页面tip盒子输出值

                         document.getElementById("tip").innerHTML = str;

                     }

                 }

             }

             //发送请求

             req.send();

         }

     </script>

 </body>

 </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);

源码：

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style>

 * {

     margin: 0;

     padding: 0

 }

 </style>

 </head>

 <body>

 <input onkeyup="tips(this)">

 <div id="tip"></div>

 <script>

   function tips(th) {

     //创建对象

     var req=new XMLHttpRequest();

     //打开链接

     //req.open("GET","tips.jsp?k="+th.value);

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

     //设置请求头

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

     //注册监听器

     req.onreadystatechange=function(){

       if(req.readyState==4){

         if(req.status==200){

             //将传回来的值因为包括页面中的空格，所以利用分割字符串

             var arr = req.responseText.split(",");

             //循环拼接字符串成ul输出

             var str = "<ul>";//头

             for (var i = 0; i < arr.length; i++) {

                 str += "<li>" + arr[i] + "</li>";//中间的li

             }

             str += "<ul>";//尾

             //获取页面tip盒子输出值

             document.getElementById("tip").innerHTML = str;

         }

       }

     }

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

   }

 </script>

 </body>

 </html>

ajax+jquery：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>

 <script>

 $(function(){

     $("input").keyup(function(){

         //console.log($(this).val());

         //$.get("tips.jsp?k="+$(this).val(),function(data){

         $.post("tips.jsp","k="+$(this).val(),function(data){

             var arr = data.split(",");

             var str = "<ul>";

             for(var i=0;i<arr.length;i++){

                 str+="<li>"+arr[i]+"</li>";

             }

             str+="</ul>";

             $("#tips").html(str);

         });

     })

 })

 </script>

 <style>

 *{margin:0;padding:0}

 ul li{

     list-style:none;

 }

 </style>

 </head>

 <body>

     <input>

     <div id="tips"></div>

 </body>

 </html>

js(三) ajax异步局部刷新技术底层代码实现的更多相关文章

  1. Ajax 异步局部刷新

    Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...

  2. jquery ajax thinkphp异步局部刷新完整流程

    环境:ThinkPHP3.2.3,jQuery3.2   前言: 在一般的网站中,都需要用到jquery或者其他框架(比如angular)来处理前后端数据交互,thinkphp在后台也内置了一些函数用 ...

  3. asp.net mvc3 利用Ajax实现局部刷新

    1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...

  4. jQuery+ajax实现局部刷新

    在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...

  5. js中ajax异步问题

    1.JS的执行顺序问题 浏览器是按照从上到下的顺序解析页面,因此正常情况下,JavaScript脚本的执行顺序也是从上到下的,即页面上先出现的代码或先被引入的代码总是被先执行,即使是允许并行下载Jav ...

  6. Ajax定时局部刷新

    1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...

  7. C# 利用ajax实现局部刷新

    C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...

  8. [转载].NET ASP.NET 中web窗体（.aspx）利用ajax实现局部刷新

    之前开发的一套系统中用到了大量的 checkboxList 控件,但是每次选定之后都会刷新整个页面,用户体验很差,百度了之后查到这篇文章,尝试了一下可以实现,所以转载了过来,记录一下,也给其他有相同困 ...

  9. Ionic Js三：下拉刷新

    在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 <body ng-app="starter" ng-controller="actions ...

随机推荐

  1. 微服务Eureka使用详解

    Eureka是spring cloud中的一个负责服务注册与发现的组件.遵循着CAP理论中的A(可用性)P(分区容错性). 一个Eureka中分为eureka server和eureka client ...

  2. linux 添加文字、图形、线条、箭头的 截图

    1.deepin-screenshot 截图 软件包里搜索deepin-screenshot 支持添加文字.图形.线条.箭头的功能 2.字体发虚 Linux mint 开始菜单等字体不清晰 在软件管理 ...

  3. node.js的path模块

    path模块的各种API path.join([...paths]) 参数:paths <string> ,paths参数是字符串,这些字符串按路径片段顺序排列,(A sequence o ...

  4. 安装tomcat(fedora16)

    sudo yum install tomcat6 sudo yum install tomcat6-webapps sudo yum install tomcat6-admin-webapps   s ...

  5. WPF/Silverlight深度解决方案：(七)HLSL自定义渲染特效之完美攻略(中)

    原文:WPF/Silverlight深度解决方案:(七)HLSL自定义渲染特效之完美攻略(中) 通过上一节的解说,大家是否已经对HLSL有了较深刻的认识和理解,HLSL的渲染不仅仅局限于静态处理,通过 ...

  6. Dubbo报org.I0Itec.zkclient.exception.ZkNoNodeException异常

    解决办法就是添加zkclient的jar,maven工程的话增加如下引用: <dependency>     <groupId>com.github.sgroschupf< ...

  7. 【记录bug】npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsvents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents1.2.7: wanted {"os":"darwin

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsvents): npm WARN nots ...

  8. 【JZOJ4893】【NOIP2016提高A组集训第15场11.14】过河

    题目描述 数据范围 解法 由于同一个点,同一个圆盘最多只会走一次. 把(i,j)当作一个点,表示第i个点,放第i个圆盘. 那么就可以使用最短路. 时间复杂度为O(n4∗k). 事实上存在冗余圆盘,一个 ...

  9. 人生苦短,LET'S GO! GO语言目录

    1.Golang开山篇,GO就是NB! 1-1.go开发工具安装 2.go-人生第一个go程序和基本语法 3.go-流程控制 4.go-函数 5.go-流程控制 6.go-复合类型 7.go-面向对象 ...

  10. 洛谷P4126 [AHOI2009]最小割

    题目:洛谷P4126 [AHOI2009]最小割 思路: 结论题 在残余网络上跑tarjan求出所有SCC,记id[u]为点u所在SCC的编号.显然有id[s]!=id[t](否则s到t有通路,能继续 ...