AJAX即“Asynchronous JavaScript and XML”，意思是异步JavaScript和XML，是指一种创建交互式网页的网页开发技术。

　　虽然现在很少有人去自己手动写AJAX，大多数都用封装好的AJAX，但我觉得初学者还是应该从最原始的AJAX开始学习，这样才能掌握AJAX的核心。现在各种博客上讲解AJAX的比较多，但大多数都是只讲AJAX的前端部分，或者是只讲解一部分功能，并没有完成的实例。在这篇随笔里我将通过实例来全面讲解AJAX的基础应用，其中也包括后台代码实现部分。

实例一：点击一个按钮，然后将信息显示到指定的div内。

1、创建一个JAVA web工程，命名为Test1。在webRoot创建一个HTML页面，命名为FirstTest1.html，FirstTest1.html代码如下：

FirstTest1.html

<html>

  <head>

    <title>FirstTest1.html</title>

     <script language="javascript">

        function onclickAjax(){

        }

     </script>

  </head>

  <body>

    <input type="button" value="测试" onclick="onclickAjax()">

    <div id="testid">

    </div>

  </body>

</html>

在上面代码中给input绑定了点击事件onclickAjax()，这个onclickAjax()方法就是要实现Ajax的JS方法。

　　2、实现onclickAjax方法

　　为了方便理解，我给AJAX统一了一个流程，要想实现AJAX，就要按照以后步骤走：

　　（1）创建XMLHttp对象。（2）设置请求方式。（3）调用回调函数。（4）发送请求。

　　下面详细解释这4个步骤。

　　（1）创建XMLHttp对象：XMLHttp对象用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　创建XMLHttp对象的语法是:var xmlHttp=new XMLHttpRequest();如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：

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

　　一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：

在上面代码中给input绑定了点击事件onclickAjax()，这个onclickAjax()方法就是要实现Ajax的JS方法。

　　2、实现onclickAjax方法

　　为了方便理解，我给AJAX统一了一个流程，要想实现AJAX，就要按照以后步骤走：

　　（1）创建XMLHttp对象。（2）设置请求方式。（3）调用回调函数。（4）发送请求。

　　下面详细解释这4个步骤。

　　（1）创建XMLHttp对象：XMLHttp对象用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　创建XMLHttp对象的语法是:var xmlHttp=new XMLHttpRequest();如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：

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

　　一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：

　　

（2）设置请求方式：在WEB开发中，请求有两种形式，一个是get 一个是post，所以在这里需要设置一下具体使用哪个请求，XMLHttpRequest对象的open()方法就是来设置请求方式的。

　　open()：

　　　　功能：规定请求的类型、URL 以及是否异步处理请求。

　　　　参数：参数1，设置请求类型（GET 或 POST），GET与POST的区别请自己百度一下，这里不做解释；

　　　　　　   参数2，文件在服务器上的位置；

　　　　　　   参数3，是否异步处理请求，是为true，否为false。

　　具体的JS代码实现如下：

xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);

　　

　在上段代码中，请求的名字是："test.do?method=ajaxTest&&msg="+new Date()，后面有个new Date()，这里主要是防止缓存问题，如果是不段的更新页面内容，那么很可能就会出现点击按钮后内容页不改变，因为如果没有后面的msg=new Date()那么我们每一次发送的请求都是一样的，这样很可能就导致了缓存问题。所以需要在请求后面加上msg=new Date()，这样保障了每次的请求都不一样，避免缓存问题。

　　（3）回调函数：

　　如果在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数，xmlHttp对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例子里，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：

if(xmlHttp.readyState==4){

    if(xmlHttp.status==200){

    document.getElementById("testid").value=xmlHttp.responseText;//将信息显示到页面

 }else{

    alert("AJAX服务器返回错误！");

}

}

　　

在上面代码中，xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。所以这里我们判断只有当xmlHttp.readyState为4的时候才可以继续执行。

　　xmlHttp.status是服务器返回的结果，其中200代表正确。404代表未找到页面，所以这里我们判断只有当xmlHttp.status等于200的时候才可以继续执行。

　　document.getElementById("testid").value=xmlHttp.responseText;这段代码就是回调函数的核心内容，就是获取后台返回的数据，然后将这个数据赋值给id为testid的div。xmlHttp对象有两个属性都可以获取后台返回的数据，分别是：responseText和responseXML，其中responseText是用来获得字符串形式的响应数据，responseXML是用来获得 XML 形式的响应数据。至于选择哪一个是取决于后台给返回的数据的，这个例子里我们只是显示一条字符串数据所以选择的是responseText。responseXML将会在以后的例子中介绍。

　　（4）发送请求：发送请求是调用xmlHttp对象的send()方法。代码如下：

xmlHttp.send();

　　综合以上讲解，整个FirstTest.html页面的代码如下：

