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之路(第三十七篇)并发编程：进程、multiprocess模块、创建进程方式、join()、守护进程

    一.在python程序中的进程操作 之前已经了解了很多进程相关的理论知识,了解进程是什么应该不再困难了,运行中的程序就是一个进程.所有的进程都是通过它的父进程来创建的.因此,运行起来的python程序 ...

  2. js跳转到页面指定元素

    var scrollDistance = $("#设置了的overflow元素").scrollTop() + $('#' + 当前屏幕元素).offset().top; $(&q ...

  3. Docker学习笔记：基础

    docker的概念 :docker是一个可供开发者在容器中 开发 部署 运行 应用的一个平台.通过使用Linux容器去部署应用的方式称为容器化. 基础概念 Images and Container i ...

  4. python networkx：绘制网络图

    1.简单使用 import networkx as nx import matplotlib.pyplot as plt G = nx.Graph() G.add_edge(1,2) nx.draw_ ...

  5. Tomcat 500error: Could not initialize class

    Web 项目报错Could not initialize class ,出现500,说明服务器是起来了,可能是这个类的驱动有问题,缺少初始化需要的文件 查到有相关情况: 考虑是jar 包的问题,检查了 ...

  6. Python从入门到超神之文件处理

    一.文件处理流程(python默认是utf-8编码) 打开文件函数:open(文件路径,encoding=‘utf-8’)注意:open会检索系统的编码,所以需要调整一致否则报错 例如:fi=open ...

  7. Libgdx slg游戏进程记录

    2月16日缩放居中,stage确定点击坐标,背景处理为actor 2月17日地图多次点击 2月19日stage确定点击位置(贝塞尔曲线六边形) 2月24日格式长度,读取xml属性解析btl保存 3月1 ...

  8. Stanford CS20学习笔记

    Lecture Note 2 Tensorboard P3 Data Structures P4 Math Operations P6 Data Types P7 tf native &&am ...

  9. Android从入门到进阶——布局

    一.组件 1.UI组件 (Android.view.View的子类或者间接子类) 2.容器组件(Android.view.ViewGroup子类或者间接子类) 二.UI组件:TextView,Spin ...

  10. jasperreports实现pdf文档的生成

    1.导入jar包(pom.xml构建) <dependencies> <dependency> <groupId>com.lowagie</groupId&g ...