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. 9 个 Yoinkmac使用小技巧，提升你的 Mac 文档解决效率

    Yoinkmac是一个工具类应用程序,用于在苹果电脑上进行临时文档暂存,就像一个“中转站”将文件从一个窗口轻松移动到另一个窗口.类似的软件包括苹果电脑上的Dropshelf和Unclutter,但相比 ...

  2. Solved: RDP Disconnected – Error Code 2825 mremote

  3. Vue在一个函数中调用另外一个函数

    如:在vue的methods中一个函数调用另外一个函数 this.$options.methods.函数名字(); (这样的话要注意,this的指向已经指向了这个实例而不是指向全局,所以可能会报错说b ...

  4. openwrt添加内核模块

    进行目录package/kernel mkdir url-redirect cd url-redirect [zzh@KD1 url-redirect]$ tree . |-- Makefile `- ...

  5. appium sendkeys 输入数字丢失问题

    参考:https://blog.csdn.net/rainshine1190/article/details/82814503

  6. 移动端比较好用的滑动条 vue-slider-component

    安装: npm install vue-slider-component <template> <div> <vue-slider v-model="value ...

  7. 学习笔记整理之StringBuffer与StringBulider的线程安全与线程不安全

    关于线程和线程不安全: 概述 编辑 如果你的代码所在的进程中有多个线程在同时运行,而这些线程可能会同时运行这段代码.如果每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就 ...

  8. 学习Acegi应用到实际项目中（6）

    在企业应用中,用户的用户名.密码和角色等信息一般存放在RDBMS(关系数据库)中.前面几节我们采用的是InMemoryDaoImpl,即基于内存的存放方式.这节我们将采用RDBMS存储用户信息. Us ...

  9. 学以致用三十四-----python2.0加载图片

    想用做一个静态图片为背景的页面.结果遇到了一些阻碍.其主要原因还是路径没有找对.网上也参考了不少方法,也许是因为版本不同,处理的方法也不同,因此按照网上的处理方式,也没有得到解决. 为此困惑了一天.结 ...

  10. Cookie的使用（14）

    一:cookie的简要介绍: (1)什么是cookie a.cookie是一种客户端的状态管理技术b.当浏览器向服务器发送请求的时候,服务器会将少量的数据以set-cookie消息头的方式发送给浏览器 ...