FirstTest.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>FirstTest1.html</title>

     <script language="javascript">

        function onclickAjax(){

            var xmlHttp;

            //分浏览器创建XMLHttp对象

if(window.XMLHttpRequest){

                xmlHttp=new XMLHttpRequest();

            }else if(window.ActiveXObject){

                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")

            }

            //设置请求类型

            xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);

            //回调函数

            xmlHttp.onreadystatechange=function(){

                if(xmlHttp.readyState==4){

                    if(xmlHttp.status==200){

                        document.getElementById("testid").value=xmlHttp.responseText;

                    }else{

                        alert("AJAX服务器返回错误！");

                    }

                }

            }

            //发送请求

            xmlHttp.send();

        }

     </script>

  </head>

  <body>

    <input type="button" value="测试" onclick="onclickAjax()">

    <div id="testid">

    </div>

  </body>

</html>

　　

　3、后台部分

　　这个例子的后台部分使用JAVA来写，主要应用了struts1框架。

　　（1）struts-config文件：

<struts-config>

  <form-beans />

  <action-mappings>

      <action path="/test" type="com.test.controller.AjaxController" parameter="method" scope="request">

      </action>

  </action-mappings>

  <message-resources parameter="com.test.controller.ApplicationResources" />

</struts-config>

　　（2）在包com.test.controller包下创建类AjaxController，并继承DispatchAction，重写execute方法并将该方法命名为ajaxTest。该方法代码如下：

ajaxTest

public ActionForward ajaxTest(ActionMapping mapping, ActionForm form,

            HttpServletRequest request, HttpServletResponse response)

            throws Exception {

        String msg="这是一个AJAX小程序";

        response.getWriter().write(msg);

        return null;

    }

　

快速理解-Ajax的更多相关文章

  1. 【转】快速理解Kafka分布式消息队列框架

     from:http://blog.csdn.net/colorant/article/details/12081909 快速理解Kafka分布式消息队列框架 标签: kafkamessage que ...

  2. Spark机器学习 Day2 快速理解机器学习

    Spark机器学习 Day2 快速理解机器学习 有两个问题: 机器学习到底是什么. 大数据机器学习到底是什么. 机器学习到底是什么 人正常思维的过程是根据历史经验得出一定的规律,然后在当前情况下根据这 ...

  3. 通过回调函数的理解来进一步理解ajax及其注意的用法

    一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...

  4. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  5. 快速理解高性能HTTP服务端的负载均衡技术原理(转)

    1.前言 在一个典型的高并发.大用户量的Web互联网系统的架构设计中,对HTTP集群的负载均衡设计是作为高性能系统优化环节中必不可少的方案.HTTP负载均衡的本质上是将Web用户流量进行均衡减压,因此 ...

  6. 脑残式网络编程入门(四)：快速理解HTTP/2的服务器推送(Server Push)

    本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...

  7. 字符编码那点事：快速理解ASCII、Unicode、GBK和UTF-8

    原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象 ...

  8. [转帖]十分钟快速理解DPI和PPI，不再傻傻分不清！

    十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...

  9. 快速理解VirtualBox的四种网络连接方式

    VirtualBox中有4中网络连接方式: NAT Bridged Adapter Internal Host-only Adapter VMWare中有三种,其实他跟VMWare 的网络连接方式都是 ...

随机推荐

  1. 初次启动app校验的活动图和分析

    初次启动活动图 version 1 version 2 version 3 根据上图的活动图分析,可能存在较严重的问题: 主线程中如果发现是sdcard的url,则可能进行重命名 FirstEnter ...

  2. Spark基础知识汇总

    2,wordcount: val wordcount = sc.textFile()).reduceByKey(_ + _).sortByKey().collect val wordcount = s ...

  3. 后台访问 JS解决跨域问题

    今天看了看以前做的一个小项目(其实就是一个页面),分享一下当时解决跨域问题的: 背景:公司把项目部署在多台服务器上,防止一台服务器崩溃后,其他的可以继续访问,对应本公司来说,某台服务器出问题后,技术人 ...

  4. 别老嫌Mac系统难用 这些快捷键你都用过吗

    苹果今年10月发布的全新带把儿(bar)的MacBook,轻薄炫酷的外观大受欢迎,其中当然不乏很多从Windows转到Mac阵营的用户.不少习惯了Windows操作习惯的用户在上手Mac时都会觉得非常 ...

  5. SSH使用详解

    一.SSH基础 (1)什么是SSH? 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且 ...

  6. Quartz.net Trigger触发器下 Cron表达式的格式

    有位博主写的不错,样式标准好理解,借鉴下. foamflower 1.   CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] ...

  7. ASP.NET中的chart控件绑定SQL Server数据库

    网上很多的chart控件的实例都没有绑定数据库,经过一番摸索后,终于实现了chart控件绑定数据库. 首先,在Visual Studio中建立一个网站,新建一个WebForm项目,名称为ChartTe ...

  8. JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  9. C++获取当前目录

    /* @author:CodingMengmeng @theme:C++获取当前目录 @time:2017-1-6 21:03:34 @blog:http://www.cnblogs.com/codi ...

  10. 获取QQ缓存图片