1.什么是异步？在传统的网站项目中，填写一堆数据，最后点击提交，在点击提交的这一刻才实现数据提交，前后台交互。在你点击提交之前数据是没有提交到后台的。这样就会造成很大的不便。比如，我填了一大堆数据，结果告诉我填错了，怎么办？如果我一填错就提示我填错了，那该有多好啊，此时，异步提交就出现了，不用写好所有数据一次全部提交，而是可以部分提交数据。

2.ajax实现异步提交的核心代码就是一行，就是获取浏览器内嵌的XMLHttpRequest对象，用该对象发送请求xmlHttp.open("GET",url,true)，设置第三个参数为true，即脚本会在send（提交）方法之后继续执行，而不用等待来自服务器的响应（异步）

3.具体实现请看实例实现类似于百度输入框的效果，随着输入内容的改变，动态改变页面提示信息，关键部位已有注释：

页面内容：

<body>

<div id="myDiv">

    <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="clearData()"

           onfocus="getMoreContents()">

    <input type="button" value="百度一下" width="50">

    <!--紧贴在输入框下面，动态显示提示内容-->

    <div id="popDiv">

        <table id="content_table" bgcolor="#FFFAFA" border="0" cellpadding="0">

            <tbody id="content_table_body">

            </tbody>

        </table>

    </div>

</div>

</body>

首先，在输入框中的内容发生变化的时候触发onkeyup事件（键盘敲击之后），进入getMoreContents()函数，进行后台交互，将相关联的信息查出来显示到输入框的下方。代码如下

var xmlHttp;

    function getMoreContents() {

        var contents = document.getElementById("keyword");

        if (contents.value == "") {

            clearData();

            return;

        }

        //该对象是实现异步提交的核心

        xmlHttp = createXmlHttp();

        //向服务器发送数据,escape函数是编码函数，将内容编码为ascll传输，以防中文乱码

        var url = "search?keyword=" + escape(contents.value);

        //true表示脚本会在send方法之后继续执行，而不用等待来自服务器的响应（异步）

        xmlHttp.open("GET", url, true)

        //xmlHttp绑定回调函数，在对象状态发生改变时调用。有0-4五个状态，一般只关心4（提交完成）

        //不能带参数，不能带括号

        xmlHttp.onreadystatechange = callBack;

        xmlHttp.send();

    }

其中有一个函数是createXmlHttp,这是用来获取实现异步提交的对象，不同的浏览器有不同的获取方法，代码如下：

//获得xmlHttp对象

    function createXmlHttp() {

        var xmlHttp;

        //一般的浏览器都支持这种方式来获取该对象

        if (window.XMLHttpRequest) {

            xmlHttp = new XMLHttpRequest();

        }

        //考虑浏览器的兼容性,ie就是他妈的事多

        if (window.ActiveXObject) {

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            //虽然该浏览器支持ActiveXObject，但是不支持Microsoft.XMLHTTP

            if (!xmlHttp) {

                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

            }

        }

        return xmlHttp;

    }

在获取后台返回的数据之后要将数据显示到页面上，这就要求提交对象绑定一个回调函数（提交成功之后执行），代码如下：

xmlHttp.onreadystatechange = callBack;

function callBack() {

        if (xmlHttp.readyState == 4) {

            //200表示响应成功，404表示未找到，500表示服务器内部错误

            if (xmlHttp.status == 200) {

                //交互成功，获得响应数据

                var result = xmlHttp.responseText;

                //java返回的json数据和js的json数据有细微的区别：最外层少了小括号

                var json = eval("(" + result + ")");

                //获得数据之后就可以动态展示数据了

                setContents(json);

            }

        }

    }

其中xmlHttp.readyState==4表示请求后台成功，至此，已经完成了关于异步提交的所有事情，后面的优化需要同学们自己完成。有需要的可以在评论区留下邮箱，有完整代码奉上。

ajax实现异步前后台交互，模拟百度搜索框智能提示的更多相关文章

  1. jquery php 百度搜索框智能提示效果

    这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有须要的朋友能够下载測试哦. 代码例如以下 index.html文件,保保存成index.htm <!DOCT ...

  2. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  3. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  4. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  5. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  6. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  7. 使用jsonp跨域调用百度js实现搜索框智能提示（转）

    http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...

  8. Ternary Search Tree 应用--搜索框智能提示

    前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...

  9. js中实现输入框类似百度搜索的智能提示效果

    说明:我这里显示的数据采用词典(词典在js中自定义的,看下面文字),主要显示key. 页面元素: <style type="text/css">.search { le ...

随机推荐

  1. Vue实现跑马灯的效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. JavaScript中的闭包永远都存储在内存中，除非关闭浏览器

    //閉包實現累加功能 function fn1() { var n = 1; add = function() { n += 1; } function fn2() { n += 1; console ...

  3. brace源码改造实现跨服务器监控-zjs

    1.从GitHub上下载源码,本地编译,有部分代码编译报错,如下图: 百度搜索import sun.jvmstat.monitor.需要导入什么jar包:导入jdk/lib/tools.jar.

  4. Jquery源码学习日记(1)

    https://jquery.com/  最新源码下载链接:jquery3.0 135-231定义了一些jquery的通用方法 233-301行定义了一些继承的方法 302-477定义了一些工具类方法 ...

  5. java 排序算法

    1.冒泡排序 public static void main(String[] args) { int[] arr={6,3,8,2,9,1}; System.out.println("排序 ...

  6. BFS总结

    能够用 BFS 解决的问题,一定不要用 DFS 去做! 因为用 Recursion 实现的 DFS 可能造成 StackOverflow! (NonRecursion 的 DFS 一来你不会写,二来面 ...

  7. Ubuntu之sudo权限管理/etc/sudoers文件

    网易云音乐翻车记 系统安装的Ubuntu18.04桌面版,安装网易云客户端后,还没来得及夸奖,发现点击图标打不开后网上找到教程:Ubuntu网易云音乐无法打开 感觉挺靠谱的,照着最下边的教材修改了一波 ...

  8. 通过TensorFlow训练神经网络模型

    神经网络模型的训练过程其实质上就是神经网络参数的设置过程 在神经网络优化算法中最常用的方法是反向传播算法,下图是反向传播算法流程图: 从上图可知,反向传播算法实现了一个迭代的过程,在每次迭代的开始,先 ...

  9. HTTP lab01 做一个简单的测试用 web页面

      做一个简单的测试用 web页面     1.安装httpd服务   yum install httpd   安装完httpd服务后,系统就自动生成了/var/www/html目录     创建一个 ...

  10. python按照指定字符或者长度 截取字符串

    1.截取指定位置字符串 Python字符串可以理解为一个数组,获取某一部分的可以使用 str[beginIndex:endPosition],其中str为需要截取的字符串,beginIndex为需要截 ...