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. github删除

    https://blog.csdn.net/weixin_42152081/article/details/80635777

  2. 查看Chrome密码只需一段代码

    在Chrome浏览器的地址栏里输入“ chrome://chrome/settings/passwords ”,然后Chrome自动帮你保存的密码就会瞬间被曝露出来. 强调一下,只要不是在本机上输入以 ...

  3. 从零开始学习java（一）java基础语法

    从公司裸辞一个月,原本工作是做VB的,现在想从事java:在找工作的时候总是要什么项目经验,多少有些不爽,所有语言都有共 通性,我就不信java有这么难?给自己点时间来学习.坚持一个月自学,看看自己的 ...

  4. 虚方法(virtual)和抽象方法(abstract)的和接口(interface)的区别

    虚方法(virtual)和抽象方法(abstract)的区别 2017年06月15日 13:41:26 阅读数:65 注:本文转载自 http://www.cnblogs.com/michaelxu/ ...

  5. O365 Manager Plus帮助台委派功能一览表

    O365 Manager Plus帮助台委派介绍 虽然Office 365允许您在全球任何地方工作,但它提供的管理功能十分不足.当一个组织分布在多个国家/地区时,一个管理员很难单独管理所有用户和邮箱. ...

  6. zepto 源码 $.contains 学习笔记

    $.contains(parent,node)  返回值为一个布尔值 ==> boolean parent,node我们需要检查的节点检查父节点是否包含给定的dom节点,如果两者是相同的节点,返 ...

  7. 0.计划用libgdx写一个六边形回合制slg兵棋游戏

    题主层是一个e社游戏迷,但是因为国家政策,e社已经放弃了中国市场,所以决定自己来做,暂时当一个副业 大致计划: 1,先完成一个类似将军的荣耀的战旗游戏 2.再在其基础上制作一个钢铁雄心或世2 3.然后 ...

  8. Windows端口开放

    1.查看:cmd->netstat -na: 2.测试:cmd->telnet [ip] [port]: 3.开启:防火墙新建规则.

  9. window下github的学习心得

    准备工作: 安装git: 1.下载地址:http://msysgit.github.io/ 2.安装:本人是一路next的,现在没发现有什么问题.详细的安装过程参考:https://jingyan.b ...

  10. jq封装

    <div id='container' class='container'>盒子</div> <button onClick="f()" >te ...