AJax技术

Ajax实现--javascript

字号+ 作者:H5之家 来源:H5之家 2017-09-06 11:03 我要评论( )

Ajax实现--javascript,Ajax技术的好处我想我们已经不需要再过多陈述了,ajax技术现在已经被广泛运用在web应用中,比如google地图,省市级联等等AJAX = Asynchron

正文

Ajax技术的好处我想我们已经不需要再过多陈述了,ajax技术现在已经被广泛运用在web应用中,比如google地图,省市级联等等

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。

废话不多说,现在先用纯javascript来实现一下ajax技术

首先是jsp页面:

<html><head><scripttype="text/javascript"> varxmlHttpRequest=null; functionajaxRequest() {if(window.ActiveXObject)//IE浏览器{ xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP"); }elseif(window.XMLHttpRequest)//除IE以外的其他浏览器{ xmlHttpRequest=newXMLHttpRequest(); }if(null!=xmlHttpRequest) {varv1=document.getElementById("value1").value;varv2=document.getElementById("value2").value; //准备向服务器发出一个请求 /* *GET方式向服务器发出一个请求 *xmlHttpRequest.open("GET","AjaxServlet?v1="+v1+"&v2="+v2,true);*/ /* *POST方式向服务器发出一个请求*/ xmlHttpRequest.open("POST","AjaxServlet",true); //当发生状态变化时就调用这个回调函数xmlHttpRequest.onreadystatechange=ajaxCallBack; //使用post提交时必须加上下面这行代码xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //向服务器发出一个请求xmlHttpRequest.send("v1="+v1+"&v2="+v2); } } functionajaxCallBack() {if(xmlHttpRequest.readyState==4) {if(xmlHttpRequest.status==200) {varcontent=xmlHttpRequest.responseText; document.getElementById("div1").innerHTML=content; } } } </script></head> <body><inputtype="button"value="getcontentfromserve"onclick="ajaxRequest()"/><br><inputtype="text"id="value1"/><br><inputtype="text"id="value2"/><divid="div1"></div></body></html>

服务端的servlet非常简单,就是响应给客户端一段文本内容。

ajax技术的核心就是xmlHttpRequest,对于IE来说,因为其内核与其他浏览器不一样(Firefox, Chrome),所以首先要判断一下使用的浏览器是否是IE

if(window.ActiveXObject)//IE浏览器 { xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP"); } elseif(window.XMLHttpRequest)//除IE以外的其他浏览器 { xmlHttpRequest=newXMLHttpRequest(); }

这样得到xmlHttpRequest以后,接下来的操作在上面代码里都有体现,流程无非就是像servlet发送请求,然后根据响应状态的转变调用回调函数,最后得到服务器端响应回来的数据,响应过来的既可以是xml文本,还可以是json数据或者是普通文本,

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • AJAX教程上手篇

    AJAX教程上手篇

    2017-09-06 11:03

  • Ajax标签导航进阶教程

    Ajax标签导航进阶教程

    2017-09-05 08:03

  • 用ajax实现的自动投票的代码javascript技巧

    用ajax实现的自动投票的代码javascript技巧

    2017-09-04 13:01

  • JavaScript中数组常见操作技巧

    JavaScript中数组常见操作技巧

    2017-09-04 12:04

网友点评
>