`
longdick
  • 浏览: 579202 次
  • 性别: Icon_minigender_1
  • 来自: 0
社区版块
存档分类
最新评论

试试纯粹的Ajax吧(一)-----Give me a try!

    博客分类:
  • Ajax
阅读更多

/**

*  转载请注明作者longdick    http://longdick.iteye.com

*

*/

 

试试纯粹的Ajax吧 (二)----让server返回更多

试试纯粹的Ajax吧 (三)----JSON Now!

 

又见Ajax?  Ajax应该是算在所谓的下一代web app编写规范的范畴中,但是其所使用的技术并不新,主要涉及到的技术无非就是Javascript脚本,XML,当然不能少了支持它的浏览器。还有就是传的神乎其神的异步特性,以至于人们以为Ajax就是“Asynchronous JavaScript and XML”的缩写,看上去的确很像,但是据Ajax的发明人Jesse James Garrett所说,Ajax这个名字并不是“Asynchronous JavaScript and XML”的缩写,那究竟是什么名字的缩写呢?

 

这是一个谜~~ -_-|||

 

还好我们今天并不关注这个问题。我们今天来搭建一个最简单最纯粹的Ajax应用,不使用任何的框架技术如DWR、Ajax.net等。

 

服务端就用java来描述啦,我们要做的这个应用非常简单,只有一个html页面index.html和一个servlet;

 

html页面的主要代码就是这样:

 

<form name="form1"  method="post">
 <table align="center"><tr><td>
<input type="text" name="text1">
</td></tr>
<tr><td>
<input type="button" value="从服务端取值" onclick="getValue()">
</td></tr>
</table>
</form>

 

servlet里主要代码是这样写的:

 

private int i=0;

public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {		
		response.getWriter().write(String.valueOf(i++));
	}

 

大家看明白了吗,我们想要的效果就是,每次浏览器端按一下按钮,就发送一个请求给服务器端servlet,然后servlet返回一个不断自增的整型值,最后客户端要把这个值取得,显示在form1表单里的text1文本框中。这个效果在以前的话,非常简单,无非就是客户端和服务端一次对话而已;但是今天我们使用Ajax的特性来实现,让客户端和服务端的对话以异步的方式进行,这样可以避免讨厌的reload,增加用户体验:)

 

 

 

稍微了解过一些Ajax原理的同志都知道,Ajax主要是用一种特殊对象实现在客户端和服务端的传递数据的,这种对象一般书上都说叫 XMLHttpRequest对象。但是只对了一部分,因为这是因不同的浏览器而异的,在salari,firefox和opera等一些非IE的浏览器上的确用的是XMLHttpRequest对象;但在IE浏览器上是用一个叫做ActiveXObject的对象,而且不同版本的IE支持的ActiveXObject还不完全一样。。。。。晕啊,为什么没有一个标准呢。-_-

 

接下来在index.html  <head>标签里加入以下代码:

 

  var request=null;
  
  function createRequest(){
  try{
  request=new XMLHttpRequest();
  }catch(trymicrosoft){
  	try{
  	request=new ActiveXObject("Msxml2.XMLHTTP");
  	}catch(othermicrosoft){
  		try{
  		request=new ActiveXObject("Microsoft.XMLHTTP");
  		}catch(failed){
  		request=null;
  		}
	  }
  
  }
  if(request==null)alert("error creating request! ");
  }
  

 

这些代码的主要作用就是create一个Ajax要使用的request对象,要确保所有的浏览器下都能创建成功。。。

 

create完了以后呢,当然没完,接下来要设置点击按钮事件,当点击按钮时会触发一次浏览器和服务端的对话。这个光荣的任务当然需要javascript来完成,我们定义一个函数getValue() 函数体如下:

 

function getValue(){
  createRequest(); //创建一个新的Request
  var url="servlet\\AjaxServlet"; //指定服务端的URL地址,在这里是我们的servlet访问地址
  request.open("GET",url,true);
  request.onreadystatechange=updatePage;
  request.send(null);
  }

request.open("GET",url,true);这句话的意思是启动一个request,这个open()函数有三个参数:第一个是request对象的发送方式,你可以选择“GET”或者“POST”;第二个参数是要对话的服务端访问路径;第三个参数是个Boolean,true的话就是指以异步的方式发送请求,false的话就用同步。

 

request.onreadystatechange=updatePage;指定了request的onreadystatechange事件触发时所调用的脚本函数,只要request对象的readystate发生改变时就触发这个事件,updatePage也就是所谓的回调函数。这个设置需要放在request对象被发送前才能起作用,updatePage不要加上()。

 

request.send(null);会把这个request发送到指定的URL,不带任何发送参数。

 

记得在text1文本框控件加上onclick事件,调用这个getValue()函数就可以。

回调函数updatePage()的定义如下:

 

function updatePage(){
  if(request.readyState==4){
  if(request.status==200){
  var v=request.responseText;
  document.form1.text1.value=v;
  }else
  alert("error status:"+request.status);
  }
  }

 

首先判断request的readyState属性和status属性是否都是完成对话状态,如果是的话就执行里面的语句。

关于readyState和status属性的问题,可以参考这篇文章

 

在回调函数里我们用request对象的responseText属性来接收服务端返回的文本值。

最后tomcat开起来,这个Ajax应用放上去以后,测试一下,嘿,每点击一次“从服务端取值”按钮,都会从服务端取回一个整数值,回显在text1文本框中,在此过程中,页面没有出现任何reload。GREAT!!!

 

0
0
分享到:
评论

相关推荐

    Ajax-ajax-contact-form-wordpress.zip

    Ajax-ajax-contact-form-wordpress.zip,wordpress的联系人表单,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    Ajax-wc-ajax-product-filter.zip

    Ajax-wc-ajax-product-filter.zip,Woomerce AJAX产品过滤器-是一个插件,允许您根据类别、属性和价格轻松过滤产品。您可以对产品进行排序,导航到下一页和上一页,而无需重新加载该页。,ajax代表异步javascript和xml...

    jboss-ajax4jsf-1.1.1-src

    jboss-ajax4jsf-1.1.1-src 具体自己看吧

    Ajax-gunbasic-js.zip

    Ajax-gunbasic-js.zip,gunbasic js是一个库,用于快速开发基于ajax的web应用程序,这些应用程序易于独立测试。编写ajax代码只需要一行客户端js和服务器中的实现。适用于快速成型和团队开发。,ajax代表异步javascript...

    Pushlet的Ajax-pushlet-client.js分析

    Pushlet的Ajax-pushlet-client.js分析 服务器推技术前台js分析 希望能帮到大家

    AJAX ---.NET

    AJAX ---.NET AJAX ---.NET AJAX ---.NETA JAX ---.NET

    Ajax-bootstrap-select-ajax.zip

    Ajax-bootstrap-select-ajax.zip,bootstrap select对数据源的ajax支持,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    学习ajax之----掌握Ajax

    学习ajax之----掌握Ajax,学习ajax之----掌握Ajax ,学习ajax之----掌握Ajax ,学习ajax之----掌握Ajax

    ajax课件--------Ajax.ppt

    ajax课件--------Ajax.ppt,绝对经典,放心下载!

    Ajax-ajax-shopping-cart-page.zip

    Ajax-ajax-shopping-cart-page.zip,magento 2购物车页面ajax更新数量,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    Ajax-ajax-blob-downloader.zip

    Ajax-ajax-blob-downloader.zip,从ajax请求下载blob,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下...

    Ajax-Magento-ajax-add-to-cart.zip

    Ajax-Magento-ajax-add-to-cart.zip,[模块magento 1]magento ajax添加到购物车-ajoter vos produits au panier en ajax/感谢ajax将您的产品添加到购物车,ajax代表异步javascript和xml。它是多种web技术的集合,包括...

    Ajax-magento2-ajax-layered-navigation.zip

    Ajax-magento2-ajax-layered-navigation.zip,ajax分层导航magento 2提供了一个过滤器列表,帮助您的客户以最短的方式搜索和获得他们最喜欢的产品。这个扩展应用了现代ajax技术来增强过滤系统,以提高用户对页面上每...

    Ajax-ajax-live-search.zip

    Ajax-ajax-live-search.zip,ajax live search是一个php搜索表单,类似于google autocomplete特性,在您输入结果时显示结果。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和...

    Ajax-ajax-todo-list.zip

    Ajax-ajax-todo-list.zip,客户端渲染SPA(单页应用程序)实践。这个项目使用ajax来发送请求,node.js来处理api。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它...

    Ajax-Codeigniter-3-Ajax-Form-Submission.zip

    Ajax-Codeigniter-3-Ajax-Form-Submission.zip,“codeigniter 3 ajax表单提交和验证教程”一集的源代码,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建...

    dynatrace-AJAX-edition-4.2.0.1528.zip

    dynatrace-AJAX-edition-4.2.0.1528.zip

    Ajax-ajax-ex-boolflix.zip

    Ajax-ajax-ex-boolflix.zip,副本di netflix、con js、html和css、con utilizzo di handlebars、fontawesome和chiamate ajax,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和...

    Ajax-magento2-ajax-cart-quick.zip

    Ajax-magento2-ajax-cart-quick.zip,magento 2 ajax购物车扩展插件提供舒适的购物体验。客户可以很容易地选择可配置的选项并在弹出窗口中编辑项目,而不会浪费重新加载页面的时间。,ajax代表异步javascript和xml。它...

    aJAX例子--模糊查询

    aJAX例子--模糊查询 aJAX例子--模糊查询aJAX例子--模糊查询

Global site tag (gtag.js) - Google Analytics