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. Python之路(第三十三篇) 网络编程：socketserver深度解析

    一.socketserver 模块介绍 socketserver是标准库中的一个高级模块,用于网络客户端与服务器的实现.(version = "0.4") 在python2中写作S ...

  2. java中的 java.util.concurrent.locks.ReentrantLock类中的lockInterruptibly()方法介绍

    在java的 java.util.concurrent.locks包中,ReentrantLock类实现了lock接口,lock接口用于加锁和解锁限制,加锁后必须释放锁,其他的线程才能进入到里面执行, ...

  3. ArrayAdapter构造方法中的textViewResourseId

    simple_list_item_1:每个列表项都是一个普通的textView simple_list_item_2:每个列表项都是一个普通的textView(字体略大) simple_list_it ...

  4. 解决build workspace 缓慢的问题

    (1).解决方法         方法1.修改eclipse启动文件 eclipse.ini 中添加启动参数参数: -vmargs -Xmx512m         方法2.关闭自动构建工作区: pr ...

  5. PCL-安装

    1.安装定期更新维护的PCL开发包. 通过PPA支持的Ubuntu系统,安装命令为: sudo add-apt-repository ppa:v-launched-jochen-sprickerhof ...

  6. oracle中向timeStamp类型字段插入当前时间

    to_timestamp(to_char(sysdate,'YYYY-MM-DD HH24:MI:SS'),'YYYY-MM-DD HH24:MI:SS')

  7. LATEX配置

    字体: options->options interface->font schems->font FONT_NAME="Times New Roman"FONT ...

  8. appium selenium.common.exceptions.WebDriverException: Message: Parameters were incorrect

    selenium.common.exceptions.WebDriverException: Message: Parameters were incorrect. We wanted {" ...

  9. SFTP文件服务器的搭建

    由于公司项目的需要,需要自己搭建一个SFTP文件服务器,来实现不同IP服务器之间文件的传输: 应用的场景:由于需要缓解服务器的压力,需要对服务进分离,分别放置在不同IP服务器上: 首先提供一个SFTP ...

  10. C pointer again …

    记录一个比较基础的东东…… C 语言的指针,一直让人又爱又恨,爱它的人觉得它既灵活又强大,恨它的人觉得它太过于灵活太过于强大以至于容易将人绕晕.最早接触 C 语言,还是在刚进入大学的时候,算起来有好些 ...