快速掌握Ajax-Ajax基础实例
AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术。 虽然现在很少有人去自己手动写AJAX,大多数都用封装好的AJAX,但我觉得初学者还是应该从最原始的AJAX开始学习,这样才能掌握AJAX的核心。现在各种博客上讲解AJAX的比较多,但大多数都是只讲AJAX的前端部分,或者是只讲解一部分功能,并没有完成的实例。在这篇随笔里我将通过实例来全面讲解AJAX的基础应用,其中也包括后台代码实现部分。 实例一:点击一个按钮,然后将信息显示到指定的div内。 1、创建一个JAVA web工程,命名为AjaxTest。在webRoot创建一个HTML页面,命名为FirstTest.html,FirstTest.html代码如下: <html> head> title>FirstTest.html</> script language="javascript"> function onclickAjax(){ } script> bodyinput type="button" value="测试" onclick="onclickAjax()"div id="testid"div> > 在上面代码中给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代码如下: |